mock.js模拟ajax数据请求

　　在我们开发过程中存在着前端页面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}"}