Module Management of Front-end SPA Project Practice Based on Vue and Quasar

review

Through before an article based on the front end of the Vue and Quasar SPA project practical dynamic form of (5), can achieve zero code form by means of configuration management capabilities, but not all form classification, if the form a lot of number of cases is not easy to find, so this paper mainly introduces the form module management related content.

Introduction to the

Forms belonging to the same type can be added to the same module, such as the “dictionary” module for dictionary-related tables, and the “user management” module for user-related tables. Modules are directly displayed on the home page, and users can quickly operate corresponding forms.

UI

The home page shows links to modules and forms

Form the configuration

The physical metadata table CA_meta_table is managed by dynamic form in database reverse mode. The dynamic form function can be used to query data, but data cannot be modified. To avoid misoperation, set the property to read-only.

Modules and module rows are one-to-many, and module rows and tables are many-to-one.

The module configuration

Dictionary module adds 3 province, city, district three tables.

The core code

instructions

After the form is configured, the API is automatically generated, and the background data is obtained directly through the module API. The home page shows the modules, and 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 the code

Obtaining 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 the code

Page rendering

summary

This paper mainly introduces the form of modular management, configuration of user management, file, dictionary and other modules, optimize the home page layout, more convenient and quick to use.

Crudapi profile

Crudapi is a COMBINATION of CRUD + API, which stands for add, delete, modify and check interface. It is a zero-code configurable product. Crudapi allows you to focus on your business, save a lot of money, and improve your work efficiency by eliminating the tedious process of adding, deleting, modifying, and checking code. Crudapi aims to make working with data easier and is free for everyone to use! It automatically generates RESTful apis for ADDING, deleting, modifying, and querying CRUD data without programming, and provides a background UI to manage service data. Based on the mainstream open source framework, with independent intellectual property rights, support secondary development.

The demo presentation

Crudapi is a product-level zero-code platform, which is different from automatic code generator. It does not need to generate Controller, Service, Repository, Entity and other business codes, and the program can be used after running. Real zero-code. Can override basic business-neutral CRUD RESTful apis.

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…

Attached source code address

Making the address

Github.com/crudapi/cru…

Gitee address

Gitee.com/crudapi/cru…

Due to network reasons, GitHub may be slow, so you can access Gitee instead and update the code synchronously.