在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()