1. 为什么要用mock.js？
在实际开发过程中，后端开发人员编写的接口往往都是更后才会编写完成，并且他们还需要编写对应的接口文档，调试，环境配置等等一系列操作。
此时，作为前端开发人员，一直等待后台开发人员的接口与接口文档才做页面的调试，项目整体进度将会推迟。
所以，我们前端开发人员需要自力更生，模拟后台返回的数据 => 缩短前端项目的研发周期，让前端不用等待后台接口
2. 什么是 Mock.js
一个用于 生成随机数据，拦截 Ajax请求的第三方包。
基于node平台的一款生成随机数据的资源包。
前后端分离（mvvm）过程中优秀的模拟接口API的工具。
3. 在 vue 中使用 Mock.js的准备工作
项目安装
npm install mockjs
- 项目中新建mock/index.js文件
//引入mock模块 import Mock from 'mockjs'
将mock文件在main.js中导入
import Vue from 'vue' import App from './App.vue' import './mock/index.js' Vue.config.productionTip = false new Vue({ render:h => h(App), }).$mount('#app')
- mock生成随机数据
4. Mock.js 生成不同数据类型(常用的)
- 生成指定次数字符串
import Mock from 'mockjs' const data = Mock.mock({ "string|4": "哈哈" })
- 生成指定范围长度字符串
const data = Mock.mock({ "string|1-8":"哈哈" })
- 生成一个随机字符串
const data = Mock.mock({ "string":"@cword" })
- 生成指定长度和范围
const data = Mock.mock({ string:"@cword(1)" str :"@cword(10,15)" })
- 生成标题和句子
const data = Mock.mock({ title:"@ctitle(8)" sentence:"@csentence" })
- 生成指定长度的标题和句子
const data = Mock.mock({ title:"@ctitle(8)" sentence:"@csentence(50)" })
- 生成指定范围的
const data = Mock.mock({ title:"@ctitle(5,8)" sentence:"@csentence(50,100)" })
- 随机生成段落
const data = Mock.mock({ content:"@cparagraph()" })
- 生成指定数字
const data = Mock.mock({ "number|80":1 })
- 生成范围数字
const data = Mock.mock({ "number|1-99":1 })
- 随机生成标识（自增id）
const data = Mock.mock({ id:"@increment" })
- 随机生成姓名-地址-身份证
const data = Mock.mock({ name:"@cname()" idCard:"@id()" address:"@city(true)" })
5. 随机生成图片，时间
- 生成图片：
@image('200x100', '#50B347', '#FFF', '张三') - 参数1：图片大小
[ '300*250','250*250','240*400','336*280' '180*150','720*300','468*60','234*60' '388*31','250*250','240*400','120*40' '125*125','250*250','240*400','336*280' ]
- 参数2：图片背景色
- 参数3：图片前景色
- 参数4：图片格式
- 参数5：图片文字
时间生成
- @Date
- 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)
指定数组返回的参数
- 指定长度：‘date|5’
- 指定范围:‘data|5-10’
const data = Mock.mock({ 'list|50-99':[ { name:'@cname' address:'@city(true)' id:'@increment()' } ] })
6. 拓展（extend）
- 如果上面的这些类型还不能满足你的需要，我们可以使用extend进行扩展，diy你想要的数据，如下：
Mock.Random.extend({ status: function () { const status = ['男', '女', '未知'] return this.pick(status) } }) let myStatus = Mock.Random.status(); let yourStatus = Mock.mock(“@sex”)
7. Mock.js 定义get与post请求
- 定义get请求
Mock.mock('/api/news', 'get', () => { return { code: 0, msg: '发起get请求成功，但数据是mock返回的' } })
- 定义post请求
Mock.mock('/api/news', 'post', () => { return { code: 0, msg: '发起post请求成功，但数据是mock返回的' } })
- 测试代码
import axios from 'axios' export default { async created () { const res = await axios.get('/api/news') console.log(res) const res1 = await axios.post('/api/news') console.log(res1) } }
8. 使用Mock.js拦截和返回随机数据
import Mock from 'mockjs' // 1. 生成总的随机数据 const { list } = Mock.mock({ 'list|40': [{ id: '@increment', title: '@ctitle', content: '@cparagraph(5, 20)', img_url: "@image('200x200', '#CCCCCC', '#FFFFFF', 'NEWS ITEM')" }] }) console.log(list) function getQueryParmas (url, key) { const queryString = url.split('?')[1] const params = queryString.split('&') for (let i = 0; i < params.length; i++) { const param = params[i] const [key1, value] = param.split('=') // ['page', 1] if (key1 === key) { return value } } return null } // 2. 拦截网络请求 // /api/news?page=1&pagesize=10 Mock.mock(/\/api\/news/, 'get', (options) => { const page = parseInt(getQueryParmas(options.url, 'page')) const pagesize = parseInt(getQueryParmas(options.url, 'pagesize')) const start = (page - 1) * pagesize return { code: 0, message: '获取新闻列表成功', list: list.slice(start, start + pagesize), total: list.length } })
9. Mock.js 模块化开发
1. 在mock文件夹下新建modules文件夹，并在文件夹下 新建 users.js 和 books.js
- books.js的代码如下:
export default { '/api/books|get': (options) => { return { code: 0, message: '获取书本列表成功' } }, '/api/books|post': (options) => { return { code: 0, message: '新增书本成功' } } }
- users.js的代码如下:
export default { '/api/users|get': (options) => { return { code: 0, message: '获取用户列表成功' } }, '/api/users|post': (options) => { return { code: 0, message: '新增用户成功' } } }
2. 修改mock/index.js中的代码，如下:
// 1. 导入Mock核心模块对象 import Mock from 'mockjs' // 2. 基础设置，如设置超时时间 Mock.setup({ timeout: 400 }) // 3. 通过webpack提供的require.context方法集成其他模块 const files = require.context('./modules', true, /\.js$/) files.keys().forEach(key => { const item = files(key).default for (const [protocal, handler] of Object.entries(item)) { // console.log(protocal, cb) const [url, method] = protocal.split('|') Mock.mock(new RegExp(url), method, handler) } })
3. 测试代码
const res3 = await axios.get('/api/books?a=1') console.log(res3) const res4 = await axios.post('/api/books') console.log(res4) const res5 = await axios.get('/api/users') console.log(res5) const res6 = await axios.post('/api/users') console.log(res6)
