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

基于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即可,代码同步更新。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理