No.16 vue-element-admin 学习使用（十一）mock数据

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

由于在前端开发的时候，有可能后端接口还没有写好，为了不影响项目进度，需要造一些数据用，这就用到了mock数据的功能。

如果想新增mock数据，需要在/mock文件夹下，添加对应的路由，对其进行拦截，并且模拟数据。例如@/api/article下，查询文章列表的接口 fetchList，先看下list.vue 调用fetchList方法，获取数据。

然后在api中写好接口，请求接口获取数据

接着需要去mock目录下拦截这个接口mock/article.js，需要注意的是mock 拦截是基于路由来做的，支持正则。文件中首先创建了一个list，@increment自增，Mock.Random.date('T')随机时间，类似于这种，指定了mock数据的类型

指定url，拦截对应的请求，返回mock后的response。

首先取出get请求中的参数，然后根据这些参数filter一下，如果参数有排序，则排序一下，然后分一下页，返回数据

return {
        code: 20000,
        data: {
          total: mockList.length,
          items: pageList
        }
      }

可以直接请求一下接口，看看数据 http://localhost:9527/dev-api/vue-element-admin/article/list?page=1&limit=20

后端接口完成后，要逐步的用真正的接口替换mock的接口，这个时候在mock/下删除掉对应的路由就好了。就会自动使用真正后端接口的数据。

自动切换本地和线上数据的办法：

.env.development中

VUE_APP_BASE_API = '/dev-api'

.env.production中

VUE_APP_BASE_API = '/prod-api'

在封装的request方法中，获取到baseurl 就会请求对应的接口了。

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

至此mock数据搞定了，就不需要每次都手动写假数据了，并且可以很方便的切换。