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

循序渐进VUE+Element 前端应用开发的系列文章中，前面介绍了系统各个功能的处理实现，本篇随笔从一个主线上介绍前后端开发的整合，让我们从ABP框架后端的查询接口的处理，前端API接口调用的封装，以及前端Element界面的整个调用过程进行一个完整的介绍。

我们前面介绍了Vue+Element前端的接口是调用后端的ABP框架发布的API接口服务，API接口服务通过Swagger公布对应的接口信息供我们前端开发使用，提供非常好的便利；而我们使用Vue+Element的前端框架，也是需要对后端接口API的调用进行一个简单的抽象基类封装，使得常规的增删改查等常规接口继承基类即可使用，而不需要累赘、重复的代码；另外Vue+Element通过页面进行获取数据的过程中，可以传入对应的API参数条件，如分页信息和查询条件信息，这样就基本满足了一个常规的查询获取数据列表的操作，获得的数据绑定在界面的Table控件上即可。

1、ABP框架的后端接口实现

 我根据项目之间的关系，整理了一个架构的图形，如下所示。

上图中，其中橘红色部分就是我们为各个层添加的类或者接口，分层上的序号是我们需要逐步处理的内容，我们来逐一解读一下各个类或者接口的内容。

ABP框架后端项目解决方案视图如下所示。

 

其中在Web.Host中整合了Swagger，ABP+Swagger负责API接口的发布展示管理，如下是API接口的管理界面。

进一步查看GetAll的API接口说明，我们可以看到对应的条件参数，如下所示。

这些是作为查询条件的处理，用来给后端获取对应的条件信息，从而过滤返回的数据记录的。

那么我们前端界面也需要根据这些参数来构造查询界面，我们可以通过部分条件进行处理即可，其中MaxResultCount和SkipCount是用于分页定位的参数。

在应用服务层接口类里面，重写CreateFilteredQuery可以设置GetAll的查询规则，重写ApplySorting则可以指定列表的排序顺序。

或者菜单模块的处理如下所示。

子类一般就是实现这些函数重写即可，因为在基类处理函数里面，已经整合了各自的调用逻辑，整合了条件处理、分页、排序等条件函数。

以下是基类CrudAppService的GetAll函数实现。

 

 

2、Vue+Element的前端框架API类的封装

 引入了前后端分离的Vue + Element 作为前端技术路线，那么前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

一般来说，我们页面模块可能会涉及到Store模块，用来存储对应的状态信息，也可能是直接访问API模块，实现数据的调用并展示。在页面开发过程中，多数情况下，不需要Store模块进行交互，一般只需要存储对应页面数据为全局数据状态的情况下，才可能启用Store模块的处理。

通过WebProxy代理的处理，我们可以很容易在前端中实现跨域的处理，不同的路径调用不同的域名地址API都可以，最终转换为本地的API调用，这就是跨域的处理操作。

 

前端根据ABP后端的接口进行前端JS端的类的封装处理，引入了ES6类的概念实现业务基类接口的统一封装，简化代码。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。

其中JS类的BaseApi具有常规的增删改查接口，如下所示。

 

3、Vue+Element的前端框架的页面查询和数据展示

主体框架界面采用的是基于后台配置的菜单动态生成，左侧是菜单，右边顶部是特定导航条和内容区。

系统主界面的开发，基本上都是标准的界面，在系统左侧放置系统菜单，右侧中间区域则放置列表展示内容，但是在系统菜单比较多的时候，就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表，这样通过树形列表的收缩折叠，就可以放置非常多的菜单功能了。

在ABP + Vue + Element 快速开发框架里面，我们BS前端的菜单和其CS的菜单是各自分开的，我们在后台的权限模块系统中维护菜单内容并分配给对应角色用户，在用户登录系统后，动态加载菜单展示，并通过菜单的配置信息，跳转到对应的路由上去进行页面展示处理。

菜单资源管理的列表界面界面如下所示

用户列表包括分页查询及列表展示、以及可以利用按钮进行新增、编辑、查看用户记录，或者对指定用户进行重置密码操作。

 

如对于菜单管理列表来说，我们前端定义了一个表单用于查询处理，可以根据显示名称和创建时间进行查询，如下代码所示。

 

前面我们介绍了前端API调用的封装类，如下结构所示。

 

 那么我们前端页面需要引入对应的菜单Api类，如下引用即可。

 

我们在页面模块的JS里面定义了data属性包括用于承载数据列表的list和分页信息pageinfo，如下代码所示。

 

 根据页面输入的条件和data里面存储的分页信息，那么我们就可以根据条件进行服务器端的数据请求了。

 

 上面构造了条件，然后根据条件，直接调用menuApi的类进行处理获取列表即可。

 

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

循序渐进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变量方式解决弹出编辑对话框界面无法触发更新的问题