循序漸進VUE+Element 前端應用開發(19）— 後端查詢接口和Vue前端的整合
- 2020 年 8 月 24 日
- 筆記
- 循序漸進VUE+Element
循序漸進VUE+Element 前端應用開發的系列文章中，前面介紹了系統各個功能的處理實現，本篇隨筆從一個主線上介紹前後端開發的整合，讓我們從ABP框架後端的查詢接口的處理，前端API接口調用的封裝，以及前端Element界面的整個調用過程進行一個完整的介紹。
我們前面介紹了Vue+Element前端的接口是調用後端的ABP框架發佈的API接口服務，API接口服務通過Swagger公布對應的接口信息供我們前端開發使用，提供非常好的便利；而我們使用Vue+Element的前端框架，也是需要對後端接口API的調用進行一個簡單的抽象基類封裝，使得常規的增刪改查等常規接口繼承基類即可使用，而不需要累贅、重複的代碼；另外Vue+Element通過頁面進行獲取數據的過程中，可以傳入對應的API參數條件，如分頁信息和查詢條件信息，這樣就基本滿足了一個常規的查詢獲取數據列表的操作，獲得的數據綁定在界面的Table控件上即可。
1、ABP框架的後端接口實現
我根據項目之間的關係，整理了一個架構的圖形，如下所示。
上圖中，其中橘紅色部分就是我們為各個層添加的類或者接口，分層上的序號是我們需要逐步處理的內容，我們來逐一解讀一下各個類或者接口的內容。
ABP框架後端項目解決方案視圖如下所示。
其中在Web.Host中整合了Swagger，ABP+Swagger負責API接口的發佈展示管理，如下是API接口的管理界面。
進一步查看GetAll的API接口說明，我們可以看到對應的條件參數，如下所示。
這些是作為查詢條件的處理，用來給後端獲取對應的條件信息，從而過濾返回的數據記錄的。
那麼我們前端界面也需要根據這些參數來構造查詢界面，我們可以通過部分條件進行處理即可，其中MaxResultCount和SkipCount是用於分頁定位的參數。
在應用服務層接口類裏面，重寫CreateFilteredQuery可以設置GetAll的查詢規則，重寫ApplySorting則可以指定列表的排序順序。
或者菜單模塊的處理如下所示。
2、Vue+Element的前端框架API類的封裝
引入了前後端分離的Vue + Element 作為前端技術路線，那麼前後端的邊界則非常清晰，前端可以在通過網絡獲取對應的JSON就可以構建前端的應用了。
一般來說，我們頁面模塊可能會涉及到Store模塊，用來存儲對應的狀態信息，也可能是直接訪問API模塊，實現數據的調用並展示。在頁面開發過程中，多數情況下，不需要Store模塊進行交互，一般只需要存儲對應頁面數據為全局數據狀態的情況下，才可能啟用Store模塊的處理。
通過WebProxy代理的處理，我們可以很容易在前端中實現跨域的處理，不同的路徑調用不同的域名地址API都可以，最終轉換為本地的API調用，這就是跨域的處理操作。
前端根據ABP後端的接口進行前端JS端的類的封裝處理，引入了ES6類的概念實現業務基類接口的統一封裝，簡化代碼。
權限模塊我們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登錄日誌等業務類，那麼這些類繼承BaseApi，就會具有相關的接口了，如下所示繼承關係。
其中JS類的BaseApi具有常規的增刪改查接口，如下所示。
3、Vue+Element的前端框架的頁面查詢和數據展示
主體框架界面採用的是基於後台配置的菜單動態生成，左側是菜單，右邊頂部是特定導航條和內容區。
系統主界面的開發，基本上都是標準的界面，在系統左側放置系統菜單，右側中間區域則放置列表展示內容，但是在系統菜單比較多的時候，就需要把菜單分為幾級處理。系統菜單在左側放置一個自定義菜單組件列表，這樣通過樹形列表的收縮摺疊，就可以放置非常多的菜單功能了。
在ABP + Vue + Element 快速開發框架裏面，我們BS前端的菜單和其CS的菜單是各自分開的，我們在後台的權限模塊系統中維護菜單內容並分配給對應角色用戶，在用戶登錄系統後，動態加載菜單展示，並通過菜單的配置信息，跳轉到對應的路由上去進行頁面展示處理。
菜單資源管理的列表界面界面如下所示
用戶列表包括分頁查詢及列表展示、以及可以利用按鈕進行新增、編輯、查看用戶記錄，或者對指定用戶進行重置密碼操作。
如對於菜單管理列表來說，我們前端定義了一個表單用於查詢處理，可以根據顯示名稱和創建時間進行查詢，如下代碼所示。
前面我們介紹了前端API調用的封裝類，如下結構所示。
那麼我們前端頁面需要引入對應的菜單Api類，如下引用即可。
我們在頁面模塊的JS裏面定義了data屬性包括用於承載數據列表的list和分頁信息pageinfo，如下代碼所示。
根據頁面輸入的條件和data裏面存儲的分頁信息，那麼我們就可以根據條件進行服務器端的數據請求了。
上面構造了條件，然後根據條件，直接調用menuApi的類進行處理獲取列表即可。
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進VUE+Element 前端應用開發(1）— 開發環境的準備工作
循序漸進VUE+Element 前端應用開發(2）— Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）— 動態菜單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）— 獲取後端數據及產品信息頁面的處理
循序漸進VUE+Element 前端應用開發(5）— 表格列表頁面的查詢，列表展示和字段轉義處理
循序漸進VUE+Element 前端應用開發(6）— 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）— 介紹一些常規的JS處理函數
循序漸進VUE+Element 前端應用開發(8）— 樹列表組件的使用
循序漸進VUE+Element 前端應用開發(9）— 界面語言國際化的處理
循序漸進VUE+Element 前端應用開發(10）— 基於vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）— 圖標的維護和使用
循序漸進VUE+Element 前端應用開發(12）— 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）— 前端API接口的封裝處理
循序漸進VUE+Element 前端應用開發(14）— 根據ABP後端接口實現前端界面展示
循序漸進VUE+Element 前端應用開發(15）— 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）— 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）— 菜單管理
循序漸進VUE+Element 前端應用開發(18）— 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）— 後端查詢接口和Vue前端的整合
