在前面随笔《循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理》中介绍了在Vue + Element整合框架中，实现了动态菜单和动态路由的处理，从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定，菜单顺利弄好了，就需要进一步开发页面功能了，本篇随笔介绍一个案例，通过获取后端数据后，进行产品信息页面的处理。
1、后端数据的获取处理
前面随笔，我们介绍过了Vue + Element的前端框架中，主要通过后端获取数据，并呈现在界面视图或者组件上的。
前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端的应用了。
我们通过Vue.config.js的配置信息，可以指定Proxy来处理是本地Mock数据还是实际的后端数据，如下所示。
我们要跨域请求数据，在配置文件里设置代理，vue-cli3项目，需要在vue.config.js里面写配置。
我们创建了一些操作数据的API类文件，每个API名称对应一个业务的集中处理，包括特定业务的列表请求、单个请求、增加、删除、修改等等都可以封装在一个API类里面。
然后在对应的业务API访问类，如product.js 里面定义我们的请求逻辑，主要就是利用简单封装axios的request辅助类来实现数据的请求。
下一步就是在src/views/product目录里面定义我们的视图文件，这个也就是页面文件，其中包含了常规VUE的几个部分，包括
其中在里面的是界面元素部分，可以添加我们相关的界面组件等内容，如element的界面组件在里面。
其中
其中我们主要涉及到内容包括：
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模型里面的数据进行循环处理，然后逐一展示多个图片，从而实现了走马灯的效果展示。
对于列表展示，我们采用了一个卡片的展示内容，以及分页处理的方式实现数据的展示。
分类按钮部分，代码如下所示。
全部
框架产品
软件产品
开发组件
主要就是根据data属性进行一些样式的控制，以及响应对应的click事件。
而每个卡片内容介绍，Demo代码如下所示。
好吃的汉堡
操作按钮
但是我们要根据实际获得的动态数据进行绑定，因此需要一个循环来进行处理，类似上面的v-for循环，对产品列表进行展示即可。
![]()
{{ item.ProductName }}
操作按钮
为了有效的请求和展示数据，我们还需要利用分页组件来进行数据的分页查询处理，分页组件界面的定义代码如下所示。
为了实现对数据的分页，我们需要定义当前页码、每页面数据大小、总共数据记录数等几个变量，用来进行分页查询的需要。
我们定义的getList的方法如下所示。
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.list
this.pageinfo.total = data.total_count
this.listLoading = false
})
},
另外定义几个方法，对数据进行查询的操作。
// 单击某类别的时候，进行查询
handleClick(e, type) {
// console.log(e, type);
this.producttype = type
this.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()
}
以上就是我们利用Element的界面组件，以及Vue的方法进行数据的分页查询请求的基础操作，通过这个简单的案例，我们可以了解一些基础的Element 界面组件的使用，以及对Data / Method等内容的了解，并指导如何封装调用跨域的API请求，实现后端数据在界面上的展示处理了。
为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：
循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作
循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理
循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理
循序渐进VUE+Element 前端应用开发(17）--- 菜单管理
循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制