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

crudapi 2021-09-15 09:40:27

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

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>
 Copy code 

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 :crudapi.cn
Address of the test :demo.crudapi.cn/crudapi/log…

Source code address attached

GitHub Address

github.com/crudapi/cru…

Gitee Address

gitee.com/crudapi/cru…

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

Please bring the original link to reprint ,thank
Similar articles

2021-09-15