使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍。我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息,以变化规律拥抱变化的内容。如对于服务端来说,后端代码中类的继承关系和特殊的接口名称规律,我们可以根据用户选中的表,获取表之间的字段和关系信息,生成各种DTO和接口类等代码文件;而前端界面来说,也是依照数据库的表信息、字段信息等内容,实现查询区域、查询列表、新增界面、编辑界面、查看界面、导入导出界面等内容进行相应的生成,并整合相关的界面事件关系,可以实现相关处理的按钮动作处理。本篇随笔介绍如何使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面。

1、ABP框架架构及前端代码生成分析

ABP框架是基于最新.net core 的技术方向,应用非常广泛的一个技术框架系列,它整合了很多.net core 领域相关开发技术,后端主要是发布Web API方式实现数据和前端的交互的,因此前端可以基于Web API基础上实现多种平台的对接,可以是常规的BS框架,如Vue+Element 前端路线,也可以是Winform/WPF的前端框架接入等。ABP框架的大概架构如下所示,顶端是展示层的各种前端的接入方式。

后端内容,我在前面一些随笔介绍比较多了,而且也在较早的时候,提供了ABP框架的快速代码生成《利用代码生成工具生成基于ABP框架的代码》,前端部分,Winform的代码生成也在前面随笔进行了使用介绍《ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程》,本篇随笔主要介绍ABP框架的Vue+Element前端界面的快速生成操作。

和ABP框架的Winform界面生成类似,在实现代码生成之前,我们需要有一套成熟的界面组织方式,也就是我们常规的界面布局处理,依照这些为基准,我们使用代码生成工具的模板引擎,编写对应的模板,然后结合代码工具内核提供的数据库信息,整合生成对应的代码文件夹和文件即可。

前面介绍过ABP后端框架,ABP+Swagger UI 负责API接口的开发和公布,如下是API接口的管理界面。

ABP框架后端接口的常规处理,如增删改查等接口命名都一致,参数方面也比较一致,因此给我们提供更好的API客户端类的封装提供更好的抽象模式,我们把常规的增删改查等常规接口封装在基类,子类只需要有继承关系即可,除非自定义接口函数,一般不需要额外增加前端的js代码。

如有DIctType、DictData等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

而视图是Vue +Element的组合体,一般为常规的表格列表,包含查询条件,以及整合增删改查的功能入口,如下视图界面所示。 

如果带有树列表的需求,最好能够整合树列表的生成处理界面,以及SplitPanel的风格区域管理。

 对于列表视图界面来说,我们一般整合新增、编辑、查看、导入导出等常规界面在一起,通过不同的弹出对话框处理即可实现各种业务处理的界面入口。

基于上面的介绍,我们只需要提供两个部分,一个是Api类的继承子类,一个是视图界面的内容,整合多个对话框和对应按钮操作入口的处理界面,如下所示包含Api封装类文件和Vue + Element界面视图。

 

2、 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

有了上面的介绍,我们已经知道需要生成那些文件了,因此在代码生成工具Database2Sharp上增加一个功能入口,编写好对应的模板代码,然后整合规则生成对应文件即可,这里进行相关使用功能的介绍。

首先,我们打开代码生成工具,展开对应数据库的表信息,如下界面所示。

然后在表或者数据库上右键 出现菜单,选择【代码生成】【ABP的Vue+Element界面代码】,如下所示。

接着在出来的对话框上选择对应数据库和表进行生成,一步步执行即可。

 在最后的界面上,会出来选择生成代码的表,以及需要选择对应的布局,包括一个是普通查询列表的界面,以及一个左侧带有树形列表的界面两个布局,我们根据需要选择即可。

 生成的文件里面,包括有JS文件

以及对应目录下的视图文件,后缀名为vue

我们把根目录Src下的文件夹及相关文件复制到VS Code里面,可以默认路径,也可以把视图文件归类自己喜欢的目录里面(我这里调整路径menu/index为security/menu了),并调整路由文件,增加对应的视图入口

前端会根据用户包含的可访问菜单列表,自动过滤对应的路由,实现我们菜单入口访问对应路由了。 

整合编译前端,启动后端ABP服务,并运行查看我们刚刚创建的前端界面,如下所示。

原始的查看明细界面如下所示

生成界面,无论从整体布局,以及列表的展示,和各个功能按钮入口,都已经给我们完善好了,我们一般还是需要进行调整一下。

简化下界面查询条件,以及整理一下列表展示内容,得到调整界面如下所示。

调整后的查看明细界面如下所示。

 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面,能够是我们提高代码的开发效率,以及降低出错的机会,同时可以很好的统一整套界面的界面样式和做法,事半功倍。

 

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示 

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理 

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍 

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理 

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理 

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理 

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理 

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理 

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理 

使用代码生成工具快速开发ABP框架项目 

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理 

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题 

 

主要研究技术:代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
专注于Winform开发框架/混合式开发框架Web开发框架Bootstrap开发框架微信门户开发框架的研究及应用
  转载请注明出处:
撰写人:伍华聪  http://www.iqidi.com 
    

posted on 2020-09-09 17:09  伍华聪  阅读(6034)  评论(14编辑  收藏  举报

导航