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 )


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


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 .


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) {
 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'" />
<div v-show="businessExpand">
<div class="q-pt-md q-pl-md" :key="" v-for="item in modules">
<q-banner clickable inline-actions class="text-black bg-listcolor">
<span class="title">{{}}</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'" />
<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="" v-for="moduleLine in item.moduleLines" >
<q-item-label caption>{{}}</q-item-label>
 Copy code 

Page drawing


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
Address of the test…

Source code address attached

GitHub Address…

Gitee Address…

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