什么是mock.js
在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。
安装mock.js和axios
npm install mockjs --save
npm install axios --save
创建mock.js文件，引入
在根目录下创建mock文件夹，并在该文件夹下创建mock.js。
目录结构如下
然后mock.js中写入以下代码：
import Mock from 'mockjs' //引入mock.js模块
const Random = Mock.Random;
let data={
'Boolean': Random.boolean, // 可以生成基本数据类型
'Name': Random.cname(), // 可以生成随机中文名
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
}
Mock.mock('/mock/test','post',data);
在main.js中全局引入axios和mock.js添加以下代码
import Axios from 'axios'
require('./mock/mock.js') //引入mock.js
Vue.prototype.$http = Axios //将axios挂载到根实例Vue的原型上，可以用this.$http去请求
最后在test.vue文件中添加以下代码
<template>
<div >
</div>
</template>
<script>
export default {
data(){
return{
}
},
created(){
this.getData()；
},
methods:{
getData(){
this.$http.post('/mock/test').then((res)=>{
console.log(res)
})
}
}
}
</script>
然后就可以看到效果啦！
以上就是mock.js在vue中的应用演示，更多玩法请参考mock.js官方文档
