循序漸進VUE+Element 前端應用開發(5)--- 表格…

2020-07-02 16:00:38來源:博客園 閱讀 ()

容器云強勢上線!快速搭建集群,上萬Linux鏡像隨意使用

循序漸進VUE+Element 前端應用開發(14)--- 根據ABP后端接口實現前端界面展示

在前面隨筆《循序漸進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的整合,可以很好實現前后端的分離處理,同時又極大提高各自開發過程,并利用最新、應用廣泛的技術來實現最好的技術應用。

在前面隨筆《循序漸進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 => {
        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 前端應用開發(11)--- 圖標的維護和使用

循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13)--- 前端API接口的封裝處理

 


原文鏈接:https://www.cnblogs.com/wuhuacong/p/13223630.html
如有疑問請與原作者聯系

標簽:方式PSwebtheHTTPType

版權申明:本站文章部分自網絡,如有侵權,請聯系:west999com@outlook.com
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有

上一篇:沒有了

下一篇:沒有了

国产日韩色情在线电影