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 04:47:01
module management free open source


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://qdmana.com/2021/09/20210909113704910j.html

  1. Front and back end data interaction (V) -- what is Axios?
  2. Windows configures nginx to boot automatically
  3. Des questions d'entrevue communes à Tomcat pour discuter de votre compréhension de la technologie de verrouillage distribué,
  4. JS handscrap, Classic interview question, web front end Development Process
  5. Android 400 questions d'entrevue pour vous aider à entrer dans l'usine, un tour pour vous apprendre à comprendre netty
  6. Développement et projet d'application Web statique côté PC
  7. Recommandé pour le tutoriel Spring Framework, 2021 dernière question d'entrevue d'embauche de la société aiqiyi Java,
  8. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  9. [partage d'expérience de travail], 2021 les dernières questions d'entrevue Java de Baidu, Headlines, etc.
  10. Lisez l'analyse de 497 questions pour l'entrevue d'ingénieur principal Android et vérifiez les lacunes.
  11. Grâce à cette collection de questions d'entrevue d'automne, le salaire de saut d'emploi et l'entrevue de développement audio et vidéo ont doublé.
  12. Prenez d'un coup l'offre de Tencent meituan et jetez un coup d'oeil à cette copie de l'entrevue de printemps!
  13. L'expérience et l'expérience d'un Maverick Java en matière d'entrevue sur les MTD, l'expérience de l'entrevue d'embauche du printemps Java en 2021,
  14. Vue中自定义列表复选框和全选框-案例
  15. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  16. CSS text overflow ellipsis summary, as you wish
  17. C'est la mode la plus étrange que j'ai jamais vue.
  18. Cases à cocher et toutes les cases à cocher de la liste personnalisée en vue - CAS
  19. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  20. Vue3.0 using Gaode map to obtain longitude and latitude information
  21. Front end interview daily 3 + 1 - day 877
  22. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  23. React realizes the function of copying pictures with one click
  24. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  25. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  26. Résumé de l'entrevue Android de Dachang, carte technique Android
  27. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  28. Le résumé de l'entrevue Android de Dachang est en retard
  29. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  30. Jquery Tools Methodology collation, Sharing a little interview Experience
  31. Jquery plug - in urianchor, app front end Development
  32. $in jquery, Visualized Web Development Tool
  33. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  34. vue v-if未生效问题
  35. vue动态改变组件外部元素样式
  36. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  37. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. A Simple Css Meun
  40. Vue modifier dynamiquement le style de l'élément externe du composant
  41. Vue V - si problème non valable
  42. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  43. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  44. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  45. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  46. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  47. vue動態改變組件外部元素樣式
  48. vue v-if未生效問題
  49. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  50. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  51. What if you want to see the moon and don't want to go out
  52. Mid Autumn Festival, Chang'e looks at the moon
  53. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  54. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  55. Dart mixin full resolution
  56. Some suggestions on Vue code readability | comments are rewarded
  57. 120 lines of code to achieve pure web video editing
  58. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  59. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  60. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】