在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、Access等常规数据库,可通过配置进行自由切换,使用Enterprise Library模块进行数据访问的控制的。Bootstrap开发框架的页面以及后台代码,通过代码生成工具Database2Sharp进行快速开发,实现整体性开发的最大效率提高。
Bootstrap开发框架已经应用在很多客户的BS架构的软件管理系统中,基于底层代码的重用,应客户的需要,我们在这个基础上扩展增加了Vue&Element的前端,由于Vue&Element的前端需要采用Web API的接口,我们在这个基础上借鉴了ABP框架的Web API接口处理及前端管理界面的内容,在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端。
1、Bootstrap框架的架构及增加Web API + Vue&Element前端的处理
Bootstrap框架架构:
在之前Bootstrap开发框架的架构如下所示,其UI层是各种应用功能模块,而底层是和Winform框架、混合框架公用的BLL业务逻辑层等分层,并通过实体层实现数据的传递处理。
数据访问层通过微软企业库,较好统一了数据处理的模型,很容易实现了 Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、达梦、Access等常规数据库的支持操作。
控制器设计:
Bootstrap开发框架沿用了我的《Winform开发框架》和《基于EasyUI的Web框架》的很多架构设计思路和特点,对Controller进行了封装。使得控制器能够获得很好的继承关系,并能以更少的代码,更高效的开发效率,实现Web项目的开发工作,整个控制器的设计思路如下所示。
增加WebApi+Vue&Element前端后的架构设计:
Web API后端的架构设计:
这个是属于前端、后端完全分离的架构设计,后端采用基于Asp.net的Web API技术,并提供按域来管理API的分类,Web API如下架构所示。
通过上面的架构设计,可以看出,底层BLL、DAL、Entity、IDAL、公用类库等分层都是完全通用的,不同的是,我们后端只是提供Web API的接口服务给前端,这个和我们的《ABP框架使用》的理念一致,前后端分离。
为了更好的进行后端Web API控制器的相关方法的封装处理,我们把一些常规的接口处理放在BaseApiController里面,而把基于业务表的操作接口放在BusinessController里面定义,如下所示。
在BaseApiController里面,我们使用了结果封装和异常处理的过滤器统一处理。
/// <summary>
/// 所有接口基类
/// </summary>
[ExceptionHandling]
[WrapResult]
public class BaseApiController : ApiController
其中ExceptionHandling 和WrapResult的过滤器处理,可以参考我的随笔《利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理》进行详细了解。
而业务类的接口通用封装,则放在了BusinessController控制器里面,其中使用了泛型定义,包括实体类,业务操作类,分页条件类等内容作为约束参数,如下所示。
/// <summary>
/// 本控制器基类专门为访问数据业务对象而设的基类
/// </summary>
/// <typeparam name="B">业务对象类型</typeparam>
/// <typeparam name="T">实体类类型</typeparam>
[ApiAuthorize]
public class BusinessController<B, T, TGetAllInput> : BaseApiController
where B : class
where TGetAllInput : IPagedAndSortedResultRequest
where T : BaseEntity, new()
通过Web API接口返回结果的统一封装处理,我们定义了相关的格式如下所示。
其中result是返回对应的对象信息,如果没有则返回null.
如果是分页查询返回结果集合,其结果如下所示。
展开单条记录明细如下所示。
Vue&Element的前端的架构设计:
而Vue&Element的前端的架构设计,也借鉴了我们ABP框架的前端管理部分,详细也可以了解下我的相关随笔《循序渐进VUE+Element》。
Vue&Element的前端的架构设计如下所示。
引入了前后端分离的Vue + Element 作为前端技术路线,那么前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了。
一般来说,我们页面模块可能会涉及到Store模块,用来存储对应的状态信息,也可能是直接访问API模块,实现数据的调用并展示。在页面开发过程中,多数情况下,不需要Store模块进行交互,一般只需要存储对应页面数据为全局数据状态的情况下,才可能启用Store模块的处理。
通过WebProxy代理的处理,我们可以很容易在前端中实现跨域的处理,不同的路径调用不同的域名地址API都可以,最终转换为本地的API调用,这就是跨域的处理操作。
前端根据ABP后端的接口进行前端JS端的类的封装处理,引入了ES6类的概念实现业务基类接口的统一封装,简化代码。
权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、操作日志、登录日志等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。
2、WebApi+Vue&Element的前端界面展示
主体框架界面采用的是基于后台配置的菜单动态生成,左侧是菜单,右边顶部是特定导航条和内容区,这个和我们ABP框架的前端界面是一致的。
系统主界面的开发,基本上都是标准的界面,在系统左侧放置系统菜单,右侧中间区域则放置列表展示内容,但是在系统菜单比较多的时候,就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表,这样通过树形列表的收缩折叠,就可以放置非常多的菜单功能了。
用户管理界面,沿袭Bootstrap框架的布局进行管理,通过用户机构方式,快速展示用户分页列表,如下界面所示。
机构管理界面如下所示。
角色管理界面如下所示。
其角色的编辑界面如下所示,包括了基础信息、用户、菜单、权限等项目。
整个系统的菜单,既可以通过默认Mock的初始菜单,也可以通过后端API获得的菜单资源,动态在界面上进行展示,系统界面左侧的菜单是动态获取并展示出来的,结合路由的判断可以限制用户访问的菜单权限。
菜单管理界面如下所示。
菜单资源在角色管理中分配给具体角色,即可实现对菜单的动态控制管理了。
前端的界面管理,依旧可以通过分拆模块的方式,完成更加方便的组合处理
利用模块化的处理方式,我们可以把界面部分内容作为一个组件进行封装处理,如在权限管理中,我们定义了一部分重用的组件界面,如下所示。
定义好各种界面的自定义组件后,在主界面中进行Import导入使用即可,非常方便重用。
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端的更多相关文章
- 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...
- ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API
本篇尝试在现有的ASP.NET MVC 4 项目上增加使用ASP.NET Web API. 新建项目,选择"ASP.NET MVC 4 Web应用程序". 选择"基本&q ...
- 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解,有效下载期为10.5-10.10关闭)
卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│ 1.txt│ c语言经典案例效果图示.doc│ ├─1传智播客_尹成_C语言从菜鸟到高手_第一 ...
- 在第一段ionic示例的基础上增加底部导航
demo2.html <!DOCTYPE html> <html ng-app="app"> <head> <meta charset=& ...
- 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
- 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...
- 如何基于Winform开发框架或混合框架基础上进行项目的快速开发
在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...
- 《玩转Bootstrap(基础)》笔记
基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- VUE+Element 前端应用开发框架功能介绍
前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...
随机推荐
- HashMap扩容后是否需要rehash?
需要,因为要重新计算旧数组元素在新数组地址.HashMap在JDK1.8中的rehash算法(也就是扩容后重新为里面的键值对寻址的算法)进行优化.hash寻址算法是 index =(n - 1) &a ...
- 生成UUID的代码
代码: String reqId = UUID.randomUUID().toString().replace("-", "");
- IDEA总结
1. 什么是idea? idea是Java开发软件 2. IDEA下载 https://www.jetbrains.com/idea/download/download-thanks.html?pla ...
- mysql主从复制,主主复制,级联复制,半同步复制
-------------------------------------------------------------------------------主从复制----------------- ...
- SpringBoot(三):SpringBoot热部署插件
SpringBoot热部署插件 在实际开发中,我们修改了某些代码逻辑功能或页面都需要重启应用,这无形中降低了开发效率!热部署是指当我们修改代码后,服务能自动启动加载新修改的内容,这样大大提高了我们开发 ...
- Python2021哔哩哔哩视频爬取
一.找到想要爬取的视频,进入网页源代码 在网页源代码里面可以很容易的找到视频各种清晰度的源地址 二.对地址发送请求 如果对视频源地址发送get请求会返回403 通过按F12进入开发者工具分析 发现并不 ...
- jwt以及如何使用jwt实现登录
目录 jwt的使用和使用jwt进行登录 什么是jwt jwt的组成 为什么选择jwt session的缺点 jwt的优点 一个jwt的工具类 将jwt和登录进行结合 axios方式将jwt放在head ...
- The League of Sequence Designers Gym - 102460E
题目链接:https://vjudge.net/problem/Gym-102460E 思路:求: 题目当中给了一段伪代码算法,仔细一看发现它是不会记录负数情况,所以与正确答案会有误差,现在题目给定K ...
- 2019第十届蓝桥杯省赛及国赛个人总结(java-B组)
省赛: 今年省赛的题目比18年简单的多,基本都是暴力枚举.BFS之类.还记得去年在山师考蓝桥杯,我这种辣鸡连题目都没看懂.本以为蓝桥会变得越来越难,没想到今年就被打脸了.今年省赛后面三个编程大题一个没 ...
- DevExpress主要常用控件
DevExpress主要常用控件说明:1. TestEdit: 一个单行文本编辑器. 常用属性:Name:该控件的名称.Text:该控件中的内容.Enabled:该控件是否激活. Visible:控件 ...