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

import { GetTopBanners, GetProductList } from ‘@/api/product’

其中

在开始介绍Vue 的Script部分，我们认为你已经对VUE的script相关内容，以及它的生命周期有所了解了，script部分的内容包括有。

其中我们主要涉及到内容包括：

• data，用于定义整个页面的modal对象或属性，

• method，用于定义各种处理方法

• computed，用于定义一些计算的树形

• created，用于我们在元素创建，但是没有挂载的时候

• mounted，完成页面挂载的时候

2、界面展示处理

====================================================================

例如我们要展示一个界面内容，需要展示产品的图片，以及产品信息介绍:

那么需要定义相关的数据模板，以及对应的处理方法，在页面加载前实现数据的绑定处理。

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

},

界面部分，我们利用Element的界面组件定义一个走马灯的展示效果，如下所示。

在Template模块里面定义好的界面元素如下所示。

这里面的el-carousel 是Element组件的走马灯，而 v-for=“item in banners” 就是vue的处理语法，对data模型里面的数据进行循环处理，然后逐一展示多个图片，从而实现了走马灯的效果展示。

对于列表展示，我们采用了一个卡片的展示内容，以及分页处理的方式实现数据的展示。

分类按钮部分，代码如下所示。

<el-button type=“primary” icon=“el-icon-search” :plain=“producttype !=‘all’” @click=“handleClick($event, ‘all’)”>全部

<el-button type=“success” icon=“el-icon-search” :plain=“producttype !=‘1’” @click=“handleClick($event, ‘1’)”>框架产品

<el-button type=“warning” icon=“el-icon-search” :plain=“producttype !=‘2’” @click=“handleClick($event, ‘2’)”>软件产品

<el-button type=“danger” icon=“el-icon-search” :plain=“producttype !=‘3’” @click=“handleClick($event, ‘3’)”>开发组件

主要就是根据data属性进行一些样式的控制，以及响应对应的click事件。

而每个卡片内容介绍，Demo代码如下所示。

好吃的汉堡

价格：¥200

<el-button type=“text” class=“button” @click=“loadbanners()”>操作按钮

但是我们要根据实际获得的动态数据进行绑定，因此需要一个循环来进行处理，类似上面的v-for循环，对产品列表进行展示即可。

{{ item.ProductName }}

操作按钮

为了有效的请求和展示数据，我们还需要利用分页组件来进行数据的分页查询处理，分页组件界面的定义代码如下所示。

<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的方法如下所示。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

戳这里免费领取前端学习资料