编程知识 cdmana.com

Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)

be based on Vue and Quasar The front end of the SPA Module management of project practice ( fourteen )

review

Through the previous article be based on Vue and Quasar The front end of the SPA Dynamic form of project actual combat ( 5、 ... and ) Introduction to , The form management function can be realized with zero code through configuration , But all forms are not classified , If the number of forms is large, it is not convenient to find , Therefore, this paper mainly introduces the related contents of form module management .

brief introduction

Forms of the same type can be added to the same module , For example, the establishment of dictionary related tables “ Dictionaries ” modular , Create user related tables “ User management ” modular , The module is displayed directly on the home page , Users can quickly operate the corresponding form .

UI Interface

home

Home page display module and form link

Form configuration

table

Reverse through the database , Add metadata to the physical table ca_meta_table Managed through dynamic forms , You can use the dynamic form function to query data , But you can't modify the data . In order to avoid misoperation , Set the property here as read-only .

relation

Module and module row are one to many relationships , Module rows and tables are many to one relationships .

The module configuration

module

Dictionary module add 3 A province , City , Area three tables .

Core code

explain

After the form is configured ,api Automatically generated , Directly through the module api Get background data , Home page display module , Each module can be folded .

Code

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);
  }
}

Get module data

<div class="q-pt-md">
  <q-banner inline-actions class="text-black bg-listcolor">
      <span class="title"> Business data </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>

Page drawing

Summary

This paper mainly introduces the modular management of forms , User management is configured , file , Dictionary and other modules , Optimized home page layout , Easier and faster to use .

crudapi brief introduction

crudapi yes crud+api Combine , Indicates the interface for adding, deleting, modifying and querying , It is a zero code configurable product . Use crudapi You can say goodbye to the boring addition, deletion, modification and query code , Let you focus more on your business , Save a lot of cost , So as to improve work efficiency .
crudapi The goal is to make it easier to process data , Everyone can use it for free !
No programming , Automatically generated by configuration crud Additions and deletions RESTful API, Provide background UI Manage business data . Based on mainstream open source frameworks , Own independent intellectual property rights , Support secondary development .

demo demonstration

crudapi It's a product level zero code platform , Unlike automatic code generators , You don't have to generate Controller、Service、Repository、Entity And so on , The program can be used as soon as it runs , real 0 Code , It can cover basic business independent CRUD RESTful API.

Official website address :https://crudapi.cn
Address of the test :https://demo.crudapi.cn/crudapi/login

Source code address attached

GitHub Address

https://github.com/crudapi/crudapi-admin-web

Gitee Address

https://gitee.com/crudapi/crudapi-admin-web

Because of the Internet ,GitHub Maybe it's slow , Instead, visit Gitee that will do , Code synchronization update .

版权声明
本文为[crudapi]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210909120916549l.html

Scroll to Top