“Free and open source” customized component of crudapi background management system of front end spa project based on Vue and Quasar (4)

Time:2021-7-15

Serial number of front end spa project based on Vue and Quasar (4)

review

Through the last articleLayout menu of front end spa project based on Vue and Quasar (3)We have completed the layout menu, this paper mainly introduces the realization of serial number function.

brief introduction

Mysql database does not have a single sequence. It only supports incremental primary key, but it can’t set step size, start index, format, etc. the most important thing is that a table can only use autoincrement by one field. But sometimes we need multiple fields to realize the function of sequence number or support complex format. MySQL itself can’t realize it, so it encapsulates complex sequence number, Support string and number, custom format, can also be set to timestamp. Can be used for product coding, order serial number and other scenarios!

UI interface

序列号列表
Serial number list

创建序列号
Create serial number

编辑序列号
Edit serial number

API

The serial number API includes the basic crud operation, encapsulates the API through Axios, and is 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 };

Add, delete, change and search

Through the list page, new page and edit page, the basic crud operation of serial number is realized. The new page is similar to the edit page, and the ordinary form submission is not introduced in detail here. You can directly view the code. For the list query page, the user-defined components are used. Here we focus on the knowledge of user-defined components.

Custom component

Pagination control is used in the serial number list page, because it is also used in other list pages, so it is suitable to be encapsulated as component, named cpage. The main functions include: setting the number of entries per page, switching pagination, unifying styles, etc.

Core code

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

CPage/CPage.vue

The q-pagination control is used

CPage/index.js

Implementation of install method

import CPage from "./CPage.vue";

const cPage = {
  install: function(Vue) {
    Vue.component("CPage", CPage);
  }
};

export default cPage;

Cpage usage

Global configuration

First, create the boot / cpage. JS file

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

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

Then, add cpage to the boot node in quasar.conf.js, so that quasar will load cpage automatically.

boot: [
    'i18n',
    'axios',
    'cpage'
  ]

application

It is used in the serial number list through the label cpage

When switching paging, the current page number and the number of each page are passed to the parent page through the @ input callback, and then the corresponding serial number list is obtained through the API.

Summary

This paper mainly introduces the function of serial number in metadata. It uses q-pagination paging control and encapsulates it into a custom component cpage. Then it realizes the crud function of adding, deleting, modifying and querying serial number. The next chapter will introduce the function of table definition in metadata.