循序渐进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则可以指定列表的排序顺序。
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 前端应用开发(19)--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合的更多相关文章
- 【vue】vue +element 搭建及开发中项目中,遇到的错误提示
1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...
- ajax开发模拟后端数据接口
在做前端开发的时候,特别是一些业务逻辑集中在前端的开发中.我们经常需要自己来模拟获取到后台接口的数据.为什么要模拟?可能后台接口还没有开发完成,可能后台还没有数据返回,可能...等等原因.曾经,我也尝 ...
- springboot+vue+element:echarts开发遇见问题---后端sql(三)
<select id="getSumRequestRankingCount" parameterType="java.lang.String" resul ...
- springboot+vue+element:echarts开发遇见问题---vue前端(二)
<template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...
- 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理
在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...
- VUE+Element 前端应用开发框架功能介绍
前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...
随机推荐
- 第一部分_Mac技巧
原文是"池建强"的微信文章,公众号为"MacTalk" 第一天 直接在终端里输入 $ say "英文单词",Mac就会拼读该单词 第二天 使 ...
- npm跟cnpm的区别
什么是npm? npm(node package manager)是node的包管理工具,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常. 什么是cnpm? 如果npm的服务器在中国 ...
- Python while 循环中使用 else 语句
Python while 循环中使用 else 语句: else:表示 while 中的语句正常执行完,然后执行 else 语句的部分. 示例: # while 判断条件: # 一行语句 或 多行语句 ...
- pandas_时间序列和常用操作
# 时间序列和常用操作 import pandas as pd # 每隔五天--5D pd.date_range(start = '',end = '',freq = '5D') ''' Dateti ...
- Python os.chown() 方法
概述 os.chown() 方法用于更改文件所有者,如果不修改可以设置为 -1, 你需要超级用户权限来执行权限修改操作.高佣联盟 www.cgewang.com 只支持在 Unix 下使用. 语法 c ...
- Python Tuple(元组) len()方法
描述 Python 元组 len() 函数计算元组元素个数.高佣联盟 www.cgewang.com 语法 len()方法语法: len(tuple) 参数 tuple -- 要计算的元组. 返回值 ...
- 2020牛客暑期多校训练营 第二场 I Interval 最大流 最小割 平面图对偶图转最短路
LINK:Interval 赛时连题目都没看. 观察n的范围不大不小 而且建图明显 考虑跑最大流最小割. 图有点稠密dinic不太行. 一个常见的trick就是对偶图转最短路. 建图有点复杂 不过建完 ...
- Xposed原理分析
目录 安卓系统启动 什么zygote? 安卓应用运行? Xposed介绍 Xposed构成 Xposed初始化大体工作流程 源码分析 初始化 app_main#main app_main#initia ...
- 7月15日考试 题解(链表+状压DP+思维题)
前言:蒟蒻太弱了,全打的暴力QAQ. --------------------- T1 小Z的求和 题目大意:求$\sum\limits_{i=1}^n \sum\limits_{j=i}^n kth ...
- CSS样式大全(网络收集整理)
CSS样式大全(网络收集整理 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...