基于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的前端的更多相关文章

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

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  2. 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 ...

  3. 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解,有效下载期为10.5-10.10关闭)

    卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│  1.txt│  c语言经典案例效果图示.doc│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一 ...

  4. 在第一段ionic示例的基础上增加底部导航

    demo2.html <!DOCTYPE html> <html ng-app="app"> <head> <meta charset=& ...

  5. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  6. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  7. 如何基于Winform开发框架或混合框架基础上进行项目的快速开发

    在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...

  8. 《玩转Bootstrap(基础)》笔记

    基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. VUE+Element 前端应用开发框架功能介绍

    前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...

随机推荐

  1. HashMap扩容后是否需要rehash?

    需要,因为要重新计算旧数组元素在新数组地址.HashMap在JDK1.8中的rehash算法(也就是扩容后重新为里面的键值对寻址的算法)进行优化.hash寻址算法是 index =(n - 1) &a ...

  2. 生成UUID的代码

    代码: String reqId = UUID.randomUUID().toString().replace("-", "");

  3. IDEA总结

    1. 什么是idea? idea是Java开发软件 2. IDEA下载 https://www.jetbrains.com/idea/download/download-thanks.html?pla ...

  4. mysql主从复制,主主复制,级联复制,半同步复制

    -------------------------------------------------------------------------------主从复制----------------- ...

  5. SpringBoot(三):SpringBoot热部署插件

    SpringBoot热部署插件 在实际开发中,我们修改了某些代码逻辑功能或页面都需要重启应用,这无形中降低了开发效率!热部署是指当我们修改代码后,服务能自动启动加载新修改的内容,这样大大提高了我们开发 ...

  6. Python2021哔哩哔哩视频爬取

    一.找到想要爬取的视频,进入网页源代码 在网页源代码里面可以很容易的找到视频各种清晰度的源地址 二.对地址发送请求 如果对视频源地址发送get请求会返回403 通过按F12进入开发者工具分析 发现并不 ...

  7. jwt以及如何使用jwt实现登录

    目录 jwt的使用和使用jwt进行登录 什么是jwt jwt的组成 为什么选择jwt session的缺点 jwt的优点 一个jwt的工具类 将jwt和登录进行结合 axios方式将jwt放在head ...

  8. The League of Sequence Designers Gym - 102460E

    题目链接:https://vjudge.net/problem/Gym-102460E 思路:求: 题目当中给了一段伪代码算法,仔细一看发现它是不会记录负数情况,所以与正确答案会有误差,现在题目给定K ...

  9. 2019第十届蓝桥杯省赛及国赛个人总结(java-B组)

    省赛: 今年省赛的题目比18年简单的多,基本都是暴力枚举.BFS之类.还记得去年在山师考蓝桥杯,我这种辣鸡连题目都没看懂.本以为蓝桥会变得越来越难,没想到今年就被打脸了.今年省赛后面三个编程大题一个没 ...

  10. DevExpress主要常用控件

    DevExpress主要常用控件说明:1. TestEdit: 一个单行文本编辑器. 常用属性:Name:该控件的名称.Text:该控件中的内容.Enabled:该控件是否激活. Visible:控件 ...