乐趣区

关于vue.js:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之联合索引十一

jiezi

基于 Vue 和 Quasar 的前端 SPA 我的项目实战之联结索引（十一）

回顾

通过之前文章 基于 Vue 和 Quasar 的前端 SPA 我的项目实战之动静表单（五）的介绍，对于表单元数据配置相干内容曾经实现了，本文次要介绍联结索引性能的实现。

简介

联结索引又叫复合索引，如果索引只有一个字段，在设置列属性的时候间接设置。如果是多个字段联结索引，就须要独自设置了。这里能够创立一般或惟一两种类型的联结索引，通过下拉框抉择多个字段。当然如果索引只有一个字段，也能够通过联结索引性能进行设置。

UI 界面


索引治理

外围代码

因为在创立和编辑表单元数据时候都用到了联结索引性能，所以封装成组件 component，名称为 CIndexList，这样能够复用，防止代码冗余。

CIndexList 组件


CIndexList

通过 getData 办法获取索引内容 

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;
}

利用

在创立和编辑页面中援用即可 

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

保留的表单时候，通过 $refs[‘cIndexListRef’] 获取索引内容 

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

例子


创立表单时候，点击“联结索引”按钮，弹出对话框设置页面，增加 3 个联结索引。


保留表单之前，能够看到“联结索引”按钮括号外面的个数变成了 3。


创立胜利后，编辑表单关上联结索引页面能够再次编辑联结索引。


关上 phpmyadmin 治理页面，最终确定表和索引都创立胜利了。

小结

本文次要介绍了联结索引性能，在创立和编辑表单元数据时候都能够设置联结索引，索引能够用来优化查问速度，也能够用来唯一性验证，防止数据库中插入反复数据。下一篇文章会介绍数据库逆向，在数据库表单曾经存在的根底上，通过数据库逆向性能，疾速生成元数据，不须要一行代码，咱们就能够失去已有数据库的根本 crud 性能，包含 API 和 UI。相似于 phpmyadmin 等数据库 UI 管理系统，然而比数据库 UI 管理系统更灵便，更敌对。

demo 演示

官网地址：https://crudapi.cn
测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub 地址

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

Gitee 地址

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

因为网络起因，GitHub 可能速度慢，改成拜访 Gitee 即可，代码同步更新。

退出移动版