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