猿创征文｜Mock.js概述及模块化开发实践（一文足矣）

Mock.js概述及模块化开发实践

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 =falsenewVue({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 =['男','女','未知']returnthis.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'exportdefault{asynccreated(){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)functiongetQueryParmas(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
    }}returnnull}// 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的代码如下:

exportdefault{'/api/books|get':(options)=>{return{code:0,message:'获取书本列表成功'}},'/api/books|post':(options)=>{return{code:0,message:'新增书本成功'}}}

• users.js的代码如下:

exportdefault{'/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(newRegExp(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)

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)