"Free and Open Source" Front-end SPA project crudapi back-end management system based on Vue and Quasar joint index of actual combat (11)

Joint Index of Front-end SPA Project Actual Combat Based on Vue and Quasar (11)

review

Through the introduction of the previous article based on Vue and Quasar front-end SPA project actual combat dynamic form (5) , the relevant content of the table unit data configuration has been realized, this article mainly introduces the realization of the joint index function.

Introduction

Joint index is also called compound index. If the index has only one field, it is directly set when setting the column properties. If it is a joint index of multiple fields, it needs to be set separately. Here you can create two types of common or unique joint indexes, and select multiple fields through the drop-down box. Of course, if the index has only one field, it can also be set through the joint index function.

UI interface

Index management

Core code

Since the joint index function is used when creating and editing table cell data, it is encapsulated into a component named CIndexList, which can be reused and avoid code redundancy.

CIndexList component

CIndexList

Get index content through getData method

getData() {
  let newIndexs = [];
  this.table.indexs.forEach(function(item){
      const newIndexLines = [];
      item.columns.forEach(function(column){
        newIndexLines.push({
          column: {
            id: column.id,
            name: column.name
          }
        })
      });

      const newIndex = {
        id: item.id,
        isNewRow: item.isNewRow,
        caption: item.caption,
        description: item.description,
        indexStorage: item.indexStorage,
        indexType: item.indexType,
        name: item.name,
        indexLines: newIndexLines
      }

      newIndexs.push(newIndex);
  });

  let data = {
    indexs: newIndexs
  }

  return data;
}

application

Just reference in the creation and editing pages

<CIndexList ref="cIndexListRef" v-model="table"></CIndexList>

When saving the form, get the index content through $refs['cIndexListRef']

const ref = this.$refs['cIndexListRef'];
const data = ref.getData();

example

When creating the form, click the "Joint Index" button to pop up a dialog box setting page to add 3 joint indexes.

Before saving the form, you can see that the number of brackets in the "Joint Index" button has changed to 3.

After the creation is successful, the edit form opens the joint index page to edit the joint index again.

Open the phpmyadmin management page, and finally confirm that the tables and indexes are created successfully.

summary

This article mainly introduces the joint index function. You can set the joint index when creating and editing table unit data. The index can be used to optimize query speed, and it can also be used for uniqueness verification to avoid inserting duplicate data in the database. The next article will introduce database reverse engineering. On the basis of the existing database forms, the metadata can be quickly generated through the database reverse function. Without a line of code, we can get the basic crud functions of the existing database, including API and UI. Similar to database UI management systems such as phpmyadmin, but more flexible and friendly than database UI management systems.

demo

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

Attached 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, just change to visit Gitee, and the code will be updated synchronously.