“Free and open source” front end spa project crudapi background management system based on Vue and Quasar

Time:2021-7-1

Business data of front end spa project based on Vue and Quasar (7)

review

Through the last articleTable relationship of front end spa project based on Vue and Quasar (6)This paper mainly introduces the crud function of business data.

brief introduction

In crudapi system, metadata is defined by configuring forms. After the form is configured, the corresponding crud interface is automatically generated. The front-end integration of restful API can realize the crud function of business data. If the table relationship is configured, it also supports the cascade operation of primary and secondary tables.

UI interface

业务数据列表
Business data list

编辑业务数据
Edit business data

省市区主子表
Main sub table of province and city

API

业务数据CRUDAPI
The business data API includes basic CRUD operations, which can be viewed through the swagger document. The API is encapsulated by Axios and named table

import { axiosInstance } from "boot/axios";

const table = {
  create: function(tableName, data) {
    return axiosInstance.post("/api/business/" + tableName,
       data
    );
  },
  update: function(tableName, id, data) {
    return axiosInstance.patch("/api/business/" + tableName + "/" + id,
       data
    );
  },
  list: function(tableName, page, rowsPerPage, search, query, filter) {
    if (!page) {
      page = 1
    }

    if (!rowsPerPage) {
      rowsPerPage = 10
    }

    let filterStrEncode;
    if (filter) {
      let filterStr = JSON.stringify(filter);
      filterStrEncode = encodeURIComponent(filterStr);
    }
    
    return axiosInstance.get("/api/business/" + tableName,
      {
        params: {
          offset: (page - 1) * rowsPerPage,
          limit: rowsPerPage,
          search: search,
          ...query,
          filter: filterStrEncode
        }
      }
    );
  },
  count: function(tableName, search, query) {
    return axiosInstance.get("/api/business/" + tableName + "/count",
      {
        params: {
          search: search,
          ...query
        }
      }
    );
  },
  get: function(tableName, id) {
    return axiosInstance.get("/api/business/" + tableName + "/" + id,
      {
        params: {
        }
      }
    );
  },
  delete: function(tableName, id) {
    return axiosInstance.delete("/api/business/" + tableName + "/" + id);
  },
  batchDelete: function(tableName, ids) {
    return axiosInstance.delete("/api/business/" + tableName,
      {data: ids}
    );
  }
};

export { table };

Core code

Code structure

代码结构
Code structure

Drop down and select q-select

For many to one and one to one (sub principal direction), q-select is used to select data.

CFile component

The q-file component is used to upload and display attachments.

Form component

There are four types: ctablenew, ctableedit, ctablelist and ctablelistedit

  1. CTableNew
    This component is used when creating new data. Ctablenew displays the fields in the main table, and then it can nest ctablenew (one-to-one main sub table) and ctablelist (one to many main sub table).

  2. CTableEdit
    This component is used when editing data. Ctableedit displays the fields in the main table on a flat surface, and then it can nest ctablenew (one to one main sub table), ctableedit (one to one main sub table), ctablelist (one to many main sub table), ctablelistedit (one to many main sub table).

  3. CTableList
    This component is used as a sub table when creating new data. Ctablelist uses q-table to support multi row sub table data, and then ctablenew (one to one primary sub table) and ctablelist (one to many primary sub table) can be nested.

  4. CTableListEdit
    This component is used as a sub table when editing data. Ctablelistedit uses q-table to support multi row sub table data, and then it can nest ctablenew (one-to-one primary sub table), ctableedit (one-to-one primary sub table), ctablelist (one to many primary sub table), ctablelistedit (one to many primary sub table).

Through the nesting of the above four types of components, you can support the cascading saving of unlimited primary sub tables, such as provincial and municipal level three sub tables and directory file level infinite sub tables.

List query and pagination

Data query mainly refers to retrieving the data list that meets the requirements according to the input conditions. If there is a large amount of data, pagination should be considered.
listapi
The API is / API / business / {name}, where name is the plural form of object name (compatible object name). The query parameters are as follows:

parameter type describe
select string Select the fields and associated sub tables needed by the query. All fields and associated sub tables are queried by default
expand string Select the associated main table to expand. By default, only ID and name are queried in the associated main table fields
search string Full text search keywords, through the built-in system field full text index fulltextbody implementation
filter string Intelligent query conditions, in the form of strings serialized by condition object JSON
orderby string Sort mode, ASC and desc
offset int32 Paging start position
limit int32 Quantity per page
Field 1 Object Finally, it is converted to the = operator in MySQL
Field 2 Object Finally, it is converted to the = operator in MySQL
…… Object Finally, it is converted to the = operator in MySQL

The relationship between field 1, field 2,… Is and. For more information, please refer to the previous articleData condition query and pagination

Summary

This paper mainly introduces the function of adding, deleting, modifying and querying business data. So far, the front end has realized the complete function of crudapi. Through configuration, the basic crud function of business data can be realized in zero code. If complex functions are needed, the secondary development can be carried out. The next article will cover front-end packaging and docker deployment.

Demo demo

Official website address:https://crudapi.cn
Test address:https://demo.crudapi.cn/crudapi/login

Source code address attached

GitHub address

https://github.com/crudapi/crudapi-admin-web

Gitee address

https://gitee.com/crudapi/crudapi-admin-web

Because of the network, GitHub may be slow. Instead, you can visit gitee and update the code synchronously.