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

---

做者：朝雨忆轻尘
出处：https://www.cnblogs.com/xifengxiaoma/ 
版权全部，欢迎转载，转载请注明原文做者及出处。