【初始Mock.js】

（一）Mock用处

在没有后端提供数据的情况下，前端人员可以借助Mock独立进行开发，也就是自己制作假数据模拟后端接口，让我们能够继续进行开发。

通过Mock，我们可以拦截Ajax请求，模拟真实API返回==，这样我们可以快速的调试我们的程序

一个可见的优点是，使用十分方便，基本能够覆盖常用的接口数据类型

（二）简单使用Mock

1.安装Mock.js

npm i mock.js -S (产生随机数据）
npm i axios -S (发送Ajax请求)

2. 使用Mock.js

首先创建一个mockAjax.js的文件，里面引入axios，以及做一些必要的配置

import axios from 'axios'
const requests = axios.create({
  baseURL: '/mock',
  timeout: 5000
})

// 请求拦截器
requests.interceptors.request.use((config) => {
  nProgress.start()
  return config
})

// 响应拦截器
requests.interceptors.response.use(
  (res) => {
    nProgress.done()
    return res.data
  },
  (error) => {
       return Promise.reject(new Error('fail'))

  }
)
export default requests

接着，创建一个MockSever.js文件,记录数据模板并生成模板数据

// 引入mockjs模块
import Mock from 'mockjs'
// 引入banner的json数据
import banner from '@/mock/banner.json'
// mock数据：第一个参数请求地址，第二个参数：请求数据（也就是导入的json数据）
Mock.mock('/mock/banner', { code: 200, data: banner })

然后创建一个存储json数据的banne.js文件，存入数据，如下:

[
	{
		"id": "1",
		"imgUrl": "/images/banner1.jpg"
	},
	{
		"id": "2",
		"imgUrl": "/images/banner2.jpg"
	},
	{
		"id": "3",
		"imgUrl": "/images/banner3.jpg"
	},
	{
		"id": "4",
		"imgUrl": "/images/banner4.jpg"
	}
]

最后，在main.js文件里引入MockSever.js

// 引入MockServer.js----mock数据（模拟）
import '@/mock/mockServer'

进行完以上操作后，就能正常使用模拟数据了！！