Vue笔记：使用 mock.js 模拟数据
在我们的项目实际开发过程中，后端的接口往往是较晚才会提供出来，并且还要写接口文档，如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了，mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js，前端调试可以模拟后台接口调用，返回我们定义的数据，解放了前后端开发的屏障。使用 mock.js 的过程如下：
1. 安装 mock.js 到项目。
npm intsall mockjs --save-dev2. 在src目录下建立文件夹mock，mock文件夹下建立mock.js文件，代码如下：
import Mock from 'mockjs'; // es6语法引入mock模块
export default Mock.mock('http://localhost/user', { // 输出数据
'name': '@name', // 随机生成姓名
'age|1-10': 5
// 其他数据
});3. 在 vue 组件中引入。
import mock from './mock/mock.js';4. 请求接口, 如使用axios发送请求。
computed:{
created(){
Vue.prototype.$http.get('http://localhost/user')
.then(res => {
console.log(res.data);
this.msg=res.data.name;
console.log(this.msg)
})
}
}这样在发送请求的时候，mock 就会拦截对应的请求，并返回我们定义的数据了。
作者：朝雨忆轻尘 出处：https://www.cnblogs.com/xifengxiaoma/ 版权所有，欢迎转载，转载请注明原文作者及出处。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读