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}"}