前后端分离，用 Vue 和 .NetCore 加速应用开发

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个前后端分离，全自动生成PC与移动端代码的快速开发框架——Vue.NetCore。

框架核心

• 快速开发(基础功能全部由代码生成器生成)
• 支持前端、后台自定义业务代码扩展，后台提供了大量常用扩展与通用类
• 前端、后台提供了近300个扩展方法与属性，开发人员可在此功能上编写扩展自定义业务代码
• 代码生成(代码生成器可直接生成主/从表前后端业务代码，有30多种属性可在线配置生成的代码)
• 前端 table 自动转换 key/value
• 前端表单 select/checkbox 自动绑定数据源，不需要写任何代码
• 支持(主从表)一对一前后端代码全自动生成、并支持数据源自动绑定与业务代码扩展，不需要写任何代码
• 支持一对多从表自定义扩展(不限从表类型与从表数量) ，一对多从表使用扩展可轻松实现
• 如果能上手框架，可以体会到不用996，更不用掉头发的感觉

框架适用范围

• 前后端分离项目
• 编写各种后台restful api接口。后台基础代码由代码生成器完成，在生成的代码上继续编写业务即可
• 前端表单开发
• 配合 app 做 H5 或全h5 开发
• 移动端开发、app、微信小程序(uniapp)
• 在现有的代码生成器功能上，继续定制开发代码生成器功能，解决重复性工作

框架开发依赖环境

后台

VS2019、vs2022 、.NetCore3.1 、.Net6、EFCore3.1/6.0、JWT、Dapper、SignalR、Quartz.Net、Autofac、SqlServer/MySql/PGSql/Oracle、Redis

前端

VsCode、Vue2/vue3（需要安装nodejs)、vuex、axios、promise、element ui、element plus

功能特性

只读基础表单

整个只读的基础表单的所有前后端代码，全部由代码生成器生成，代码生成器中几乎不需要配置，并支持并后端业务代码扩展，直接生成代码后，配置菜单权限即可

自动绑定下拉框数据表单

整个自动绑定下拉框数据表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，在代码生成器中只需要指定数据源编号，页面加载时会根据编号自动加载数据源并绑定

启用图片支持、审核表单

整个启用图片支持、审核表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，审核功能需要在菜单配置权限、代码生成器中勾选启用图片支持

高级查询

整个表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，查询字段、类型(下拉框、日期、TextArea 等)、所在行与列都由代码生成器完成，不需要写任何代码

主从表新建、编辑

主从表新建、编辑所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，新建、编辑从表配置、字段、类型(下拉框、日期、TextArea 等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成，不需要写任何代码

excel导入

excel 导入整个页面都由代码生成器生成，导入的字段、字段是否必填，下载模板也由代码生成器上配置(自己根据实际需要决定是否采用此方法)，导入时会验证是否为空与数据的合法性，逻辑校验自己实现扩展方法即可

H5开发

权限分配

目前只实现了对用户的角色的 Action 进行权限分配

代码生成器

代码生成器提供了20多种可配置的属性，可灵活配置显示、查询、编辑、导入、导出、主从关系等功能点击看代码生成器文档

启动项目

运行前先看后台 appsettings.json 配置属性说明；(注意修改 DbType 属性，修改为自己使用的数据库，数据库脚本在 DB 文件夹下)

1. 启动后台项目：后端项目路径 ../VOL.WebApi，找到 dev_run.bat 命令点击启动。后台启动默认端口是9991
2. 启动前端项目：前端 Vue 项目路径 ../VOL.Vue ，找到 run.bat 命令点击启动
3. 输入 http://localhost:8080 访问（本地超级管理员帐号：admin 密码：123456）

-END-

开源协议：MIT

开源地址：https://gitee.com/x_discoverer/Vue.NetCore

原文始发于微信公众号（开源技术专栏）：前后端分离，用 Vue 和 .NetCore 加速应用开发

文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/65967.html