按部就班VUE+Element 前端應用開發(19）--- 後端查詢接口和Vue前端的整合

按部就班VUE+Element 前端應用開發的系列文章中，前面介紹了系統各個功能的處理實現，本篇隨筆從一個主線上介紹先後端開發的整合，讓咱們從ABP框架後端的查詢接口的處理，前端API接口調用的封裝，以及前端Element界面的整個調用過程進行一個完整的介紹。

咱們前面介紹了Vue+Element前端的接口是調用後端的ABP框架發佈的API接口服務，API接口服務經過Swagger公佈對應的接口信息供咱們前端開發使用，提供很是好的便利；而咱們使用Vue+Element的前端框架，也是須要對後端接口API的調用進行一個簡單的抽象基類封裝，使得常規的增刪改查等常規接口繼承基類便可使用，而不須要累贅、重複的代碼；另外Vue+Element經過頁面進行獲取數據的過程當中，能夠傳入對應的API參數條件，如分頁信息和查詢條件信息，這樣就基本知足了一個常規的查詢獲取數據列表的操做，得到的數據綁定在界面的Table控件上便可。

一、ABP框架的後端接口實現

 我根據項目之間的關係，整理了一個架構的圖形，以下所示。

上圖中，其中橘紅色部分就是咱們爲各個層添加的類或者接口，分層上的序號是咱們須要逐步處理的內容，咱們來逐一解讀一下各個類或者接口的內容。

ABP框架後端項目解決方案視圖以下所示。

 

其中在Web.Host中整合了Swagger，ABP+Swagger負責API接口的發佈展現管理，以下是API接口的管理界面。

進一步查看GetAll的API接口說明，咱們能夠看到對應的條件參數，以下所示。

這些是做爲查詢條件的處理，用來給後端獲取對應的條件信息，從而過濾返回的數據記錄的。

那麼咱們前端界面也須要根據這些參數來構造查詢界面，咱們能夠經過部分條件進行處理便可，其中MaxResultCount和SkipCount是用於分頁定位的參數。

在應用服務層接口類裏面，重寫CreateFilteredQuery能夠設置GetAll的查詢規則，重寫ApplySorting則能夠指定列表的排序順序。

或者菜單模塊的處理以下所示。

子類通常就是實現這些函數重寫便可，由於在基類處理函數裏面，已經整合了各自的調用邏輯，整合了條件處理、分頁、排序等條件函數。

如下是基類CrudAppService的GetAll函數實現。

 

 

二、Vue+Element的前端框架API類的封裝

 引入了先後端分離的Vue + Element 做爲前端技術路線，那麼先後端的邊界則很是清晰，前端能夠在經過網絡獲取對應的JSON就能夠構建前端的應用了。

通常來講，咱們頁面模塊可能會涉及到Store模塊，用來存儲對應的狀態信息，也多是直接訪問API模塊，實現數據的調用並展現。在頁面開發過程當中，多數狀況下，不須要Store模塊進行交互，通常只須要存儲對應頁面數據爲全局數據狀態的狀況下，纔可能啓用Store模塊的處理。

經過WebProxy代理的處理，咱們能夠很容易在前端中實現跨域的處理，不一樣的路徑調用不一樣的域名地址API均可以，最終轉換爲本地的API調用，這就是跨域的處理操做。

 

前端根據ABP後端的接口進行前端JS端的類的封裝處理，引入了ES6類的概念實現業務基類接口的統一封裝，簡化代碼。

權限模塊咱們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登陸日誌等業務類，那麼這些類繼承BaseApi，就會具備相關的接口了，以下所示繼承關係。

其中JS類的BaseApi具備常規的增刪改查接口，以下所示。

 

三、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前端的整合