iview admin 使用mock.js模拟数据

最近在使用ivew admin做项目，为了使用mock模拟数据，记录步骤：

一、整体步骤：

1、页面调用API；

2、API判断是否有mock匹配的API，若有则拦截；

3、进入mock寻找相应的API

4、返回模拟数据；

​

二、打开src / mock，新建文件data.js：

import Mock from 'mockjs'
import {doCustomTimes
} from '@/libs/util';export const getTableData = req => {let tableData = []doCustomTimes(5, () => {tableData.push(Mock.mock({name: '@name',email: '@email',createTime: '@date'}))})return tableData
}

三、将这个API写入index.js用来拦截请求返回数据

Mock.mock(/\/get_hos/,get_table_data)

四、扔到公用请求数据api文件(src/api/data.js)中，进行模拟请求(axios)

import axios from '@/libs/api.request'export const getTableData = () => {return axios.request({url: 'get_table_data',method: 'get'})
}

五、当需要使用正式接口，在第4步中将url修改即可

当mockjs匹配不到url，请会发起axios请求。

export const getTableData = () => {return axios.request({url: 'get_table_data_office',//正式接口method: 'get'})
}

六、axios请求API配置

在libs文件夹api.requests.js文件，创建axios的一个promise对象，使用config.js中配置的baseUrl，返回promise对象。提供给第五步调用。

import HttpRequest from '@/libs/axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.proconst axios = new HttpRequest(baseUrl)
export default axios