在vuecli3.0之中怎么使用mockjs,做到模拟数据

1,512 阅读3分钟

平时我们模拟假数据并且开一个接口让自己去请求的时候,一般都是使用的http-server,而mockjs也可以帮你实现这个需求,并且可以同时开启多个接口,你在network中也可以看到自己发送的请求,在vuecli3.0中如何使用mockjs,以下是使用步骤

1.首先下载脚手架3.0,并且执行create命令创建出自己的项目并执行npm run serve命令跑起来
2.安装mockjs和axios,为后续的模拟数据做好准备
3.在src文件夹里面创建一个mock.js文件,mock.js文件里的内容如下:

import Mock from 'mockjs'
const Random = Mock.Random
// 登录
//Mock.mock('/api/login', 'post', option => {
//let { username, password } = JSON.parse(option.body)
//return username === 'admin' && password === 'admin'
//})
// 用户数据
const userData = () => {
let users = []
for (let i = 0; i < 10; i++) {
let user = {
  id: i + 1,
  date: Random.date('yyyy-MM-dd'),
  name: Random.cname(),
  address: Mock.mock('@county(true)'),
  phone: Mock.mock(/^1[0-9]{10}$/),
  status: Random.integer(0, 1)
}
users.push(user)
}
 return users
}
Mock.mock('/api/users', userData)
以上就是创建了一个名为'/api/users'的接口,并且写入了假数据,通过mockjs里面的规则生成的数据,自己可以去看看mockjs里面生成假数据的规则生成自己想要的数据

4.在main.js里面导入mock.js和axios

    import './mock'
    import axios from 'axios'
    Vue.prototype.$http = axios

5.在你的初始项目里面,随便找一个vue文件,我用的是app.vue文件,内容如下

export default {
    data() {
        return {
    };
},
methods: {
    getData() {
    this.$http.get("/api/users").then(res => {
        console.log(res, 1111);
        });
    }
},
created() {
    this.getData();
    }
};
以上代码就是发送请求,请求为自己mock.js里面设置的接口,可以在控制台看到自己请求的数据,在network里面也可以看到自己发送的请求

6.如果你想同时发送多个请求,比如你有一个获取users数据的接口和一个获取details数据的接口,你想同时发送两个请求,你可以在src文件夹里面,添加一个api文件夹,里面创建自己获取不同数据的接口文件,可以创建一个users.js和一个details.js文件,这两个js文件的内容可以参照上面的内容去写,注意一下接口的不同就可以(cv一下内容改一下接口名),然后将这两个文件导入进你的mock.js文件,直接import即可,注意一下路劲就没有什么问题,其余的步骤不变

7.如果你想把发送请求的axios抽离出来也可以,单独在src里面添加一个http文件夹,然后在文件夹里面添加一个require.js文件,文件内容为:

/* eslint-disable */
const http = axios.create()
export function fetch(url, params) {
// 封装axios的post请求
return new Promise((resolve, reject) => {
    // promise 用法,自行查阅
    axios
    .post(url, params)
    .then(response => {
        resolve(response.data) // promise相关
    })
    .catch(error => {
        reject(error) // promise相关
    })
})
}

export default {
// 暴露htto_mock方法,即后面页面中用到的方法
http_mock(url, params) {
    return fetch(url, params)
}
}
别忘记在main.js里面引入axios,弄完这个之后,你在哪个页面需要发送请求你直接将该文件引入进哪个页面即可,发送请求的方式也要改变一下 
 request.http_mock("/api/users").then(res => {
  console.log(res);
 });

以上就是完整的操作了,不过也是比较基础的,不够够用了,等你用假数据模拟好数据调用接口测试没有问题,等后台写好接口即可直接改一下接口,换成真实的接口即可,改为真实的接口之后别忘了在main.js里面去掉引入的那个mock.js文件,因为替换完之后已经不需要了,除非还有造假数据的需求。