1）Web API后端的架构设计
这个是属于前端、后端完全分离的架构设计，后端采用基于Asp.net的Web API技术，并提供按域来管理API的分类，Web API如下架构所示。
通过上面的架构设计，可以看出，底层BLL、DAL、Entity、IDAL、公用类库等分层都是完全通用的，不同的是，我们后端只是提供Web API的接口服务给前端，这个和我们的《ABP框架使用》的理念一致，前后端分离。 为了更好的进行后端Web API控制器的相关方法的封装处理，我们把一些常规的接口处理放在BaseApiController里面，而把基于业务表的操作接口放在BusinessController里面定义，如下所示。
而Vue&Element的前端的架构设计，也借鉴了我们ABP框架的前端管理部分，Vue&Element的前端的架构设计如下所示。
引入了前后端分离的Vue + Element 作为前端技术路线，那么前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端的应用了。 一般来说，我们页面模块可能会涉及到Store模块，用来存储对应的状态信息，也可能是直接访问API模块，实现数据的调用并展示。在页面开发过程中，多数情况下，不需要Store模块进行交互，一般只需要存储对应页面数据为全局数据状态的情况下，才可能启用Store模块的处理。通过WebProxy代理的处理，我们可以很容易在前端中实现跨域的处理，不同的路径调用不同的域名地址API都可以，最终转换为本地的API调用，这就是跨域的处理操作。
前端根据ABP后端的接口进行前端JS端的类的封装处理，引入了ES6类的概念实现业务基类接口的统一封装，简化代码。 权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、操作日志、登录日志等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。
主体框架界面采用的是基于后台配置的菜单动态生成，左侧是菜单，右边顶部是特定导航条和内容区，这个和我们ABP框架的前端界面是一致的。 系统主界面的开发，基本上都是标准的界面，在系统左侧放置系统菜单，右侧中间区域则放置列表展示内容，但是在系统菜单比较多的时候，就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表，这样通过树形列表的收缩折叠，就可以放置非常多的菜单功能了。
用户管理界面，沿袭Bootstrap框架的布局进行管理，通过用户机构方式，快速展示用户分页列表，如下界面所示。
机构管理界面如下所示。
角色管理界面如下所示。
其角色的编辑界面如下所示，包括了基础信息、用户、菜单、权限等项目。
整个系统的菜单，既可以通过默认Mock的初始菜单，也可以通过后端API获得的菜单资源，动态在界面上进行展示，系统界面左侧的菜单是动态获取并展示出来的，结合路由的判断可以限制用户访问的菜单权限。菜单管理界面如下所示。
菜单资源在角色管理中分配给具体角色，即可实现对菜单的动态控制管理了。 前端的界面管理，依旧可以通过分拆模块的方式，完成更加方便的组合处理
利用模块化的处理方式，我们可以把界面部分内容作为一个组件进行封装处理，如在权限管理中，我们定义了一部分重用的组件界面，如下所示。
定义好各种界面的自定义组件后，在主界面中进行Import导入使用即可，非常方便重用。