Vue+ElementUI+core前后端分离框架开发项⽬实战
原⽂：blog.csdn/vM199zkg3Y7150u5/article/details/102550228
框架采⽤.NET Core + Vue前后端分离，并且⽀持前端、后台代码业务动态扩展，框架内置了⼀套有着20多种属性配置的代码⽣成器，可灵活配置⽣成的代码，代码⽣成器界⾯配置完成即可⽣成单表(主表)的增、删、改、查、导⼊、导出、上传、审核基础功能。只需要简单了解即可上⼿开发
⼀、框架基础功能已构建完成，可直接上⼿开发功能
Vol.WebApi类库可独⽴⽤于restful api服务单独部署,⽤于其他系统单独提供接⼝，直接上⼿编写业务代码即可
Vue+Vol.WebApi 可⽤于现有框架前后端分离进⾏开发
Vol.Web类库可⽤于传统MVC+Razor⽅式进⾏项⽬开发
Vol.Builder类库可作为⼀个独⽴的代码⽣成器，可⽣成cshtml页⾯、Vue页⾯、Model⽂件、Service与Repository.cs业务处理代码类可作为⼀个独⽴站点来发布静态html⽹页
可直接⽤于H5移动App开发H5开发：132.232.2.109/app/guide
⼆、框架特点
⽀持前端、后台基础业务代码动态扩展，可在现有框架增、删、改、查、导⼊、导出、审核基础业务上扩展复杂的业务代码
基本业务全部由框架完成，上⼿即可对基础业务以外的代码进⾏扩展
上⼿简单，需要 core2.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境
学习成本低，封装了常⽤可扩展组件及Demo(前端基于Iview/Element-UI组件进⾏了⼆次封装、后台提供了⼤量的扩展⽅法)
开发效率⾼，内定制开发的代码⽣成器,⽣成前端(Vue、后台代码)，代码⽣成器已完成90%以上的重复⼯作，只需要在提供的扩展类型中实现其他业务
前端vue页⾯表单下拉/多选框完成⾃动绑定数据源，不需要写任何代码，并⽀持扩展⾃定开发绑定。
后台已完成权限、菜单、JWT等内部功能
如果你没有做过webpack+vue⼯程化开发项⽬，可能会刚开始相当不适应，或者安装环境总是出问题，
但只要你熟悉开发流程后，你会发现采⽤Vue开发⽐Jquery爽太多了。上⼿项⽬需重点了解基础Vue语法，特别是了解组件、路由及import的使⽤
三、开发及依赖环境
VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选，没有redis的在appsetting.json中不⽤配置，默认使⽤内置IMemory)、
VsCode、Vue2.0（webpack、node.js，如果没有此环境⾃⾏搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui
四、项⽬运⾏
如果你没有前端环境，请先安装node
前端开发使⽤VsCode
1、使⽤cmd命令切换⾄前端Vue项⽬.../VOL.Vue路径下，执⾏npm install命令(只有从来没执⾏过此命令的才执⾏npm install)
2、运⾏后端项⽬：在后端项⽬路径.../VOL.WebApi/运⾏builder_run.bat端⼝设置的是9991，运⾏前先看appsettings.josn配置属性说明
3、运⾏前端项⽬：在前端Vue项⽬路径.../VOL.Vue/运⾏run.bat（每次启动会进⾏编译，这个时间可能会有点长）
4、输⼊localhost:8080访问
五、功能介绍
六、框架⽂档、代码⽣成器
Dome：132.232.2.109/
1、只读基础表单
整个只读的基础表单的所有前后端代码，全部由代码⽣成器⽣成，代码⽣成器中⼏乎不需要配置，并
⽀持并后端业务代码扩展，直接⽣成代码后，配置菜单权限即可
2、⾃动绑定下拉框数据表单
整个⾃动绑定下拉框数据表单的所有前后端代码，全部由代码⽣成器⽣成，并⽀持并后端业务代码扩展，在代码⽣成器中只需要指定数据源编号，页⾯加载时会根据编号⾃动加载数据源并绑定
3、启⽤图⽚⽀持、审核表单
整个启⽤图⽚⽀持、审核表单的所有前后端代码，全部由代码⽣成器⽣成，并⽀持并后端业务代码扩展，审核功能需要在菜单配置权限、代码⽣成器中勾选启⽤图⽚⽀持
4、⾼级查询
整个表单的所有前后端代码，全部由代码⽣成器⽣成，并⽀持并后端业务代码扩展，查询字段、类型(
下拉框、⽇期、TextArea等)、所在⾏与列都由代码⽣成器完成，不需要写任何代码
5、单表新建、编辑
单表新建、编辑所有前后端代码，全部由代码⽣成器⽣成，并⽀持并后端业务代码扩展，新建、编辑字段、类型(下拉框、⽇期、TextArea 等)、所在⾏与列、字段是否只读、标签显⽰的长度等都由代码⽣成器完成，不需要写任何代码
6、主从表新建、编辑
主从表新建、编辑所有前后端代码，全部由代码⽣成器⽣成，并⽀持并后端业务代码扩展，新建、编辑从表配置、字段、类型(下拉框、⽇期、TextArea等)、所在⾏与列、字段是否只读、标签显⽰的长度等都由代码⽣成器完成，不需要写任何代码
7、单列、多列Form表单
单列、多列Form表单，已封装成组件，并且⽀持组件扩展。可配置显⽰的列的数量、是否只读、列的数据类型(⽇期、下拉框、TextArea、列宽、⾃动绑定数据源、图⽚上传等)，这些只需要配置JSON格式即可使⽤
8、可配置的Table(⾃动/⼿动加载table数据、⾃动绑定数据源、编辑功能)
单列、多列Form表单，已封装成组件，并且⽀持组件扩展。可配置显⽰的列的数量、是否只读、列的数据类型(⽇期、下拉框、TextArea、列宽、⾃动绑定数据源、图⽚上传等)，这些只需要配置JSON格式即可使⽤
从后台加载数据、⾃动绑定数据
可编辑的table，⼿动绑定数据、⾃动绑定数据源
表单与table混合使⽤
9、excel导⼊
excel导⼊整个页⾯都由代码⽣成器⽣成，导⼊的字段、字段是否必填，下载模板也由代码⽣成器上配置(⾃⼰根据实际需要决定是否采⽤此⽅法)，导⼊时会验证是否为空与数据的合法性，逻辑校验⾃⼰实现扩展⽅法即可
10、H5开发
H5只是做了⼀个简单的Demo，如果你有H5开发经验，请忽略，如果你没有H5开发经验，132.232.2.109/app/guide
11、权限分配
⽬前只实现了对⽤户的⾓⾊的Action进⾏权限分配
12、菜单管理
默认8种权限，可⾃⾏定义其他权限(代码⽣成器完后，直接在菜单上配置url(url路径为⾃动⽣成前端的router->path，从此处复制过过即可))
13、个⼈中⼼
个⼈中⼼⽬前只开发了页⾯与修改密码，其他功能⾃⾏根据需要实现
14、前端、后台业务代码动态扩展
框架提供了前台后端扩展⽅法与属性，只需要根据⾃⼰的业务实现扩展业务。后台⼤部分都采⽤的委托扩展⽅法，这⾥只截了⼀张图前端数据加载事件的扩展⽅法，前后台完整扩展参考Demo：132.232.2.109/SellOrder
vue element admin
15、代码⽣成器
代码⽣成器提供了20多种可配置的属性，可灵活配置显⽰、查询、编辑、导⼊、导出、主从关系等功能点击看代码⽣成器⽂档
还有⾓⾊管理、⽇志管理、数据源管理、其他组件、后台代码等功能就不再介绍了。
七、总结
此框架由代码⽣成器完成了⼤部分⼯作能极⼤减少代码量，并⽀持前台端代码的扩展。
如果你对前后端分离开发的⽅式或H5开发有兴趣，那么希望此框架对能你有所帮助！
如果你觉得框架对你有⽤，帮忙点个星，⾮常感谢!
Demo地址：132.232.2.109 帐号：admin666密码：123456（本地超级管理员帐号：admin密码123456）
GitHub地址：github/cq-panda/Vue.NetCore.git
如果你需要Quartz.Net做定时任务管理，你可以试试这个：github/cq-panda/Quartz.NetUI
(站点与MySql部署在同⼀个1G1核1M带宽的服务Centos服务上，访问可能会出现延迟现象)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。