基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之聯(lián)合索引（十一）
回顧
通過(guò)之前文章 基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之動(dòng)態(tài)表單（五）的介紹名挥，關(guān)于表單元數(shù)據(jù)配置相關(guān)內(nèi)容已經(jīng)實(shí)現(xiàn)了，本文主要介紹聯(lián)合索引功能的實(shí)現(xiàn)。
簡(jiǎn)介
聯(lián)合索引又叫復(fù)合索引，如果索引只有一個(gè)字段，在設(shè)置列屬性的時(shí)候直接設(shè)置。如果是多個(gè)字段聯(lián)合索引，就需要單獨(dú)設(shè)置了券腔。這里可以創(chuàng)建普通或唯一兩種類(lèi)型的聯(lián)合索引，通過(guò)下拉框選擇多個(gè)字段拘泞。當(dāng)然如果索引只有一個(gè)字段颅眶，也可以通過(guò)聯(lián)合索引功能進(jìn)行設(shè)置。
UI界面
索引管理
核心代碼
由于在創(chuàng)建和編輯表單元數(shù)據(jù)時(shí)候都用到了聯(lián)合索引功能田弥，所以封裝成組件component涛酗，名稱為CIndexList，這樣可以復(fù)用偷厦，避免代碼冗余商叹。
CIndexList組件
CIndexList
通過(guò)getData方法獲取索引內(nèi)容
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;
}
應(yīng)用
在創(chuàng)建和編輯頁(yè)面中引用即可
<CIndexList ref="cIndexListRef" v-model="table"></CIndexList>
保存的表單時(shí)候，通過(guò)$refs['cIndexListRef']獲取索引內(nèi)容
const ref = this.$refs['cIndexListRef'];
const data = ref.getData();
例子
創(chuàng)建表單時(shí)候只泼，點(diǎn)擊“聯(lián)合索引”按鈕剖笙，彈出對(duì)話框設(shè)置頁(yè)面，添加3個(gè)聯(lián)合索引请唱。
保存表單之前弥咪，可以看到“聯(lián)合索引”按鈕括號(hào)里面的個(gè)數(shù)變成了3。
創(chuàng)建成功后十绑，編輯表單打開(kāi)聯(lián)合索引頁(yè)面可以再次編輯聯(lián)合索引聚至。
打開(kāi)phpmyadmin管理頁(yè)面，最終確定表和索引都創(chuàng)建成功了本橙。
小結(jié)
本文主要介紹了聯(lián)合索引功能扳躬，在創(chuàng)建和編輯表單元數(shù)據(jù)時(shí)候都可以設(shè)置聯(lián)合索引，索引可以用來(lái)優(yōu)化查詢速度，也可以用來(lái)唯一性驗(yàn)證贷币，避免數(shù)據(jù)庫(kù)中插入重復(fù)數(shù)據(jù)击胜。下一篇文章會(huì)介紹數(shù)據(jù)庫(kù)逆向，在數(shù)據(jù)庫(kù)表單已經(jīng)存在的基礎(chǔ)上役纹，通過(guò)數(shù)據(jù)庫(kù)逆向功能偶摔，快速生成元數(shù)據(jù)，不需要一行代碼促脉，我們就可以得到已有數(shù)據(jù)庫(kù)的基本crud功能啰挪，包括API和UI。類(lèi)似于phpmyadmin等數(shù)據(jù)庫(kù)UI管理系統(tǒng)嘲叔，但是比數(shù)據(jù)庫(kù)UI管理系統(tǒng)更靈活，更友好抽活。
demo演示
官網(wǎng)地址：https://crudapi.cn
測(cè)試地址：https://demo.crudapi.cn/crudapi/login
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于網(wǎng)絡(luò)原因硫戈，GitHub可能速度慢，改成訪問(wèn)Gitee即可下硕，代碼同步更新丁逝。
