在前面隨筆《循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理》簡單的介紹了一個結合ABP后端的登陸介面實作前端系統登陸的功能，本篇隨筆繼續深化這一主題，著重介紹基于ABP后端介面資訊，實作對前端界面的開發作業，
ABP（ASP.NET Boilerplate）框架主要是基于.net core 進行的后端Web API的開發，結合Swagger的管理界面我們可以看到發布的 API 的介面明細資訊，這樣前端技術人員可以很容易整合前端的API應用，Vue + Element的前端應用，是目前較為流行的前端技術整合，Vue提供了前端框架很好的支持，Element提供了非常不錯的界面組件封裝和處理，通過ABP后端API介面和前端Vue+Element的整合，可以很好實作前后端的分離處理，同時又極大提高各自開發程序，并利用最新、應用廣泛的技術來實作最好的技術應用，
1、ABP介面和前端對接處理
ABP框架主要還是基于領域驅動的理念來構建整個架構的，其中領域驅動包含的概念有 域物件Entities、倉儲物件Repositories、域服務介面層Domain Services、域事件Domain Events、應用服務介面Application Services、資料傳輸物件DTOs等，
ABP官方網站：http://www.aspnetboilerplate.com，從里面可以查看很詳細的案例和檔案說明，可以根據需要下載不同型別的基礎框架，
ABP GitHub原始碼地址：https://github.com/aspnetboilerplate，可以下載整個基礎的框架內容，以及相關的樣板案例代碼，
關于ABP框架使用，如果不知道，請自行補習一下我的隨筆：ABP框架使用，
整理后的ABP快速開發框架的架構圖示，如下圖所示（以字典模塊為例說明）
針對Web API介面呼叫的封裝，為了適應客戶端快速呼叫的目的，這個封裝作為一個獨立的封裝層，以方便各個模塊之間進行共同呼叫，
在基于VUE+Element 前端應用中，上圖的ApiCaller組件，其實就是我們封裝的API的JS類，同時也有相關的繼承封裝處理，類似C#中類的繼承關系了，
在JS里面引入了ES6的語法，JS函式就可以使用類的方式來實作各種基礎介面的封裝和子類的繼承關系了，
例如我們先定義好JS中常規的API封裝介面BaseApi類，然后定義子類有DIctType、DictData等業務類，那么這些類繼承BaseApi，就會具有相關的介面了，如下所示繼承關系，
這些API類的檔案視圖如下所示，
有了這些業務類的準備，那么我們和后端ABP的API介面對接，就很容易了，如下圖所示，
一般來說，我們頁面模塊可能會涉及到Store模塊，用來存盤對應的狀態資訊，也可能是直接訪問API模塊，實作資料的呼叫并展示，在頁面開發程序中，多數情況下，不需要Store模塊進行互動，一般只需要存盤對應頁面資料為全域資料狀態的情況下，才可能啟用Store模塊的處理，
通過WebProxy代理的處理，我們可以很容易在前端中實作跨域的處理，不同的路徑呼叫不同的域名地址API都可以，最終轉換為本地的API呼叫，這就是跨域的處理操作，
2、ABP介面資訊和前端界面處理
有了上面的一些知識準備，相信對ABP+Vue+Element的前端對接有了一個大概的認識了，
ABP+Swagger負責API介面的開發和公布，如下是API介面的管理界面，
進一步查看GetAll的API介面說明，我們可以看到對應的條件引數，如下所示，
這些是作為查詢條件的處理，用來給后端獲取對應的條件資訊，從而過濾回傳的資料記錄的，
那么我們前端界面也需要根據這些引數來構造查詢界面，我們可以通過部分條件進行處理即可，其中MaxResultCount和SkipCount是用于分頁定位的引數，
前端界面代碼如下所示，
主要就是構造一個條件查詢的表單如下所示，
其中定義了一個searchForm的屬性，那么我們可以了解下它的定義，
然后我們在查詢處理的函式getlist里面，就可以根據這些條件，以及分頁引數進行資料的請求查詢了，如下代碼所示，
getlist() { // 串列資料獲取
var param = { // 構造常規的分頁查詢條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 過濾條件
Name: this.searchForm.name,
Remark: this.searchForm.remark,
DictType_ID: this.searchForm.dictType_ID
};
// 獲取產品串列，系結到模型上，并修改分頁數量
this.listLoading = true
dictdata.GetAll(param).then(data =https://www.cnblogs.com/wuhuacong/p/> {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
其中的dictdata.GetAll就是呼叫API模塊里面的函式進行處理，是我們在視圖頁面類中匯入這些API類的定義的，
// 業務API物件 import dicttype from '@/api/dicttype' import dictdata from '@/api/dictdata'
我們對于DictDataApi的JS類定義如下所示，
其中JS類的BaseApi具有常規的增刪改查介面，如下所示，
其中list是串列的資料，pageinfo是分頁資訊，那么我們在前端的串列展示界面代碼如下所示，
<el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange" @row-dblclick="rowDbclick" > <el-table-column type="selection" width="55" /> <el-table-column label="字典名稱"> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-table-column> <el-table-column align="center" label="字典值"> <template slot-scope="scope"> {{ scope.row.value }} </template> </el-table-column> <el-table-column label="備注"> <template slot-scope="scope"> {{ scope.row.remark }} </template> </el-table-column> <el-table-column align="center" label="排序" width="80"> <template slot-scope="scope"> {{ scope.row.seq }} </template> </el-table-column> <el-table-column label="操作" width="140"> <template scope="scope"> <el-row> <el-tooltip effect="light" content="查看" placement="top-start"> <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" /> </el-tooltip> <el-tooltip effect="light" content="編輯" placement="top-start"> <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" /> </el-tooltip> <el-tooltip effect="light" content="洗掉" placement="top-start"> <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" /> </el-tooltip> </el-row> </template> </el-table-column> </el-table> <div class="block" style="height:70px;"> <el-pagination :current-page="pageinfo.pageindex" :page-size="pageinfo.pagesize" :total="pageinfo.total" :page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next" @size-change="sizeChange" @current-change="currentChange" /> </div>
這樣就可以簡單實作串列的查詢和展示了，
當然我們一般情況下，可能有一些串列用來進行資料過濾處理的，如這里的字典型別，可以通過樹串列的進行展示，從而可以友好的管理不同型別的字典資料，如下是整合了樹形串列的查詢處理程序，界面相對復雜一些，不過原理差不多，都是根據條件進行API資料的請求，然后展示在串列中即可，
完整的對字典管理界面的實作，
其中包括對字典大類的維護，以及對應字典大類的資料串列資料的添加處理，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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）--- 功能點管理及權限控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/11067.html
標籤：Html/Css
上一篇：頁面強行注入 jQuery