「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之聯合索引（十一）

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