Vue Element front-end application development to obtain back-end data

Overview
1. Acquisition and processing of backend data
2. Interface display processing

Overview

In the previous essay "Step-by-step VUE+Element front-end application development: the associated processing of dynamic menus and routes", it was introduced that in the Vue + Element integration framework, the processing of dynamic menus and dynamic routes was implemented, so that the filtering and binding of local routes can be realized according to the menu corresponding to the user role. After the menu is successfully completed, it is necessary to further develop the page function. This essay introduces a case where the product information page is processed after obtaining the back-end data.

1. Acquisition and processing of backend data

The boundaries between the front-end and back-end are very clear. The front-end can build the front-end application by obtaining the corresponding JSON through the network.

Through the configuration information of Vue.config.js, we can specify whether Proxy handles local Mock data or actual backend data, as shown below.

We need to request data across domains and set up a proxy in the configuration file. For the vue-cli3 project, we need to write the configuration in vue.config.js.

We have created some API class files for operating data. Each API name corresponds to the centralized processing of a business, including list requests, single requests, additions, deletions, modifications, etc. of a specific business, which can all be encapsulated in one API class.

Then define our request logic in the corresponding business API access class, such as product.js, mainly by using the request auxiliary class that simply encapsulates axios to implement data requests.

The next step is to define our view file in the src/views/product directory, which is the page file, which contains several parts of the regular VUE, including

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

The part inside <template> is the interface element part, where we can add relevant interface components and other content, such as the element interface component.

Among them, <script> is the interactive part of the Vue script, which encapsulates a lot of our processing logic and corresponding modal object information. Before calling the API class to access data, we often need to introduce the corresponding API class file, as shown below.

import { GetTopBanners, GetProductList } from '@/api/product'

Among them, <style> defines the relevant styles.

Before introducing the Script part of Vue, we think you have already understood the script-related content of VUE and its life cycle. The content of the script part includes:

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // Component method},
  watch:
    // watch is good at handling scenarios where one data affects multiple data},
  computed: {
    // computed is good at handling scenarios where one data is affected by multiple data},
  beforeCreate: function() {
    // Called after instance initialization and before data observer and event/watcher configuration.
  },
  created: function() {
    // Called after the instance has been created. At this step, the instance has completed the following configurations: data observer, property and method operations, and watch/event callbacks. However, the mounting phase has not yet started and the $el property is not currently visible.
  },
  beforeMount: function() {
    // Called before mounting starts: the relevant render function is called for the first time.
  },
  mounted: function() {
    // The event hook is executed after the compiled HTML is mounted on the page. // el is replaced by the newly created vm.$el and the hook is called after it is mounted on the instance.
    // This hook function usually makes some ajax requests to obtain data for data initialization console.log("Home done");
  },
  beforeUpdate: function() {
    // Called when data is updated, before virtual DOM is re-rendered and patched. You can further change state in this hook, which will not trigger additional re-rendering.
  },
  updated: function() {
    // This hook is called after the virtual DOM is re-rendered and patched due to data changes.
    // When this hook is called, the component DOM has already been updated, so you can now perform operations that depend on the DOM. However, in most cases you should avoid changing state during this period, as this may result in an infinite update loop.
    // This hook is not called during server-side rendering.
  },
  beforeDestroy: function() {
    // Called before the instance is destroyed. At this step, the instance is still fully usable.
  },
  destroyed: function() {
    // Called after the Vue instance is destroyed. After the call, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.
  }
};
</script>

The main contents we cover include:

data, used to define the modal object or attributes of the entire page,

method, used to define various processing methods

computed, used to define some calculated trees

created, used when we create an element but not mounted

mounted, when the page is mounted

2. Interface display processing

For example, if we want to display an interface content, we need to display product pictures and product information introduction

Then you need to define relevant data templates and corresponding processing methods to implement data binding processing before the page is loaded.

export default {
  data() {
    return {
      activeName: 'all',
      currentDate: new Date(),
      banners: [],
      productlist: [],
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      producttype: 'all'
    };
  },
  created() {
    this.loadbanners()
    this.getlist()
  },

In the interface part, we use Element's interface components to define a revolving lantern display effect, as shown below.

The interface elements defined in the Template module are shown below.

The el-carousel here is the carousel of the Element component, and v-for="iteminbanners" is the processing syntax of Vue, which processes the data in the data model in a loop, and then displays multiple pictures one by one, thus achieving the effect of a carousel.

For list display, we use a card to display the content and a paging method to display the data.

For the category button part, the code is as follows.

<el-row :gutter="20" style="padding:20px">
  <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">All</el-button>
  <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">Framework Products</el-button>
  <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">Software Products</el-button>
  <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">Development component</el-button>
</el-row>

The main thing is to control some styles according to the data attributes and respond to the corresponding click events.

The content of each card is introduced and the Demo code is shown below.

<el-col :span="4"><div class="grid-content bg-purple" />
<el-card class="box-card">
  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
  <div style="padding: 14px;">
    <span>Delicious burgers</span>
    <div class="bottom clearfix">
      <time class="time">Price: ￥200</time>
      <el-button type="text" class="button" @click="loadbanners()">Action button</el-button>
    </div>
  </div>
</el-card>
</el-col>

However, we need to bind according to the dynamic data actually obtained, so a loop is needed to process it, similar to the v-for loop above, to display the product list.

<el-col v-for="(item, index) in productlist" :key="index" :span="4" style="min-width:250px">
<div class="grid-content bg-purple">
  <el-card class="box-card">
    <img :src="item.Picture" class="image" style="width:200px;height:200px">
    <div style="padding: 14px;">
      <span>{{ item.ProductName }}</span>
      <div class="bottom clearfix">
        <!-- <time class="time">Price: ￥{{ item.Price }}</time> -->
        <el-button type="text" class="button">Operation button</el-button>
      </div>
    </div>
  </el-card>
</div>
</el-col>

In order to effectively request and display data, we also need to use the paging component to perform paging query processing on the data. The definition code of the paging component interface is as follows.

 <el-pagination
      background
      layout="prev, pager, next"
      :page-sizes="[10,20,50]"
      :total="pageinfo.total"
      :current-page="pageinfo.pageindex"
      :page-size="pageinfo.pagesize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

In order to implement data paging, we need to define several variables such as the current page number, the size of data per page, the total number of data records, etc., to meet the needs of paging query.

The getList method we defined is as follows.

getlist() {
      //Construct paging query conditions var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };

      this.listLoading = true
      // Initiate a data query request and set the value of the local Data GetProductList(param).then(data => {
        this.productlist = data.list
        this.pageinfo.total = data.total_count
        this.listLoading = false
      })
    },

In addition, several methods are defined to query the data.

// When clicking a category, query handleClick(e, type) {
      // console.log(e, type);

      this.producttype = type
      this.pageinfo.pageindex = 1;

      this.getlist()
    },
    // Query processing after the number of pages changes handleSizeChange(val) {
      console.log(`${val} items per page`);
      this.pageinfo.pagesize = val;
      this.getlist()
    },
    // Query processing after the page number changes handleCurrentChange(val) {
      console.log(`Current page: ${val}`);
      this.pageinfo.pageindex = val;
      this.getlist()
    }

The above is the basic operation of using Element's interface components and Vue's methods to perform paging query requests for data. Through this simple case, we can understand the use of some basic Element interface components, as well as the understanding of Data/Method and other contents, and guide how to encapsulate and call cross-domain API requests to realize the display and processing of back-end data on the interface.

The above is the detailed content of Vue Element front-end application development for obtaining back-end data. For more information about Vue Element obtaining back-end data, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Vue Element front-end application development dynamic menu and routing association processing
Vue Element front-end application development: Use of API Store View in Vuex
Vue Element front-end application development preparation for the development environment
How to create a project with Vue3+elementui plus
Vue element realizes table merging row data
How to introduce bootstrap, elementUI and echarts into Vue project
Example code for vue element-ul to implement expansion and collapse functions
Vue uses Element to implement the steps of adding, deleting, modifying and packaging
vue+Element-ui implements login registration form
Vue Element front-end application development menu resource management

<<: How to install Linux online software gcc online

>>: How to find the my.ini configuration file in MySQL 5.6 under Windows