「免費(fèi)開(kāi)源」基于Vue和Quasar的前端SPA項(xiàng)目crudapi后臺(tái)管理系統(tǒng)實(shí)戰(zhàn)之自定義組件（四）

基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之序列號(hào)（四）

回顧

通過(guò)上一篇文章?基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之布局菜單（三）的介紹，我們已經(jīng)完成了布局菜單，本文主要介紹序列號(hào)功能的實(shí)現(xiàn)。

簡(jiǎn)介

MySQL數(shù)據(jù)庫(kù)沒(méi)有單獨(dú)的Sequence，只支持自增長(zhǎng)(increment)主鍵，但是不能設(shè)置步長(zhǎng)、開(kāi)始索引、格式等，最重要的是一張表只能由一個(gè)字段使用自增，但有的時(shí)候我們需要多個(gè)字段實(shí)現(xiàn)序列號(hào)功能或者需要支持復(fù)雜格式，MySQL本身是實(shí)現(xiàn)不了的，所以crudapi封裝了復(fù)雜序列號(hào)，支持字符串和數(shù)字，自定義格式，也可以設(shè)置為時(shí)間戳?？梢杂糜诋a(chǎn)品編碼、訂單流水號(hào)等場(chǎng)景！

UI界面

?序列號(hào)列表

?創(chuàng)建序列號(hào)

?編輯序列號(hào)

API

?序列號(hào)API包括基本的CRUD操作，具體的通過(guò)swagger文檔可以查看。通過(guò)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 };

增刪改查

通過(guò)列表頁(yè)面，新建頁(yè)面和編輯頁(yè)面實(shí)現(xiàn)了序列號(hào)基本的crud操作，其中新建和編輯頁(yè)面類似，普通的表單提交，這里就不詳細(xì)介介紹了，直接查看代碼即可。對(duì)于列表查詢頁(yè)面，用到了自定義組件，這里重點(diǎn)介紹了一下自定義組件相關(guān)知識(shí)。

自定義component

序列號(hào)列表頁(yè)面中用到了分頁(yè)控件，因?yàn)槠渌斜眄?yè)面也會(huì)用到，所以適合封裝成component, 名稱為CPage。主要功能包括：設(shè)置每頁(yè)的條目個(gè)數(shù)，切換分頁(yè)，統(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

實(shí)現(xiàn)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é)點(diǎn)添加cpage，這樣Quasar就會(huì)自動(dòng)加載cpage。

 boot: [

    'i18n',
    'axios',
    'cpage'
  ]

應(yīng)用

在序列號(hào)列表中通過(guò)標(biāo)簽CPage使用

<CPage v-model="pagination" @input="onRequestAction"></CPage>

當(dāng)切換分頁(yè)的時(shí)候，通過(guò)@input回調(diào)，傳遞當(dāng)前頁(yè)數(shù)和每頁(yè)個(gè)數(shù)給父頁(yè)面，然后通過(guò)API獲取對(duì)應(yīng)的序列號(hào)列表。

小結(jié)

本文主要介紹了元數(shù)據(jù)中序列號(hào)功能，用到了q-pagination分頁(yè)控件，并且封裝成自定義組件cpage, 然后實(shí)現(xiàn)了序列號(hào)的crud增刪改查功能，下一章會(huì)介紹元數(shù)據(jù)中表定義功能。

demo演示

官網(wǎng)地址：https://crudapi.cn(opens new window)

測(cè)試地址：https://demo.crudapi.cn/crudapi/login(opens new window)

附源碼地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web(opens new window)

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web(opens new window)

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問(wèn)Gitee即可，代碼同步更新。