"Free and open source" based on Vue and Quasar front-end SPA project crudapi background management system actual business data addition, deletion, modification and inspection (7)

Time:2022-9-21

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

review

via previous postTable relationship of front-end SPA project based on Vue and Quasar (6)This article mainly introduces the crud addition, deletion, modification and query function of business data.

Introduction

In the crudapi system, metadata is defined by means of a configuration form. After the form is configured, the corresponding crud interface is automatically generated. The front-end integration of the RESTful API can realize the crud function of business data. If the table relationship is configured, the cascade operation of the main and sub-tables is also supported.

UI interface

业务数据列表
business data list

编辑业务数据
Edit business data

省市区主子表
Master list of provinces and cities

API

业务数据CRUDAPI
The business data API includes basic CRUD operations, which can be viewed through the swagger documentation. Encapsulate the api through axios, the name is 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 selection q-select

Use q-select to select data for many-to-one and one-to-one (sub-primary directions).

CFile component

The q-file component is used for uploading and displaying attachments.

form component

Including four types CTableNew, CTableEdit, CTableList, CTableListEdit

  1. CTableNew
    This component is used when creating new data. CTableNew displays the main table fields tiled, and then CTableNew (one-to-one main-sub-table) and CTableList (one-to-many main-sub-table) can be nested.

  2. CTableEdit
    This component is used when editing data. CTableEdit displays the main table fields tiled, and then can nest CTableNew (one-to-one main-subtable), CTableEdit (one-to-one main-subtable), CTableList (one-to-many main-subtable), CTableListEdit (one-to-one main-subtable) for multi-master and sub-tables).

  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 main-sub-table) and CTableList (one-to-many main-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 CTableNew (one-to-one master-subtable), CTableEdit (one-to-one master-subtable), CTableList (one-to-many master-subtable) can be nested table), CTableListEdit (one-to-many master-child table).

Through the above four types of component nesting, it is possible to support the cascade saving of unlimited main sub-tables, such as three-level sub-tables in provinces and cities, and unlimited sub-tables in catalog files.

List queries and pagination

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

parameter type describe
select string Select the fields and associated subtables required for the query, and query all fields and associated subtables by default
expand string Select the associated main table to be expanded, the default associated main table fields only query id and name
search string Full-text search keywords, implemented through the built-in system field full-text index fullTextBody
filter string Intelligent query condition, the format is the JSON serialized string of the Condition object
orderby string Sort by, ASC and DESC
offset int32 pagination start position
limit int32 Quantity per page
field 1 Object Finally converted to the = operator in mysql
field 2 Object Finally converted to the = operator in mysql
…… Object Finally converted to the = operator in mysql

The relationship between field 1, field 2, … is AND relationship, more details can refer to a previous articleData conditional query and pagination

summary

This article mainly introduces the function of adding, deleting, modifying and checking 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 with zero code. If complex functions are required, secondary development can be performed. The next article will cover front-end packaging and docker deployment.

demo

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

With source code address

GitHub address

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

Gitee address

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

Due to network reasons, GitHub may be slow, you can change it to access Gitee, and the code will be updated synchronously.

Recommended Today

Collection | Catalogue of Nanyou Experimental Reports

Catalogue of Nanyou Experimental Reports Nanyou various disciplines programming experiment program data structure Nanyou Data Structure Experiment 1.1: Related Operations of Sequence Tables Nanyou Data Structure Experiment 1.2: Relevant operations of singly linked list with header node Nanyou Data Structure Experiment 1.3: Inversion of Singly Linked List with Header Nodes Nanyou data structure experiment 1.4: […]