其他分享
首页 > 其他分享> > Vue+ElementUI+.netcore前后端分离框架开发项目实战

Vue+ElementUI+.netcore前后端分离框架开发项目实战

作者:互联网

Vue+ElementUI+.netcore前后端分离框架开发项目实战

 

原文:https://blog.csdn.net/vM199zkg3Y7150u5/article/details/102550228

框架采用.NET Core + Vue前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可上手开发

 

一、框架基础功能已构建完成,可直接上手开发功能

 

 

二、框架特点

 

 

如果你没有做过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、输入http://localhost:8080访问

 

五、功能介绍

 

640?wx_fmt=png

 

六、框架文档、代码生成器

 

Dome:http://132.232.2.109/

 

640?wx_fmt=png

 

1、只读基础表单

 

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

 

640?wx_fmt=png

 

2、自动绑定下拉框数据表单

 

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

 

640?wx_fmt=png

 

3、启用图片支持、审核表单

 

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

 

640?wx_fmt=png

 

4、高级查询

 

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

 

640?wx_fmt=png

 

5、单表新建、编辑

 

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

 

640?wx_fmt=png

 

6、主从表新建、编辑

 

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

 

640?wx_fmt=png

 

7、单列、多列Form表单

 

单列、多列Form表单,已封装成组件,并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等), 这些只需要配置JSON格式即可使用

 

640?wx_fmt=png

 

8、可配置的Table(自动/手动加载table数据、自动绑定数据源、编辑功能)

 

单列、多列Form表单,已封装成组件,并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等), 这些只需要配置JSON格式即可使用

 

从后台加载数据、自动绑定数据

 

640?wx_fmt=png

 

可编辑的table,手动绑定数据、自动绑定数据源

 

640?wx_fmt=png

 

表单与table混合使用

 

640?wx_fmt=png

 

9、excel导入

 

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

 

640?wx_fmt=png

 

10、H5开发

 

H5只是做了一个简单的Demo,如果你有H5开发经验,请忽略,如果你没有H5开发经验,http://132.232.2.109/app/guide

 

640?wx_fmt=jpeg

 

11、权限分配

 

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

 

640?wx_fmt=png

 

12、菜单管理

 

 

默认8种权限,可自行定义其他权限(代码生成器完后,直接在菜单上配置url(url路径为自动生成前端的router->path,从此处复制过过即可))

 

640?wx_fmt=png

 

13、个人中心

 

个人中心目前只开发了页面与修改密码,其他功能自行根据需要实现

 

640?wx_fmt=png

 

14、前端、后台业务代码动态扩展

 

框架提供了前台后端扩展方法与属性,只需要根据自己的业务实现扩展业务。后台大部分都采用的委托扩展方法,这里只截了一张图前端数据加载事件的扩展方法,前后台完整扩展参考Demo:http://132.232.2.109/SellOrder

 

640?wx_fmt=png

 

15、代码生成器

 

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

 

640?wx_fmt=png

 

 

还有角色管理、日志管理、数据源管理、其他组件、后台代码等功能就不再介绍了。

 

七、总结

 

此框架由代码生成器完成了大部分工作能极大减少代码量,并支持前台端代码的扩展。

 

如果你对前后端分离开发的方式或H5开发有兴趣,那么希望此框架对能你有所帮助!

 

如果你觉得框架对你有用,帮忙点个星,非常感谢!

 

  分类: ASP.NET CORE

标签:代码生成,Vue,netcore,代码,扩展,+.,表单,开发
来源: https://www.cnblogs.com/zxtceq/p/14112067.html