基于Vue和Quasar的前端SPA專案實戰之序列號（四）
回顧
通過上一篇文章 基于Vue和Quasar的前端SPA專案實戰之布局選單（三）的介紹，我們已經完成了布局選單，本文主要介紹序列號功能的實作，
簡介
MySQL資料庫沒有單獨的Sequence，只支持自增長(increment)主鍵，但是不能設定步長、開始索引、格式等，最重要的是一張表只能由一個欄位使用自增，但有的時候我們需要多個欄位實作序列號功能或者需要支持復雜格式，MySQL本身是實作不了的，所以封裝了復雜序列號，支持字串和數字，自定義格式，也可以設定為時間戳，可以用于產品編碼、訂單流水號等場景！
UI界面
序列號串列
創建序列號
編輯序列號
API
序列號API包括基本的CRUD操作，通過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，主要功能包括：設定每頁的條目個數，切換分頁，統一樣式等，
核心代碼
首先在components目錄下創建檔案夾CPage，然后創建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使用
全域配置
首先，創建boot/cpage.js檔案
import cPage from "../components/CPage";
export default async ({ Vue }) => {
Vue.use(cPage);
};
然后，在quasar.conf.js里面boot節點添加cpage，這樣Quasar就會自動加載cpage，
boot: [
'i18n',
'axios',
'cpage'
]
應用
在序列號串列中通過標簽CPage使用
<CPage v-model="pagination" @input="onRequestAction"></CPage>
當切換分頁的時候，通過@input回呼，傳遞當前頁數和每頁個數給父頁面，然后通過API獲取對應的序列號串列，
小結
本文主要介紹了元資料中序列號功能，用到了q-pagination分頁控制元件，并且封裝成自定義組件cpage, 然后實作了序列號的crud增刪改查功能，下一章會介紹元資料中表定義功能，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270866.html
標籤：JavaScript
上一篇：ES6核心特性