mock模拟get和post请求

mock模拟get和post请求

emmm奇奇怪怪的前后端分离开发就需要用到奇奇怪怪的数据接口，先试试mock给偶们提供的好处，记录一下怕以后忘了咋用,嗯·····装axios和mock应该记得，就把主要文件记一下好了

文件目录：

mock/goods.js

// 导入数据模块的包and导入随机数模块
import Mock from 'mockjs'

//创建自定义mock函数,这里大概就是通过函数返回值来实现数据的返回
Mock.Random.extend({
    //自定义函数名：food
    food: function(){
        const arr = ['大辣鸡犬','小辣鸡犬','不大不小的辣鸡犬','70kg辣鸡犬','万能的辣鸡犬','搞事的辣鸡犬']
        return this.pick(arr)
    }
})



// 通过Mock.mock函数模拟get请求
Mock.mock('/api/goodslist', 'get', {
  status: 200,
  message: '获取商品列表成功',
  'data|5-10': [{ // 5-10随机生成5~10个数据
    'id|+1': 0,
    name: '@cword(2,3)', // 生成中文汉字，word生成英文汉字
    price: 10,
    count: 200,
    img: 'https://raw.githubusercontent.com/moon-ice/Typora-source/master/typora202005/15/163649-643563.png'
  }]
})
// 通过Mock.mock函数模拟post请求
Mock.mock('/api/addgoods', 'post', function (option) {
  // 这里的option是请求的相关参数
  console.log(option)

  return Mock.mock({
    status: 200,
    message: '@cword(2)'
  })
})
// 通过Mock.mock函数模拟url带参数的请求
// 方法一：new RegExp('/api/getgoods/.*')作为mock的第一个参
// 方法二：写url正则的时候不需要括号，//api/getgoods/作为mock的第一个参数
Mock.mock(//api/getgoods/, 'get', function (option) {
  console.log(option)

   const res = //api/getgoods/(d+)/.exec(option.url)
//res[0]为//api/getgoods/(d+)/，整条url
  return Mock.mock({
    status: 200,
    message: '获取商品列表成功',
    data: {
      id: res[1],
      name: '@food()',
      price: 0.1,
      count: 100,
      img: '@dataImage(78x78)'
    }
  })
})

mock/index.js

//导入商品模块
import './goods'

//导入各种模块···

App.vue

<template>
  <div id="app">
    <h1>
       啊哈~
    </h1>
    <button @click="getGoodsList">获取商品列表</button>
    <button @click="addGoods">添加商品</button>
    <button @click="getGoodsById(3)">根据ID获取商品信息</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getGoodsList () {
      const { data: res } = await this.$http.get('/api/goodslist')
      console.log(res)
    },
    async addGoods () {
      const { data: res } = await this.$http.post('/api/addgoods', { name: '菠萝', price: 8, count: 550, img: 123 })
      console.log(res)
    },
    getGoodsById (id) {
      axios.get('/api/getgoods/' + id).then(function (resp) {
        console.log(resp)
      })
      // const { data: res } = await this.$http.get('/api/getgoods/${id}')
    }

  }
}
</script>

<style>

</style>