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')