vue中使用mock.js，模拟接口返回数据

vue中使用mock.js，模拟接口返回数据

在vue项目中使用mock.js，使用axios发送请求，模拟后台接口，返回数据

一、安装

npm install mockjs  --save

二、引入

 require ('./mock')

三、创建项目文件目录

在src下新建mock文件夹，添加index.js文件，建议给每个模块要使用的mock数据按模块单独创建文件夹，在文件夹中再写mock数据文件，例如user模块中使用的所有接口要使用的mock放到user文件夹下的index文件中。

mock/index.js

import Mock from 'mockjs'
//将mock数据文件引入
import users from './demo/index'

Mock.mock('/user/methods=?getData',users.getData);
export default Mock

四、配置mock数据

这里以demo/index.js中的数据配置为例

import Mock from 'mockjs'
const users = {};
Mock.mock(users.getData, {
        "code": 0,
        "data": {
          "fullName": "@CNAME", // 随机生成中文人名
          "userId": 1000234234001,
          "username": "zhangsan"
        },
        "msg": "success"
    })

export default users

五、发送请求，测试数据

  this.$axios.get('/user/methods=?getData').then(res=>{
            console.log( res.data);
        });

返回输出结果：

六、小结

整个过程就是这样子啦，关于mock.js更深入的了解可以在mock官网深入了解哦。
mock官网