按部就班VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

 

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

 引入了先后端分离的Vue + Element 做为前端技术路线，那么先后端的边界则很是清晰，前端能够在经过网络获取对应的JSON就能够构建前端的应用了。

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

经过WebProxy代理的处理，咱们能够很容易在前端中实现跨域的处理，不一样的路径调用不一样的域名地址API均可以，最终转换为本地的API调用，这就是跨域的处理操做。

 

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

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

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

 

三、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 前端应用开发(19）--- 后端查询接口和Vue前端的整合