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

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

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

<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>

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()
  },

<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>

<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>

<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>

 <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"
    />

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
      })
    },

// 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()
    }