循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

<template>
  
</template>

<script>exportdefault{



}</script>

<style>

</style>

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

<script>exportdefault{data() {return{};

  },

  methods: {//组件的方法
},

  watch: {//watch擅长处理的场景：一个数据影响多个数据
},

  computed: {//computed擅长处理的场景：一个数据受多个数据影响
},

  beforeCreate:function() {//在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
},

  created:function() {//实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
},

  beforeMount:function() {//在挂载开始之前被调用：相关的 render 函数首次被调用。
},

  mounted:function() {//编译好的HTML挂载到页面完成后执行的事件钩子
    //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    //此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
console.log("Home done");

  },

  beforeUpdate:function() {//数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
},

  updated:function() {//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    //当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
    //该钩子在服务器端渲染期间不被调用。
},

  beforeDestroy:function() {//实例销毁之前调用。在这一步，实例仍然完全可用。
},

  destroyed:function() {//Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
}

};</script>

export default{

  data() {return{

      activeName:'all',

      currentDate:newDate(),

      banners: [],

      productlist: [],

      pageinfo: {

        pageindex:1,

        pagesize:10,

        total:0},

      producttype:'all'};

  },

  created() {this.loadbanners()

    this.getlist()

  },

<el-row:gutter="20"style="padding:20px">
  <el-buttontype="primary"icon="el-icon-search":plain="producttype !='all'"@click="handleClick($event, 'all')">全部</el-button>
  <el-buttontype="success"icon="el-icon-search":plain="producttype !='1'"@click="handleClick($event, '1')">框架产品</el-button>
  <el-buttontype="warning"icon="el-icon-search":plain="producttype !='2'"@click="handleClick($event, '2')">软件产品</el-button>
  <el-buttontype="danger"icon="el-icon-search":plain="producttype !='3'"@click="handleClick($event, '3')">开发组件</el-button>
</el-row>

<el-col:span="4"><divclass="grid-content bg-purple" />
<el-cardclass="box-card">
  <imgsrc="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"class="image">
  <divstyle="padding: 14px;">
    <span>好吃的汉堡</span>
    <divclass="bottom clearfix">
      <timeclass="time">价格：¥200</time>
      <el-buttontype="text"class="button"@click="loadbanners()">操作按钮</el-button>
    </div>
  </div>
</el-card>
</el-col>

<el-colv-for="(item, index) in productlist":key="index":span="4"style="min-width:250px">
<divclass="grid-content bg-purple">
  <el-cardclass="box-card">
    <img:src="item.Picture"class="image"style="width:200px;height:200px">
    <divstyle="padding: 14px;">
      <span>{{ item.ProductName }}</span>
      <divclass="bottom clearfix">
        <!--<time class="time">价格：¥{{ item.Price }}</time>-->
        <el-buttontype="text"class="button">操作按钮</el-button>
      </div>
    </div>
  </el-card>
</div>
</el-col>

    <el-paginationbackground

      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() {//构造分页查询条件
      var param ={

        type:this.producttype === 'all' ? '' : this.producttype,

        pageindex:this.pageinfo.pageindex,

        pagesize:this.pageinfo.pagesize

      };this.listLoading = true
      //发起数据查询请求，并设置本地Data的值
      GetProductList(param).then(data =>{this.productlist =data.listthis.pageinfo.total =data.total_countthis.listLoading = false})

    },

    //单击某类别的时候，进行查询
handleClick(e, type) {//console.log(e, type);

      this.producttype =typethis.pageinfo.pageindex = 1;this.getlist()

    },//页面数量改变后查询处理
handleSizeChange(val) {

      console.log(`每页 ${val} 条`);this.pageinfo.pagesize =val;this.getlist()

    },//页码改变后查询处理
handleCurrentChange(val) {

      console.log(`当前页: ${val}`);this.pageinfo.pageindex =val;this.getlist()

    }