在我们开发过程中存在着前端页面ui完成了，但是没有接口进行联调数据的情况，现在介绍一下用mock.js来完成数据的请求。这样在后期我们的后台接口完成后只需要更改请求的接口名字即可！前提是你的模拟字段名和后台的保持一致。现在来描述一个我在开发中用的方法，目前我认为叫简单的，没有大神们的那么复杂（配置webpack和借助node里面的express来模拟）
- 下载mockjs包
cnpm i mockjs -D
- 创建一个mock.js文件，在里面引入mockjs
let Mock = require('mockjs')- 接着开始写接口，这里我就写一个post，一个get接口
Mock.mock('http://test/mock.com','post',function(options){
console.log(options);
return {"mocktest|4-6":[
{
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1，初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
}
]}
}) Mock.mock('http://test/getmock.com','get',function(options){
console.log(options);
return {"mocktest|4-6":[
{
'name': '@cname', // 中文名称
'id|+1': 88, // 属性值自动加 1，初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
}
]}
}) module.exports = Mock- 现在的mock的接口完成，具体的接口数据怎么配置，可以去看详细的mock官方文档，模拟出你需要的接口字段和数据类型 接着需要在main.js文件里面引入你的mock这个文件页面
require('./assets/mock')- 接着就可以在你的页面使用这个接口来获取对应的数据
getMockMoment(){
this.$http.post('http://test/mock.com',{
params:{
start:1,
end:10
}
}).then(res => {
console.log(res)
})
}, getmocklist(){
this.$http.get('http://test/getmock.com',{
data:{
id:3
}
}).then(res => {
console.log(res)
})
}- 上面的额分别对应着get和post的请求参数的传递，这样助于你自己需要执行对应的增删查改逻辑，在mock接口文件中能够获取到你传入的参数，打印option形参得到结果，参数全部都在body中，接着你可以对应的参数来进行你所需要的逻辑 {url: "http://test/getmock.com", type: "GET", body: "{"id":3}"}