“Free and open source” business data addition, deletion, modification and query of crudapi background management system of front-end spa project based on Vue and Quasar (7)

Time:2021-10-27

Actual business data of front-end spa project based on Vue and Quasar (7)

review

Through the previous articleTable of actual combat relationship of front-end spa project based on Vue and Quasar (6)The metadata design function is fully realized. This paper mainly introduces the crud addition, deletion, modification and query function of business data.

brief introduction

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

UI interface


Business data list


Edit business data


Main sub table of provinces and cities

API


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 q-select

<q-select
  v-if="item.options"
  style="min-width: 150px;height: 40px;"
  outlined
  option-label="name"
  use-input
  hide-selected
  fill-input
  input-debounce="0"
  @filter="item.filterFn"
  @filter-abort="item.abortFilterFn"
  v-model="item.value"
  :options="item.options"
/>

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

CFile component

<q-file v-model="localFile">
  <template v-slot:prepend>
    <q-icon name="attach_file" />
  </template>
  <template v-slot:after>
    <q-btn round dense flat icon="send" @click="onSubmitClick" />
  </template>
</q-file>

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 data. Ctablenew displays the fields of the main table horizontally, and then ctablenew (one-to-one primary sub table) and ctablelist (one to many primary sub tables) can be nested.
  2. CTableEdit
    This component is used when editing data. Ctableedit tiles the main table fields, and then you can nest ctablenew (one-to-one primary sub table), ctableedit (one-to-one primary sub table), ctablelist (one to many primary sub table) and ctablelistedit (one to many primary sub table).
  3. CTableList
    When creating data, the component is used as a sub table. 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 tables) 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. Then, ctablenew (one-to-one primary sub table), ctableedit (one-to-one primary sub table), ctablelist (one-to-many primary sub table) and ctablelistedit (one-to-many primary sub table) can be nested.

Through the above four types of component nesting, you can support cascade saving of infinite primary sub tables, such as three-level sub tables in provinces and cities, and infinite level sub tables in directory files.

List query and paging

Data query mainly refers to retrieving the qualified data list according to the input conditions. If the amount of data is large, pagination needs to be considered.

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 required for query. All fields and associated sub tables are queried by default
expand string Select the associated primary table to expand. By default, the associated primary table field only queries ID and name
search string The full-text search keyword is realized through the built-in system field full-text index fulltextbody
filter string Intelligent query condition, the format is the string serialized by condition object JSON
orderby string Sort by, ASC and desc
offset int32 Paging start position
limit int32 Number 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 paging

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 crud API. Through configuration, the basic crud functions of business data can be realized with zero code. If complex functions are required, secondary development can be carried out. The next article will introduce front-end packaging and docker deployment.

Demo demo

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

Attached source 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. Just visit gitee and update the code synchronously.

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]