Mockjs ---封裝簡化

mock--index.js

只向外暴露這一個文件

// 導入擴展函數
import './extends'
// 導入商品模塊
import './goods'

mock--extends.js

擴展文件--自己分裝的數據

// 導入模擬假數據的包
import { Random } from 'mockjs'

// 自定義一個數組--隨機獲取這個數組里邊的值--引用Random
// 創建自定義Mock函數
Random.extend({
  // 自定義函數名：function 函數
  fruit: function () {
    const arr = ['榴蓮', '菠蘿蜜', '椰子', '蘋果', '菠蘿']
    return this.pick(arr)
  }
})

mock--goods.js

商品模塊

// 導入模擬假數據的包
import Mock from 'mockjs'
// 通過Mock.mock()來模擬API接口----GET請求
// eslint-disable-next-line no-undef
Mock.mock('/api/goodslist', 'get', {
  status: 200,
  message: '獲取商品列表成功',
  // 生成5到10條，或者直接data|5條數據
  'data|5-10': [
    {
      // mock自增函數@increment-從1開始
      id: '@increment(1)',
      // 隨機返回中文文字-顯示名字
      name: '@cword(2, 8)',
      // 隨機返回一個自然數
      price: '@natural(2, 10)',
      count: '@natural(100, 999)',
      // 建議使用 data字符串壓縮64格式，你建議url地址請求
      img: '@dataImage(78x78)'
    }
  ]
})
  
  // 通過Mock.mock()來模擬API接口---POST請求
  Mock.mock('/api/addgoods', 'post', function (option) {
  // 這里的option是請求相關的參數
    console.log(option)
    return {
      status: 200,
      message: '添加商品成功'
    }
    /*
    外層的 mock是攔截請求的
    返回參數要想引用函數,需要再次引用mock函數
    return Mock.mock({
        status: 200,
        message: '@cword(2,5)'
    })
    */
  })
  
  // 通過Mock.mock()來模擬API接口----GET請求--請求帶參數--根據id返回商品詳情
  /*
  Mock.mock('/api/getgoods/1', 'get', {
    data: {
      id: 9,
      name: '蘋果',
      price: 2,
      img: '@dataImage(78x78)'
    },
    status: 200,
    message: '獲取商品詳情成功'
  })
  */
  // 動態獲取id---轉義字符
  /*
  Mock.mock(/\/api\/getgoods/, 'get', {
    data: {
      id: 9,
      name: '蘋果',
      price: 2,
      img: '@dataImage(78x78)'
    },
    status: 200,
    message: '獲取商品詳情成功'
  })
  */
  // 獲取傳過來的參數id--使用正則拆分
  Mock.mock(/\/api\/getgoods/, 'get', function (option) {
    console.log(option)
  
    const res = /\/api\/getgoods\/(\d+)/.exec(option.url)
    console.log(res)
    return Mock.mock({
      data: {
      // 轉成數字
        id: res[1] - 0,
        name: '@fruit()', // 調用自定義數組
        price: 2,
        img: '@dataImage(78x78)'
      },
      status: 200,
      message: '獲取商品詳情成功'
    })
  })

然而main.js 不用變

直接導入的index.js

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'

// 導入mock 文件---打開vue ui  安裝axios依賴
import './mock/index.js'
import axios from 'axios'
Vue.config.productionTip = false
// 全局掛載
Vue.prototype.$http = axios
new Vue({
  render: h => h(App)
}).$mount('#app')