基于Vue和Quasar的前端SPA項目實戰(zhàn)之序列號（四）
回顧
通過上一篇文章 基于Vue和Quasar的前端SPA項目實戰(zhàn)之布局菜單（三）的介紹，我們已經完成了布局菜單奥邮，本文主要介紹序列號功能的實現万牺。
簡介
MySQL數據庫沒有單獨的Sequence，只支持自增長(increment)主鍵洽腺，但是不能設置步長脚粟、開始索引、格式等蘸朋，最重要的是一張表只能由一個字段使用自增核无，但有的時候我們需要多個字段實現序列號功能或者需要支持復雜格式，MySQL本身是實現不了的藕坯，所以crudapi封裝了復雜序列號团南，支持字符串和數字，自定義格式炼彪，也可以設置為時間戳吐根。可以用于產品編碼霹购、訂單流水號等場景佑惠！
UI界面
序列號列表
創(chuàng)建序列號
編輯序列號
API
序列號API包括基本的CRUD操作，具體的通過swagger文檔可以查看齐疙。通過axios封裝api膜楷，名稱為metadataSequence
import { axiosInstance } from "boot/axios";
const metadataSequence = {
create: function(data) {
return axiosInstance.post("/api/metadata/sequences",
data
);
},
update: function(id, data) {
return axiosInstance.patch("/api/metadata/sequences/" + id,
data
);
},
list: function(page, rowsPerPage, search, query) {
if (!page) {
page = 1
}
if (!rowsPerPage) {
rowsPerPage = 10
}
return axiosInstance.get("/api/metadata/sequences",
{
params: {
offset: (page - 1) * rowsPerPage,
limit: rowsPerPage,
search: search,
...query
}
}
);
},
count: function(search, query) {
return axiosInstance.get("/api/metadata/sequences/count",
{
params: {
search: search,
...query
}
}
);
},
get: function(id) {
return axiosInstance.get("/api/metadata/sequences/" + id,
{
params: {
}
}
);
},
delete: function(id) {
return axiosInstance.delete("/api/metadata/sequences/" + id);
},
batchDelete: function(ids) {
return axiosInstance.delete("/api/metadata/sequences",
{data: ids}
);
}
};
export { metadataSequence };
增刪改查
通過列表頁面，新建頁面和編輯頁面實現了序列號基本的crud操作贞奋，其中新建和編輯頁面類似赌厅，普通的表單提交，這里就不詳細介介紹了轿塔，直接查看代碼即可特愿。對于列表查詢頁面仲墨，用到了自定義組件，這里重點介紹了一下自定義組件相關知識揍障。
自定義component
序列號列表頁面中用到了分頁控件目养，因為其它列表頁面也會用到，所以適合封裝成component, 名稱為CPage毒嫡。主要功能包括：設置每頁的條目個數癌蚁，切換分頁，統(tǒng)一樣式等兜畸。
核心代碼
首先在components目錄下創(chuàng)建文件夾CPage努释，然后創(chuàng)建CPage.vue和index.js文件。
CPage/CPage.vue
用到了q-pagination控件
<q-pagination
unelevated
v-model="pagination.page"
:max="Math.ceil(pagination.count / pagination.rowsPerPage)"
:max-pages="10"
:direction-links="true"
:ellipses="false"
:boundary-numbers="true"
:boundary-links="true"
@input="onRequestAction"
>
</q-pagination>
CPage/index.js
實現install方法
import CPage from "./CPage.vue";
const cPage = {
install: function(Vue) {
Vue.component("CPage", CPage);
}
};
export default cPage;
CPage使用
全局配置
首先咬摇，創(chuàng)建boot/cpage.js文件
import cPage from "../components/CPage";
export default async ({ Vue }) => {
Vue.use(cPage);
};
然后伐蒂，在quasar.conf.js里面boot節(jié)點添加cpage，這樣Quasar就會自動加載cpage肛鹏。
boot: [
'i18n',
'axios',
'cpage'
]
應用
在序列號列表中通過標簽CPage使用
<CPage v-model="pagination" @input="onRequestAction"></CPage>
當切換分頁的時候逸邦，通過@input回調，傳遞當前頁數和每頁個數給父頁面在扰，然后通過API獲取對應的序列號列表昭雌。
小結
本文主要介紹了元數據中序列號功能，用到了q-pagination分頁控件健田，并且封裝成自定義組件cpage, 然后實現了序列號的crud增刪改查功能烛卧，下一章會介紹元數據中表定義功能。
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即可，代碼同步更新好爬。
