Step by step VUE+Element front-end application development (20) -- using component encapsulation to simplify interface code

A good thing about VUE+Element front-end application is the Componentization of the interface. We can divide the interface content into different combinations according to the reuse guidelines. Each module can be a component or a combination of multiple components, and this process is very convenient. The purpose of component encapsulation is to develop business functions more conveniently and quickly. Component is one of the most powerful functions of vue. Components can reuse some similar functions and decouple from other business logic. This essay introduces some component encapsulation processing commonly used in the front-end framework, which is used to simplify the interface and hide the implementation details.

1. Need for component encapsulation

When we develop a main interface, we generally need to arrange a lot of content, and the content of each part may be common in other interfaces. If these are simply using the original Element interface components and simple copy processing, the page code will be bloated, and with the continuous copy and use, the interfaces of each part will not be unified. At this time, if those same functions are abstracted and separated into components, it will be particularly easy to use component reference.

In Winform development, we know that there are many common user-defined controls, that is, encapsulating some common parts of the content of the conventional interface and dragging them to use. At present, the component development of VUE+Element front-end application is also easy. The interface code and Vue's control logic JS code are combined to form a small component. The required parameters are passed in through the use of Prop, and the display logic and event processing of the internal control interface of the component. Then the interface calls the component very concisely, which reduces the amount of code on our main page and facilitates the maintenance of the code.

For example, for the conventional dictionary drop-down list, we want to bind a dictionary type to realize the display of the system drop-down list, so we can encapsulate the common interface content as a dictionary component.

In addition, for the conventional processing of tree list and its filtering implementation, we can also realize the display of tree list through simple encapsulation, so that we can present the required tree list content by passing in the corresponding tree list data.

In addition, there is a situation that there are too many interface contents. We divide it into different interface components according to the contents, and then the page is maintained independently. One line of code directly from the main interface can integrate the required content blocks, greatly reducing the code layout of the main interface.

For example, for each role in the permission system, in addition to the basic information, it also includes the permission (function control point), the user and the menu. The permission is used to control the interface elements, such as the display of operation buttons, while the menu is used to obtain the menu of the corresponding role after the user logs in to the system with the specified account, and then build the corresponding access entry. The UML class diagram of role interface module is shown below.  

Then on the corresponding interface elements, we should display these information in different tabs, and each Tab content part can be developed as an independent interface component.

For example, the operation UML diagram of adding members and roles in an organization.

Among them, adding members and roles involves the list data display of the interface and the corresponding adding display operation. It is more convenient to be independent of an interface component. Moreover, adding members also needs to be used in the role maintenance module, so two scenarios can be compatible to design the component module.

 

2. Encapsulation of interface components

In the front-end scenario of VUE+Element, to encapsulate a component, you generally need to master three skills: 1. Pass value from parent component to child component (props), 2. Pass value from child component to parent component ($emit), 3. slot usage. For an independent component, props is used to inject core content into the component$ Emit is used to integrate this component into other components through some operations.

Let's analyze the component scenarios in detail.

For the dictionary module, if it is necessary to connect with the Api in the system dictionary module, and display the drop-down list of corresponding dictionary types, the implementation code is as follows.

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="Please select">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

Then use the dictionary API in JS logic to obtain the corresponding data, and then bind it to the typeList attribute. If such logic needs to be handled in this way in every place where the dictionary is used, the code is obviously bulky, and it is more convenient to use component encapsulation.

We create a Common directory under the component directory, and then add a my dictdata Vue file, which is used to encapsulate the content processing of the dictionary.

If we finish writing the component, the reference component only needs one line of code to achieve the same function.

<my-dictdata v-model="searchForm.ProductType" type-name="Commodity type" />

And introduce this custom component into the components of the page.

import myDictdata from '@/components/Common/my-dictdata'
export default {
  components: { myDictdata },

For simplicity, you can also use main Unified global import in JS.

In this way, compared with using the original Element interface component, there are both interface code and JS code. Such a line of code can realize the function, which is very concise.

 

In order to understand the mystery, we have a simple understanding of the component development process. The code of the component interface is as follows, which is similar to the above.

<template>
  <el-select v-model="svalue" filterable clearable placeholder="Please select">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    >
      <span style="float: left;color:yello;">
        <i class="el-icon-tickets" style="color:blue;" />
        {{ item.Text }}
      </span>
    </el-option>
  </el-select>
</template>

Then introduce the Api class of dictionary operation in the JS part and define the Prop attribute typeName, as shown below.

And monitor the incoming Model value

In the implementation of Mounted, we add request binding for dictionary data, as shown below.

For tree list

Generally speaking, its usage code is as follows.

You can still feel bloated. If you put it in the main page, it will occupy a lot of code lines and it is inconvenient to maintain. Moreover, the tree list is also a common interface display content. You can reduce the amount of code on the main page through simple encapsulation.  

Similarly, we can encapsulate a tree list component

We can go to my tree Vue defines many common Prop attributes to facilitate the transfer of corresponding values to change the presentation of the interface.

In this way, when the main interface calls components to realize functions, only one line of interface code is required.

<myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />

The corresponding operation to obtain treedata is the following function

    getTree() { // Tree list data acquisition
      var param = {
        SkipCount: 0,
        MaxResultCount: 1000,
        Tag: 'web' // Web End dedicated
      }
      menu.GetAll(param).then(data => {
        this.treedata = [];// Tree list empty
        var list = data.result.items
        if (list) {
          // use getJsonTree Function to convert a two-dimensional table into a collection of nested tree objects
          var newTreedata = getJsonTree(list, {
            id: 'id',
            pid: 'pid',
            children: 'children',
            label: 'name'
          });
          this.treedata = newTreedata
        }
      });
    },

For the way of some page Components, this is generally not a very common component. Generally, we can put it in the Components directory on the same directory. The following is the encapsulation of some interface content Components used in the permission module.

After completing the interface components of adding members and roles, we can introduce them into the organization interface.

 

For role management, we also divide the content of the module according to this. Different business designs different interface components, and finally integrate them for use.

 

 

<el-dialog title="see information" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
  <el-col>
    <el-tabs value="basicPage" type="border-card">
      <el-tab-pane name="basicPage" label="essential information">
        <el-form ref="viewForm" :model="viewForm" label-width="120px">
          <el-form-item label="Role name">
            <el-input v-model="viewForm.name" disabled />
          </el-form-item>
          <el-form-item label="Role display name">
            <el-input v-model="viewForm.displayName" disabled />
          </el-form-item>
          <el-form-item label="Role description">
            <el-input v-model="viewForm.description" type="textarea" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane name="permitPage" label="jurisdiction">
        <rolefunction ref="rolefunction" :role-id="selectRoleId" />
      </el-tab-pane>

      <el-tab-pane name="userPage" label="user">
        <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
      </el-tab-pane>

      <el-tab-pane name="menuPage" label="menu">
        <rolemenu ref="rolemenu" :role-id="selectRoleId" />
      </el-tab-pane>
    </el-tabs>
  </el-col>
  <div slot="footer" class="dialog-footer">
    <el-button type="success" @click="closeDialog">close</el-button>
  </div>
</el-dialog>

perhaps

The above are the components that we encapsulate some common general components and page modules. The main purpose is to simplify the code of the main calling interface and improve the efficiency of use.

 

 

In order to facilitate readers' understanding, I list the links of the previous essays for reference:

Step by step VUE+Element front end application development (1) -- Preparation of development environment

Step by step VUE+Element front-end application development (2) -- the use of API, Store and View in Vuex

Step by step VUE+Element front end application development (3) -- association processing of dynamic menu and routing

Step by step VUE+Element front-end application development (4) -- processing of obtaining back-end data and product information pages

Step by step VUE+Element front-end application development (5) -- table list page query, list display and field escape processing

Step by step VUE+Element front-end application development (6) -- use of conventional Element interface components

Step by step VUE+Element front-end application development (7) -- introduce some conventional JS processing functions

Step by step VUE+Element front-end application development (8) -- use of tree list component

Step by step VUE+Element front-end application development (9) -- processing of interface language internationalization

Step by step VUE+Element front-end application development (10) -- processing various chart displays based on Vue eckards 

Step by step VUE+Element front-end application development (11) -- maintenance and use of icons

Step by step VUE+Element front end application development (12) -- front end login processing integrating ABP framework

Step by step VUE+Element front-end application development (13) -- encapsulation of front-end API interface

Step by step VUE+Element front-end application development (14) -- realize front-end interface display according to ABP back-end interface

Step by step VUE+Element front-end application development (15) -- processing of user management module

Step by step VUE+Element front-end application development (16) -- processing of organization and role management module 

Step by step VUE+Element front end application development (17) -- menu management

Step by step VUE+Element front end application development (18) -- function point management and permission control  

Step by step VUE+Element front-end application development (19) -- integration of back-end query interface and Vue front-end

Step by step VUE+Element front-end application development (20) -- using component encapsulation to simplify interface code  

 

Posted by sugarat on Tue, 17 May 2022 13:26:31 +0300