「免費開源」基于Vue和Quasar的前端SPA項目crudapi背景管理系統實戰之業務資料增删改查（七）

本文主要介紹了介紹業務資料的增删改查功能，到目前為止，前端實作了crudapi完整的功能。通過配置的方式可以零代碼實作業務資料的基本crud功能，如果需要複雜功能，可以進行二次開發。

基于Vue和Quasar的前端SPA項目實戰之業務資料（七）

回顧

通過上一篇文章 基于Vue和Quasar的前端SPA項目實戰之表關系（六）的介紹，中繼資料設計功能全部實作了，本文主要介紹業務資料的crud增删改查功能。

簡介

在crudapi系統中，通過配置表單的方式定義中繼資料。表單配置好之後，對應的crud接口就自動生成了，前端內建RESTful API就可以實作業務資料的crud功能，如果配置了表關系，也支援主子表的級聯操作。

UI界面

業務資料清單

編輯業務資料

省市區主子表

API

業務資料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 };
           

核心代碼

代碼結構

下拉選擇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選擇資料。

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

   建立資料時候采用該元件，CTableNew把主表字段平鋪展示，然後可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。

2. CTableEdit

   編輯資料時候采用該元件，CTableEdit把主表字段平鋪展示，然後可以嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。

3. CTableList

   建立資料時候作為子表采用該元件，CTableList采用q-table支援多行子表資料，然後可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。

4. CTableListEdit

   編輯資料時候作為子表采用該元件，CTableListEdit采用q-table支援多行子表資料，然後可以嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。

通過上面4種類型的元件嵌套，可以支援無限主子表級聯儲存，比如省市區三級子表，目錄檔案無限級子表。

清單查詢和分頁

資料查詢主要是指按照輸入條件檢索出符合要求的資料清單，如果資料量大的情況下，需要考慮分頁。

API為/api/business/{name}，其中name為對象名稱複數形式（相容對象名稱），查詢參數如下：

參數	類型	描述
select	string	選擇查詢需要的字段和關聯子表，預設查詢全部字段和關聯子表
expand		選擇需要展開的關聯主表，預設關聯主表字段隻查詢id和name
search		全文檢索關鍵字，通過内置的系統字段全文索引fullTextBody實作
filter		智能查詢條件，格式為Condition對象JSON序列化後的字元串
orderby		排序方式，ASC和DESC
offset	int32	分頁開始位置
limit		每頁數量
字段1	Object	最終轉換成mysql中=操作符
字段2
......

字段1，字段2，...之間的關系為并且AND關系，更多内容可以參考之前的一篇文章 資料條件查詢和分頁

小結

本文主要介紹了介紹業務資料的增删改查功能，到目前為止，前端實作了crudapi完整的功能。通過配置的方式可以零代碼實作業務資料的基本crud功能，如果需要複雜功能，可以進行二次開發。下一篇文章會介紹前端打包和docker部署相關内容。

demo示範

官網位址：https://crudapi.cn

測試位址：https://demo.crudapi.cn/crudapi/login

附源碼位址

GitHub位址

https://github.com/crudapi/crudapi-admin-web

Gitee位址

https://gitee.com/crudapi/crudapi-admin-web

由于網絡原因，GitHub可能速度慢，改成通路Gitee即可，代碼同步更新。