Serial number of The Front End SPA Project based on Vue and Quasar

review

In the last article, we have completed the layout menu based on the Vue and Quasar front-end SPA project practical layout menu (3). This article mainly introduces the implementation of serial number function.

Introduction to the

MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL database has no separate Sequence; MySQL database supports only increment primary key; MySQL itself can’t implement this, so CrudAPI encapsulates complex serial numbers, supports strings and numbers, custom formats, and can be set to timestamps. Can be used for product coding, order sequence number and other scenarios!

UI

Serial number list

Create serial number

Edit serial number

API

The serial number API includes basic CRUD operations, which can be viewed in the Swagger documentation. Encapsulate the API through Axios, named 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 };
Copy the code

Add and delete

Through the list page, new page and edit page to achieve the serial number of basic CRUD operations, which is similar to the new page and edit page, ordinary form submission, here is not a detailed introduction, directly view the code can be. For the list query page, custom components are used, and this section focuses on custom components.

A custom component

The serial number list page uses a paging control, and because other list pages are used, it is appropriate to wrap it as a Component, called CPage. The main functions include: setting the number of entries per page, switching pages, unified style and so on.

The core code

First create the CPage folder in the Components directory, then create the cpage.vue and index.js files.

CPage/CPage.vue

Q-pagination control is used

 <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>
Copy the code

CPage/index.js

Implement the install method

import CPage from "./CPage.vue";

const cPage = {
  install: function(Vue) {
    Vue.component("CPage", CPage); }};export default cPage;
Copy the code

CPage use

Global configuration

First, create the boot/cpage.js file

import cPage from ".. /components/CPage";

export default async ({ Vue }) => {
  Vue.use(cPage);
};
Copy the code

Then, add cPage to boot node of quasar.conf.js, so that the Quasar will automatically load cPage.

 boot: [

    'i18n'.'axios'.'cpage'
  ]
Copy the code

application

Used by the label CPage in the serial number list

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

When paging is switched, pass the current number of pages and the number of pages per page to the parent page through the @Input callback, and then get the corresponding sequence number list through the API.

summary

This article mainly introduces the metadata sequence number function, using q-Pagination pagination control, and encapsulated as a custom component CPage, and then realize the sequence number cruD add, delete, modify and check function, the next chapter will introduce the metadata table definition function.

The demo presentation

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…

Attached source address

Making the address

Github.com/crudapi/cru…

Gitee address

Gitee.com/crudapi/cru…

GitHub may be slow due to network reasons. Instead, access Gitee and the code will be updated synchronously.