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 page display module and form link
Form configuration
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 .
Module and module row are one to many relationships , Module rows and tables are many to one relationships .
The module configuration
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 .