不难懂-----Mock基本使用
一、mock解决的问题
开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集
二、mock优点
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
通过随机数据,模拟各种场景。
3、开发无侵入
不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型,支持自定义函数和正则。
7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
三、mock的基本使用
1、安装mockJS
cnpm install mockjs -S
2、使用mockJS(mock/index.js)
import Mock from "mock";
3、官方文档
https://github.com/nuysoft/Mock/wiki/Syntax-Specification
4、Mock.mock
Mock.mock([rurl],[rtype],[template|function(options)])
这里的参数都是可选:
rurl(可选)。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /shoopList
rtype(可选)。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template(可选)。
表示数据模板,可以是对象或字符串。例如 { ‘data|1-10’:[{}] }
function(options)(可选)。
表示用于生成响应数据的函数。
options:指向本次请求的 Ajax 选项集
5、模拟数据接口
//定义数据 const data = Mock.mock({ "data|20": [{ "goodsId|+1": 1, "goodsName": "@ctitle(10)", "goodsTel": /^1(5|3|7|8)[0-9]{9}$/, "goodsAddress": "@county(true)", "goodsLogo": "@Image('200x100', 'EasyMock')", }] }) //模拟数据接口 Mock.mock(/\/shoopList/,"post",function(options){ console.log(options); return data })
/*
输出的options的值为
url:"请求的地址"
type:"请求的类型"
body:post提交的数据
*/
6、在main.js中引入mock/index.js
import "../src/utils/mock";
7、例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | // apis/shop.js const Mock = require( "mockjs" ); let data = Mock.mock({ "data|50" :[ { "shopId|+1" : 1, "shopName" : "@ctitle(10)" , "shopTel" : /^1(5|3|7|8)[0-9]{9}$/, "shopAddress" : "@county(true)" , "shopStar|1-5" : "★" , "salesVolume|30-1000" : 30, "shopLogo" : "@Image('100x40','#c33', '#ffffff','小北鼻')" , "food|7" :[ { "foodName" : "@cname(5)" , "foodPic" : "@Image('100x40','#c33', '#ffffff','小可爱')" , "foodPrice|1-100" :20, } ] } ] }) let dataList = data.data; function currentPage(page,limit){ var arr = dataList.filter((item,index)=>{ return index<(page*limit) && index>=(page-1)*limit }) return arr; } const getShopPage = (config)=>{ let {page,limit} = pathParams(config.url.split( "?" )[1]); return { data:currentPage(page,limit), page:Math.ceil(dataList.length/limit) }; } const modifyShop = (config)=>{ let obj = pathParams(config.body); let page = obj.page; delete obj.page; dataList[obj.shopId-1] = {...dataList[obj.shopId],...obj}; console.log(dataList[obj.shopId]) return currentPage(page,8) ; } export default { getShopPage, modifyShop } import Api from "../api/shop" ; import Mock from "mockjs" //mock/index.js //分页 Mock.mock(/\/getShopPage/, "get" ,Api.getShopPage) //修改数据 Mock.mock(/\/ModifyShop/, "post" ,Api.modifyShop) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用