「免費(fèi)開源」基于Vue和Quasar的前端SPA項(xiàng)目crudapi后臺(tái)管理系統(tǒng)實(shí)戰(zhàn)之模塊管理（十四）

基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之模塊管理（十四）

回顧

通過之前一篇文章?基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之動(dòng)態(tài)表單（五）的介紹，通過配置的方式可以零代碼實(shí)現(xiàn)表單管理功能，但是所有表單都沒有分類，如果表單數(shù)量很多的情況下不方便查找，因此本文主要介紹表單模塊管理相關(guān)內(nèi)容。

簡介

屬于同一類型的表單可以添加到同一個(gè)模塊，比如字典相關(guān)的表建立“字典”模塊，用戶相關(guān)的表建立“用戶管理”模塊，模塊在首頁直接展示，用戶可以快速的操作對(duì)應(yīng)的表單。

UI界面

首頁顯示模塊和表單鏈接

表單配置

通過數(shù)據(jù)庫逆向的方式，將元數(shù)據(jù)物理表ca_meta_table通過動(dòng)態(tài)表單方式管理起來，可以利用動(dòng)態(tài)表單功能進(jìn)行查詢數(shù)據(jù)，但是不能修改數(shù)據(jù)。為了避免誤操作，這里設(shè)置屬性為只讀。

模塊和模塊行是一對(duì)多關(guān)系，模塊行和表是多對(duì)一關(guān)系。

模塊配置

字典模塊添加3個(gè)省，市，區(qū)三個(gè)表。

核心代碼

說明

表單配置好之后，api自動(dòng)生成了，直接通過模塊api獲取后臺(tái)數(shù)據(jù)，首頁展示模塊，每個(gè)模塊可以折疊。

代碼

async loadData() {
  try {
    const modules = await tableService.list("module", 0, 9999, null, null, null);

    for (let i = 0; i < modules.length; i++) {
        modules[i].expanded = true;
    }

    this.modules = modules;
  } catch (error) {
    console.error(error);
  }
}

獲取模塊數(shù)據(jù)

<div class="q-pt-md">
  <q-banner inline-actions class="text-black bg-listcolor">
      <span class="title">業(yè)務(wù)數(shù)據(jù)</span>
      <template v-slot:action>
        <q-btn
          dense
          flat
          unelevated
          round
          color="primary"
          @click="businessExpand = !businessExpand" 
          :icon="businessExpand ? 'expand_less' : 'expand_more'"
        />
      </template>
  </q-banner>

  <div v-show="businessExpand">
    <div class="q-pt-md  q-pl-md" :key="item.id" v-for="item in modules">
      <q-banner clickable inline-actions class="text-black bg-listcolor">
          <span class="title">{{item.name}}</span>
          <template v-slot:action>
            <q-btn
              dense
              flat
              unelevated
              round
              color="primary"
              @click="onConfigClick(item)"
              icon="settings"
            />
            <q-btn
              dense
              flat
              unelevated
              round
              color="primary"
              @click="item.expanded = !item.expanded" 
              :icon="item.expanded ? 'expand_less' : 'expand_more'"
            />
          </template>
      </q-banner>

      <div v-show="item.expanded" class="q-pt-md row items-start q-gutter-md">
          <q-item 
          :active="active" active-class="text-primary"
          clickable v-ripple @click="onModuleLineClick(moduleLine)" 
          :key="moduleLine.id" v-for="moduleLine in item.moduleLines"
          > 
            <q-item-section>
              <q-item-label>{{moduleLine.table.caption}}</q-item-label>
              <q-item-label caption>{{moduleLine.table.name}}</q-item-label>
            </q-item-section>
          </q-item>
      </div>
    </div>
  </div>
</div>

頁面繪制

#

小結(jié)

本文主要介紹了表單的模塊化管理，配置了用戶管理，文件，字典等模塊，優(yōu)化了首頁布局，使用起來更方便快捷。

crudapi簡介

crudapi是crud+api組合，表示增刪改查接口，是一款零代碼可配置的產(chǎn)品。使用crudapi可以告別枯燥無味的增刪改查代碼，讓您更加專注業(yè)務(wù)，節(jié)約大量成本，從而提高工作效率。 crudapi的目標(biāo)是讓處理數(shù)據(jù)變得更簡單，所有人都可以免費(fèi)使用！ 無需編程，通過配置自動(dòng)生成crud增刪改查RESTful API，提供后臺(tái)UI管理業(yè)務(wù)數(shù)據(jù)。基于主流的開源框架，擁有自主知識(shí)產(chǎn)權(quán)，支持二次開發(fā)。

demo演示

crudapi屬于產(chǎn)品級(jí)的零代碼平臺(tái)，不同于自動(dòng)代碼生成器，不需要生成Controller、Service、Repository、Entity等業(yè)務(wù)代碼，程序運(yùn)行起來就可以使用，真正0代碼，可以覆蓋基本的和業(yè)務(wù)無關(guān)的CRUD RESTful API。

官網(wǎng)地址：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

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。