「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之業務數據（七）

基于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選擇數據。

CFile組件

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

表單組件

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

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為對象名稱復數形式（兼容對象名稱），查詢參數如下：

字段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即可，代碼同步更新。

API JavaScript MySQL Spring Boot Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。