基于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
CTableNew
新建數(shù)據(jù)時候采用該組件聋涨，CTableNew把主表字段平鋪展示晾浴，然后可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）。CTableEdit
編輯數(shù)據(jù)時候采用該組件牍白，CTableEdit把主表字段平鋪展示脊凰，然后可以嵌套CTableNew（一對一主子表）、CTableEdit（一對一主子表）茂腥、CTableList（一對多主子表）狸涌，CTableListEdit（一對多主子表）。CTableList
新建數(shù)據(jù)時候作為子表采用該組件础芍，CTableList采用q-table支持多行子表數(shù)據(jù)杈抢，然后可以嵌套CTableNew（一對一主子表）和CTableList（一對多主子表）数尿。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ù) | 類型 | 描述 |
|---|---|---|
| select | string | 選擇查詢需要的字段和關(guān)聯(lián)子表曙聂，默認查詢?nèi)孔侄魏完P(guān)聯(lián)子表 |
| expand | string | 選擇需要展開的關(guān)聯(lián)主表晦炊，默認關(guān)聯(lián)主表字段只查詢id和name |
| search | string | 全文檢索關(guān)鍵字莽鸭，通過內(nèi)置的系統(tǒng)字段全文索引fullTextBody實現(xiàn) |
| filter | string | 智能查詢條件唉俗，格式為Condition對象JSON序列化后的字符串 |
| orderby | string | 排序方式，ASC和DESC |
| offset | int32 | 分頁開始位置 |
| limit | int32 | 每頁數(shù)量 |
| 字段1 | Object | 最終轉(zhuǎn)換成mysql中=操作符 |
| 字段2 | Object | 最終轉(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
測試地址：https://demo.crudapi.cn/crudapi/login
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于網(wǎng)絡(luò)原因慨畸，GitHub可能速度慢莱坎，改成訪問Gitee即可，代碼同步更新寸士。
