「免費開源」基于Vue和Quasar的前端SPA項目crudapi后臺管理系統(tǒng)實戰(zhàn)之業(yè)務(wù)數(shù)據(jù)增刪改查（七）

基于Vue和Quasar的前端SPA項目實戰(zhàn)之業(yè)務(wù)數(shù)據(jù)（七）

回顧

通過上一篇文章?基于Vue和Quasar的前端SPA項目實戰(zhàn)之表關(guān)系（六）的介紹，元數(shù)據(jù)設(shè)計功能全部實現(xiàn)了，本文主要介紹業(yè)務(wù)數(shù)據(jù)的crud增刪改查功能。

簡介

在crudapi系統(tǒng)中，通過配置表單的方式定義元數(shù)據(jù)。表單配置好之后，對應(yīng)的crud接口就自動生成了，前端集成RESTful API就可以實現(xiàn)業(yè)務(wù)數(shù)據(jù)的crud功能，如果配置了表關(guān)系，也支持主子表的級聯(lián)操作。

UI界面

?業(yè)務(wù)數(shù)據(jù)列表

?編輯業(yè)務(wù)數(shù)據(jù)

?省市區(qū)主子表

API

?業(yè)務(wù)數(shù)據(jù)API包括基本的CRUD操作，具體的通過swagger文檔可以查看。通過axios封裝api，名稱為table

import { axiosInstance } from "boot/axios";

const table = {
  create: function(tableName, data) {
    return axiosInstance.post("/api/business/" + tableName,
       data
    );
  },
  update: function(tableName, id, data) {
    return axiosInstance.patch("/api/business/" + tableName + "/" + id,
       data
    );
  },
  list: function(tableName, page, rowsPerPage, search, query, filter) {
    if (!page) {
      page = 1
    }

    if (!rowsPerPage) {
      rowsPerPage = 10
    }

    let filterStrEncode;
    if (filter) {
      let filterStr = JSON.stringify(filter);
      filterStrEncode = encodeURIComponent(filterStr);
    }

    return axiosInstance.get("/api/business/" + tableName,
      {
        params: {
          offset: (page - 1) * rowsPerPage,
          limit: rowsPerPage,
          search: search,
          ...query,
          filter: filterStrEncode
        }
      }
    );
  },
  count: function(tableName, search, query) {
    return axiosInstance.get("/api/business/" + tableName + "/count",
      {
        params: {
          search: search,
          ...query
        }
      }
    );
  },
  get: function(tableName, id) {
    return axiosInstance.get("/api/business/" + tableName + "/" + id,
      {
        params: {
        }
      }
    );
  },
  delete: function(tableName, id) {
    return axiosInstance.delete("/api/business/" + tableName + "/" + id);
  },
  batchDelete: function(tableName, ids) {
    return axiosInstance.delete("/api/business/" + tableName,
      {data: ids}
    );
  }
};

export { table };

核心代碼

代碼結(jié)構(gòu)

?代碼結(jié)構(gòu)

下拉選擇q-select

<q-select
  v-if="item.options"
  style="min-width: 150px;height: 40px;"
  outlined
  option-label="name"
  use-input
  hide-selected
  fill-input
  input-debounce="0"
  @filter="item.filterFn"
  @filter-abort="item.abortFilterFn"
  v-model="item.value"
  :options="item.options"
/>

對于多對一和一對一（子主方向）使用q-select選擇數(shù)據(jù)。

CFile組件

<q-file v-model="localFile">
  <template v-slot:prepend>
    <q-icon name="attach_file" />
  </template>
  <template v-slot:after>
    <q-btn round dense flat icon="send" @click="onSubmitClick" />
  </template>
</q-file>

用到了q-file組件，用于上傳和顯示附件。

表單組件

包括四種類型CTableNew、CTableEdit，CTableList，CTableListEdit

1. CTableNew 新建數(shù)據(jù)時候采用該組件，CTableNew把主表字段平鋪展示，然后可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。
2. CTableEdit 編輯數(shù)據(jù)時候采用該組件，CTableEdit把主表字段平鋪展示，然后可以嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。
3. CTableList 新建數(shù)據(jù)時候作為子表采用該組件，CTableList采用q-table支持多行子表數(shù)據(jù)，然后可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。
4. CTableListEdit 編輯數(shù)據(jù)時候作為子表采用該組件，CTableListEdit采用q-table支持多行子表數(shù)據(jù)，然后可以嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。

通過上面4種類型的組件嵌套，可以支持無限主子表級聯(lián)保存，比如省市區(qū)三級子表，目錄文件無限級子表。

列表查詢和分頁

數(shù)據(jù)查詢主要是指按照輸入條件檢索出符合要求的數(shù)據(jù)列表，如果數(shù)據(jù)量大的情況下，需要考慮分頁。??API為/api/business/{name}，其中name為對象名稱復(fù)數(shù)形式（兼容對象名稱），查詢參數(shù)如下：

參數(shù)類型描述selectstring選擇查詢需要的字段和關(guān)聯(lián)子表，默認(rèn)查詢?nèi)孔侄魏完P(guān)聯(lián)子表expandstring選擇需要展開的關(guān)聯(lián)主表，默認(rèn)關(guān)聯(lián)主表字段只查詢id和namesearchstring全文檢索關(guān)鍵字，通過內(nèi)置的系統(tǒng)字段全文索引fullTextBody實現(xiàn)filterstring智能查詢條件，格式為Condition對象JSON序列化后的字符串orderbystring排序方式，ASC和DESCoffsetint32分頁開始位置limitint32每頁數(shù)量字段1Object最終轉(zhuǎn)換成mysql中=操作符字段2Object最終轉(zhuǎn)換成mysql中=操作符......Object最終轉(zhuǎn)換成mysql中=操作符

字段1，字段2，...之間的關(guān)系為并且AND關(guān)系，更多內(nèi)容可以參考之前的一篇文章?數(shù)據(jù)條件查詢和分頁

小結(jié)

本文主要介紹了介紹業(yè)務(wù)數(shù)據(jù)的增刪改查功能，到目前為止，前端實現(xiàn)了crudapi完整的功能。通過配置的方式可以零代碼實現(xiàn)業(yè)務(wù)數(shù)據(jù)的基本crud功能，如果需要復(fù)雜功能，可以進行二次開發(fā)。下一篇文章會介紹前端打包和docker部署相關(guān)內(nèi)容。

demo演示

官網(wǎng)地址：https://crudapi.cn(opens new window)

測試地址：https://demo.crudapi.cn/crudapi/login(opens new window)

附源碼地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web(opens new window)

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web(opens new window)

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。