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