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>