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

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

一、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界面视图。

 

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

有了上面的介绍，咱们已经知道须要生成那些文件了，所以在代码生成工具Database2Sharp上增长一个功能入口，编写好对应的模板代码，而后整合规则生成对应文件便可，这里进行相关使用功能的介绍。

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

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

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

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

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

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

咱们把根目录Src下的文件夹及相关文件复制到VS Code里面，能够默认路径，也能够把视图文件归类本身喜欢的目录里面（我这里调整路径menu/index为security/menu了），并调整路由文件，增长对应的视图入口

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

整合编译前端，启动后端ABP服务，并运行查看咱们刚刚建立的前端界面，以下所示。

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

生成界面，不管从总体布局，以及列表的展现，和各个功能按钮入口，都已经给咱们完善好了，咱们通常仍是须要进行调整一下。

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

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

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