Vue3——使用Mock.js

Vue3使用Mock.js1、Mock 介绍2、Vue 项目中使用 Mock2.1、安装使用 Mock2.2、Mock基础用法2.3、常用占位符3、Mock案例3.1、用户登录3.2、新增用户3.3、分页数据4、注意事项4.1、按功能模块维护 Mock 数据4.2、区分开发环境和生产环境1、Mock 介绍Mock 英文解释模拟的也就是模拟的数据。作为一名前端人员我们通常会遇到这 2 种情况工作中等着和后端人员调试接口但是后端接口写的太 TMD 慢了实在等不及了。只会写前端不会写后端。需要后端接口提供测试数据。那有了 Mock 之后前端人员就有了测试数据然后就可以愉快地进行开发和测试了。所以说白了 Mock 就是一个像后端一样可以提供模拟数据的工具。在没有 Mock 之前大多数人一般都是这样获取模拟数据的提供一个 json 文件里面都是死数据[{id:1001,name:Tom,age:18},{id:1002,name:李白,age:21},{id:1003,name:杜甫,age:22}]然后请求本地 json 文件scriptsetupimport{ref,onMounted}fromvueonMounted((){getUserList()})constuserListref([])constgetUserListasync(){//直接请求本地JSON文件constresponseawaitfetch(/src/mock/json/user.json,{headers:{Cache-Control:no-cache}})userList.valueawaitresponse.json()}/scripttemplatedivclassmain-containerh1用户列表/h1el-tableborder:datauserListstylewidth:400pxel-table-columnpropidlabelid/el-table-columnpropnamelabel姓名/el-table-columnpropagelabel年龄//el-table/div/template这种情况虽然也能模拟后端接口数据但数据不是动态的。比如无法模拟分页数据等动态接口行为。所以我们需要在项目中安装 Mock 工具帮助我们模拟动态接口行为。2、Vue 项目中使用 Mock2.1、安装使用 Mock安装依赖npminstallmockjs --save-dev在项目中新建 mock 文件夹然后新建 /api/index.js 文件创建 Mock 服务importMockfrommockjs//模拟用户列表的接口Mock.mock(/api/users,get,{list|10:[{id|1:1,name:cname,age|18-60:1}]})在 main.js 中导入 mockimport./mock/api/index.js在组件中使用 Mock 数据scriptsetupimport{ref,onMounted}fromvueimportaxiosfromaxiosonMounted((){getUserList()})constuserListref([])constgetUserListasync(){constresawaitaxios.get(/api/users)userList.valueres.data.list}/scripttemplatedivclassmain-containerh1用户列表/h1el-tableborder:datauserListstylewidth:400pxel-table-columnpropidlabelid/el-table-columnpropnamelabel姓名/el-table-columnpropagelabel年龄//el-table/div/template2.2、Mock基础用法Mock.js 使用特定的语法规则来定义模拟数据的结构语法格式为name|rule:valuename属性名rule生成规则可选value属性值1. 字符串// 生成 1-5 个随机中文字符name|1-5:cword// 生成 5 个随机英文字符code|5:word2. 数字// 生成 30-100 之间的整数age|30-100:1// 生成带小数的浮点数整数部分30-100小数部分1-2位score|30-100.1-2:1// id 自增每次1id|1:1003. 布尔值// 50% 概率为 trueisActive|1:true// 1/3 概率为 true2/3 概率为 falseisAdmin|1-2:true4. 对象// 从对象中随机选取 2 个属性info|2:{name:cname,age:integer(30,100),gender:pick([男,女])}// 从对象中随机选取 1-3 个属性contact|1-3:{email:email,phone:/1[3-9]\d{9}/,wechat:word(4,16)}5. 数组// 从数组中随机选取 1 个元素fruit|1:[,,,]// 重复数组元素 3-5 次生成新数组tags|3-5:[前端,JavaScript,Vue,React]// 生成包含 10 个对象的数组users|10:[{id|1:100,name:cname,age:integer(18,60)}]2.3、常用占位符Mock.js 提供了丰富的占位符来生成特定格式的数据占位符说明示例boolean随机布尔值true/falseinteger(min, max)随机整数18, 42float(min, max, dmin, dmax)随机浮点数1998.12string(length)随机字符串“fgG”cword(length)随机中文字符“脚手架”ctitle(min, max)随机中文标题“React知否技术”cname随机中文姓名“知否君”email随机邮箱“zhifouqq.com”region随机地区“西北”province随机省份“浙江省”city随机城市“杭州市”county随机区县“滨江区”url随机URL“https://qq.com”date(format)随机日期“2025-06-24”time(format)随机时间“22:31:23”datetime随机日期时间“2025-06-24 22:31:23”image(size, bg, fg, text)随机图片URLhttps://image.com/300x100color随机颜色#ffffff3、Mock案例3.1、用户登录//模拟登录接口Mock.mock(/api/login,post,(options){const{username,password}JSON.parse(options.body)if(usernamerootpassword123456){return{status:200,message:登录成功,token:www.123}}else{return{status:401,message:用户名或者密码错误}}})//登录constloginasync(){constresawaitaxios.post(/api/login,{username:root,password:123456})console.log(res.data)}3.2、新增用户// 拦截 POST 请求Mock.mock(/api/user/create,post,(options){constbodyJSON.parse(options.body)return{code:200,message:success,data:{id:id,name:body.name,createTime:now}}})3.3、分页数据Mock.mock(/api/items,get,(options){constpageSizeNumber(options.query.pageSize)||10;// 每页大小默认为10constpageNumber(options.query.page)||1;returnMock.mock({code:200,message:success,data:{total:100,[list|${pageSize}]:[{id|1:(page-1)*pageSize1,name:cname,age|18-60:1,gender|1:[男,女],email:email,address:county(true),status|1:[正常,禁用],createTime:datetime}]}})});4、注意事项4.1、按功能模块维护 Mock 数据为了方便管理和维护我们可以将不同功能模块的 Mock 数据分别放在不同的文件中。4.2、区分开发环境和生产环境我们只在开发环境中使用 Mock 数据所以可以通过环境变量来控制是否引入 Mock 文件。例如if(process.env.NODE_ENVdevelopment){import(./mock);}