Vue3——使用Mock.js

1、Mock 介绍

Mock 英文解释：模拟的，也就是模拟的数据。

作为一名前端人员我们通常会遇到这 2 种情况：

1. 工作中等着和后端人员调试接口，但是后端接口写的太 TMD 慢了，实在等不及了。
2. 只会写前端，不会写后端。需要后端接口提供测试数据。

那有了 Mock 之后，前端人员就有了测试数据，然后就可以愉快地进行开发和测试了。所以，说白了 Mock 就是一个像后端一样可以提供模拟数据的工具。在没有 Mock 之前，大多数人一般都是这样获取模拟数据的：提供一个 json 文件，里面都是死数据

[{"id":1001,"name":"Tom","age":18},{"id":1002,"name":"李白","age":21},{"id":1003,"name":"杜甫","age":22}]

然后请求本地 json 文件：

<scriptsetup>import{ref,onMounted}from'vue'onMounted(()=>{getUserList()})constuserList=ref([])constgetUserList=async()=>{//直接请求本地JSON文件constresponse=awaitfetch('/src/mock/json/user.json',{headers:{'Cache-Control':'no-cache'}})userList.value=awaitresponse.json()}</script><template><divclass="main-container"><h1>用户列表</h1><el-tableborder:data="userList"style="width:400px"><el-table-columnprop="id"label="id"/><el-table-columnprop="name"label="姓名"/><el-table-columnprop="age"label="年龄"/></el-table></div></template>

这种情况虽然也能模拟后端接口数据，但数据不是动态的。比如无法模拟分页数据等动态接口行为。

所以我们需要在项目中安装 Mock 工具，帮助我们模拟动态接口行为。

2、Vue 项目中使用 Mock

2.1、安装使用 Mock

安装依赖：

npminstallmockjs --save-dev

在项目中新建 mock 文件夹，然后新建 /api/index.js 文件，创建 Mock 服务：

importMockfrom'mockjs'//模拟用户列表的接口Mock.mock('/api/users','get',{'list|10':[{'id|+1':1,'name':'@cname','age|18-60':1}]})

在 main.js 中导入 mock

import'./mock/api/index.js'

在组件中使用 Mock 数据：

<scriptsetup>import{ref,onMounted}from'vue'importaxiosfrom'axios'onMounted(()=>{getUserList()})constuserList=ref([])constgetUserList=async()=>{constres=awaitaxios.get('/api/users')userList.value=res.data.list}</script><template><divclass="main-container"><h1>用户列表</h1><el-tableborder:data="userList"style="width:400px"><el-table-columnprop="id"label="id"/><el-table-columnprop="name"label="姓名"/><el-table-columnprop="age"label="年龄"/></el-table></div></template>

2.2、Mock基础用法

Mock.js 使用特定的语法规则来定义模拟数据的结构，语法格式为：

'name|rule':value

• name：属性名
• rule：生成规则（可选）
• value：属性值

1. 字符串

// 生成 1-5 个随机中文字符'name|1-5':'@cword'// 生成 5 个随机英文字符'code|5':'@word'

2. 数字

// 生成 30-100 之间的整数'age|30-100':1// 生成带小数的浮点数（整数部分30-100，小数部分1-2位）'score|30-100.1-2':1// id 自增（每次+1）'id|+1':100

3. 布尔值

// 50% 概率为 true'isActive|1':true// 1/3 概率为 true，2/3 概率为 false'isAdmin|1-2':true

4. 对象

// 从对象中随机选取 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 提供了丰富的占位符来生成特定格式的数据：

3、Mock案例

3.1、用户登录

//模拟登录接口Mock.mock('/api/login','post',(options)=>{const{username,password}=JSON.parse(options.body)if(username==='root'&&password==='123456'){return{status:200,message:'登录成功',token:'@www.123'}}else{return{status:401,message:'用户名或者密码错误'}}})

//登录constlogin=async()=>{constres=awaitaxios.post('/api/login',{username:'root',password:'123456'})console.log(res.data)}

3.2、新增用户

// 拦截 POST 请求Mock.mock('/api/user/create','post',(options)=>{constbody=JSON.parse(options.body)return{'code':200,'message':'success','data':{'id':'@id','name':body.name,'createTime':'@now'}}})

3.3、分页数据

Mock.mock('/api/items','get',(options)=>{constpageSize=Number(options.query.pageSize)||10;// 每页大小，默认为10constpage=Number(options.query.page)||1;returnMock.mock({'code':200,'message':'success','data':{'total':100,[`list|${pageSize}`]:[{'id|+1':(page-1)*pageSize+1,'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_ENV==='development'){import('./mock');}