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')
来源：博客园
作者：小白咚
链接：https://www.cnblogs.com/fdxjava/p/11629770.html