学习要点：
利用mockjs就是经过mock模拟服务器响应，要在项目当中拦截请求而且用mockjs返回数据。通常是经过webpack下devServer的before属性作拦截
步骤：
1、前期准备工作
1.1、创建Vue项目
vue create mock-demo
1.2、安装依赖
//使用axios发送 ajax
cnpm install axios --save
//使用mockjs产生随机数据
cnpm install mockjs --save-dev
//使用json5解决json文件,无法添加注释问题
cnpm install json5 --save-dev
2、配置mock以及devServer拦截
2.1、进入Vue项目文件夹
2.2、创建mock文件夹，在mock文件夹下建立index.js
mock/index.js的代码如下
const Mock = require('mockjs')
module.exports = function (app) {
if (process.env.MOCK == 'true') { //此处设置了一个MOCK开关，只需在.env.development里配置MOCK = true/false
// node中的express框架
// 参数1： 接口地址；参数2：服务器处理函数
app.use('/user/userInfo', (req, res) => { //
// 通过Mock 随机生成一个对象
var data = Mock.mock({
id: '@id()',
username: '@cname()',
date: '@date(yyyy-MM-dd)',
description: '@paragraph()',
email: '@email()',
'age|18-40': 0
})
// console.log(data)
// 将模拟的数据转成json格式返回给浏览器
res.json(data)
})
}
}
2.3、在vue.config.js进行配置如下
module.exports = {
devServer: { //devServer是一个webpack插件，只能用于开发环境
// devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
before: require('./mock/index.js')
}
}
2.4、App.vue中代码
<template>
<div>Hello</div>
</template>
<script>
import axios from 'axios'
export default {
created() {
axios.get('/user/userInfo').then(result=>{ //发送对于/user/userInfo接口的请求，最终会被mock提前拦截
console.log('mock数据↓');
console.log(result.data);
})
}
}
</script>
<style>
</style>
3、运行查看结果
3.1、运行代码
npm run serve
//查看http://localhost:8080/，会看到返回的结果为一个对象，对象的属性为mock生成的假数据
