2021-06-06 在vue中简单使用mock.js

在vue项目使用

package.json中引入开发时依赖

"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^2.6.11",
  "vue-router": "^3.2.0",
  "axios": "^0.19.0",// 用来测试http请求
  "mockjs": "^1.1.0" // 拦截请求
},

新建文件mock.js，内容如下

import Mock from 'mockjs'

const arr=['momo','yanzi','ziwei']
const obj={
  'host':'www.baidu',
  'port':'12345',
  'node':'selector'
}

Mock.mock('http://123.com',{
  'firstName|3':'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。
  'lastName|2-5':'jiang',//重复jiang这个字符串 2-5 次。
  'big|+1':0, //属性值自动加 1，初始值为 0
  'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
  'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
  'likeMovie|1':Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
  'friend1|1':arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
  'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
  'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
  'life1|2':obj,//从属性值 obj 中随机选取 2 个属性
  'life1|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
  'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
})

//延时400s请求到数据
Mock.setup({
  timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
  timeout: '200-600'
})

如何在vue组件中测试

<script>
// 引入上面的js文件
import '../mock.js'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted () {
    const url = 'http://123.com'
    this.$axios.get(url)
      .then(response => {
        console.log(response.data)// 此处可看见mock返回的模拟数据
      })
      .catch(error => {

      })
  }
}
</script>

在vue组件中测试删除操作

/*模拟删除数据的方式*/
const arr=[
  {name:'fei',age:20,id:1},
  {name:'liang',age:30,id:2},
  {name:'jun',age:40,id:3},
  {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com','delete',function(options){
  const id = parseInt(options.body.split("=")[1])//获取删除的id
  let index;
  for(let i in arr){
    if(arr[i].id===id){//在数组arr里找到这个id
      index=i
      break;
    }
  }
  arr.splice(index,1)//把这个id对应的对象从数组里删除
  return arr;//返回这个数组,也就是返回处理后的假数据
})

this.$axios.delete('http://www.bai.com', {
  data: {  // 请求参数放在请求体
    id: 2
  }
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {

  })

结束！

具体mockjs的配置规则，遇到问题找文档，能配置需要的数组和对象就可以