「免費開源」基於Vue和Quasar的前端SPA項目crudapi後臺管理系統實戰之業務數據增刪改查（七）

時間 2021-04-02

標籤 javascript html 前端 vue java mysql ios git github web 欄目 JavaScript 简体版

原文原文鏈接

基於Vue和Quasar的前端SPA項目實戰之業務數據（七）

回顧

經過上一篇文章基於Vue和Quasar的前端SPA項目實戰之表關係（六）的介紹，元數據設計功能所有實現了，本文主要介紹業務數據的crud增刪改查功能。javascript

簡介

在crudapi系統中，經過配置表單的方式定義元數據。表單配置好以後，對應的crud接口就自動生成了，前端集成RESTful API就能夠實現業務數據的crud功能，若是配置了表關係，也支持主子表的級聯操做。html

UI界面

業務數據列表前端

編輯業務數據vue

省市區主子表java

API

業務數據API包括基本的CRUD操做，具體的經過swagger文檔能夠查看。經過axios封裝api，名稱爲tablemysql

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 };

核心代碼

代碼結構

代碼結構ios

下拉選擇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選擇數據。git

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組件，用於上傳和顯示附件。github

表單組件

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

CTableNew
新建數據時候採用該組件，CTableNew把主表字段平鋪展現，而後能夠嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。
CTableEdit
編輯數據時候採用該組件，CTableEdit把主表字段平鋪展現，而後能夠嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。
CTableList
新建數據時候做爲子表採用該組件，CTableList採用q-table支持多行子表數據，而後能夠嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。
CTableListEdit
編輯數據時候做爲子表採用該組件，CTableListEdit採用q-table支持多行子表數據，而後能夠嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）、CTableList（一對多主子表），CTableListEdit（一對多主子表）。

經過上面4種類型的組件嵌套，能夠支持無限主子表級聯保存，好比省市區三級子表，目錄文件無限級子表。

列表查詢和分頁

數據查詢主要是指按照輸入條件檢索出符合要求的數據列表，若是數據量大的狀況下，須要考慮分頁。

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

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