Vue笔记：使用 mock.js 模拟数据

在我们的项目实际开发过程中，后端的接口往往是较晚才会提供出来，并且还要写接口文档，如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了，mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js，前端调试可以模拟后台接口调用，返回我们定义的数据，解放了前后端开发的屏障。使用 mock.js 的过程如下：

1. 安装 mock.js 到项目。

npm intsall mockjs --save-dev

2. 在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 就会拦截对应的请求，并返回我们定义的数据了。

posted on 2018-08-23 21:23 朝雨忆轻尘阅读(1570) 评论(1) 编辑收藏举报