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

在前面随笔《循序渐进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的几个部分，包括

<template>
  
template>

<script>
export default {

}
script>

<style>

style>

其中在