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

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

回顧

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

簡(jiǎn)介

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

UI界面

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

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

?省市區(qū)主子表

API

?業(yè)務(wù)數(shù)據(jù)API包括基本的CRUD操作，具體的通過(guò)swagger文檔可以查看。通過(guò)axios封裝api，名稱(chēng)為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"
/>

對(duì)于多對(duì)一和一對(duì)一（子主方向）使用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組件，用于上傳和顯示附件。

表單組件

包括四種類(lèi)型CTableNew、CTableEdit，CTableList，CTableListEdit

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

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

列表查詢(xún)和分頁(yè)

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

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

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

小結(jié)

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

demo演示

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

測(cè)試地址：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可能速度慢，改成訪問(wèn)Gitee即可，代碼同步更新。