mock.js模拟ajax数据请求

在我们开发过程中存在着前端页面ui完成了，但是没有接口进行联调数据的情况，现在介绍一下用mock.js来完成数据的请求。这样在后期我们的后台接口完成后只需要更改请求的接口名字即可！前提是你的模拟字段名和后台的保持一致。现在来描述一个我在开发中用的方法，目前我认为叫简单的，没有大神们的那么复杂（配置webpack和借助node里面的express来模拟）

1. 下载mockjs包

cnpm i mockjs -D

2.创建一个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}”}