Easy Mock 完整使用指南：Mock 数据生成、Swagger 导入与响应式数据实战

后端接口测试【免费下载链接】easy-mockA persistent service that generates mock data quickly and provids visualization view.项目地址https://gitcode.com/gh_mirrors/ea/easy-mock点击查看免费下载Easy Mock 是一个可视化、能够快速生成模拟数据的持久化 Mock 服务。本文以仓库内官方用户指南 views/pages/docs/docs.md 为主线完整覆盖从「创建第一个项目」到「响应式数据 / 自定义响应 / 接口代理」的全部进阶特性并结合 util/mock.js、controllers/mock.js、util/swagger.js 等源码印证底层实现。读完本文你将掌握 Easy Mock 的核心语法、项目创建流程、Swagger 自动化导入、基于_req/_res的动态响应能力以及团队协作与常见问题的排查方案。一、Easy Mock 是什么在传统开发中Mock 数据通常有以下几种实现方式它们各自存在维护成本高、环境依赖重等问题将模拟数据直接写在代码里利用 JavaScript 拦截请求利用 Charles、Fiddler 等代理工具拦截请求。Easy Mock 的定位则是一个可视化、能快速生成模拟数据的持久化服务。你不再需要在代码中硬编码假数据也不必依赖第三方抓包工具而是通过 Web 界面在线维护接口定义URL、Method、返回模板每次请求都能拿到基于 Mock.js 语法实时生成的随机数据且接口定义会被持久化保存。从仓库结构看Easy Mock 前端基于 Vue 构建见 views 目录后端服务则由 controllers、models、proxy 三层组成接口数据存储在 MongoDB 并通过 Redis 做缓存加速详见 controllers/mock.js 中redis.set(redisKey, ..., EX, 60 * 30)的 30 分钟缓存逻辑。二、快速开始2.1 演示项目所有新注册的用户都会自动创建一个演示项目项目中已内置覆盖大部分常见场景的演示接口点击每个接口旁的小箭头可以展开查看接口详细信息点击预览按钮即可直接看到返回的 Mock 数据。如果你已经掌握了 Easy Mock 的使用可以将其删除。演示项目中内置的接口在源码 util/mock.js 中定义包括GET /query根据请求参数返回指定数据响应式数据的入门示例POST /upload演示 POST 接口返回随机数据GET /restful/:id/list演示 Restful 风格 MockGET /proxy演示接口代理真实请求一个线上地址并透传返回GET /mock带随机数据的 MockGET /演示自定义响应_res。2.2 基础语法Easy Mock 的数据编辑器完全采用Mock.js 语法支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等同时支持扩展更多数据类型、自定义函数和正则。下面展示部分基础语法{ string|1-10: ★, string2|3: ★★, number|1: 202, number2|1-100.1-10: 1, boolean|1: true, regexp: /[a-z][A-Z][0-9]/, absolutePath: /string /user/name, user: { name: demo }, object|2: { 310000: 上海市, 320000: 江苏省 }, array|1: [ AMD ] }上述模板每次请求会生成如下随机数据结果随请求发生改变{ string: ★, string2: ★★★★★★, number: 202, number2: 71.73566, boolean: false, regexp: qS8, absolutePath: ★ demo, user: { name: demo }, object: { 310000: 上海市, 320000: 江苏省 }, array: AMD }语法说明string|1-10表示从「字符串重复 1 到 10 次」中随机取一个结果number|1表示每次请求自增number2|1-100.1-10表示生成 1 到 100 之间、小数点后 1 到 10 位的浮点数regexp直接支持正则生成/string /user/name为绝对路径引用可引用模板中其他字段的值。2.3 数据占位符掌握数据占位符可以让随机数据更真实。数据编辑器中输入开头的占位符即可调用 Mock.js 内置方法{ string|1-2: string, integer: integer(10, 30), float: float(60, 100, 2, 2), boolean: boolean, date: date(yyyy-MM-dd), datetime: datetime, now: now, url: url, email: email, region: region, city: city, province: province, county: county, upper: upper(title), guid: guid, id: id, image: image(200x200), title: title, cparagraph: cparagraph, csentence: csentence, range: range(2, 10) }每次请求的生成结果示例如下{ string: b(V, integer: 29, float: 65.93, boolean: true, date: 2013-02-05, datetime: 1983-09-13 16:25:29, now: 2017-08-12 01:16:03, url: cid://vqdwk.nc/iqffqrjzqa, email: u.ianefhcmc.bv, region: 华南, city: 通化市, province: 陕西省, county: 嵊州市, upper: DGWVCCRR TLGZN XSFVHZPF TUJ, guid: c09c7F2b-0AEF-B2E8-74ba-E1efC0FecEeA, id: 650000201405028485, image: http://dummyimage.com/200x200, title: Orjac Kwovfiq Axtwjlop Xoggxbxbw, cparagraph: 他明林决每别精与界受部因第方。习压直型示多性子主求求际后世。严比加指安思研计被来交达技天段光。全千设步影身据当条查需府有志。斗中维位转展新斯克何类及拉件科引解。主料内被生今法听或见京情准调就品。同六通目自观照干意音期根几形。, csentence: 命己结最方心人车据称温增划眼难。, range: [2, 3, 4, 5, 6, 7, 8, 9] }从源码 views/pages/editor/snippets/mock.snippets 可以看到Easy Mock 将 Mock.js 占位符按base / date / image / color / text / name / web / address / helper / miscellaneous全部分类收录并以em.*前缀提供编辑器语法提示见下文「语法提示」。2.4 创建第一个项目第一步点击蓝色按钮。不管你在哪个页面这个蓝色按钮都会固定在那点击后进入新建项目表单。关键参数如下参数描述归属如果你是创建团队项目一定要记得选团队项目基础 URL没有特殊要求尽量简短表意。例/nbaSwagger Docs API如果有详见本文「Swagger」一节在 controllers/project.js 的create方法中可以看到项目创建时会校验name、url必须以/开头等字段若填写了swagger_url则立即调用SwaggerUtil.create自动生成接口。第二步点击进入刚刚创建的项目。第三步点击创建接口。在数据编辑器中输入em.demo.all并按下 Tab 键编辑器会自动基于 Mock.js 语法展开一份覆盖所有类型base、date、image、color、text、name、web、address、helper、miscellaneous的完整数据对象模板点击「创建完成」即可。em.demo.all的完整展开内容定义在 views/pages/editor/snippets/mock.snippets 中它把所有占位符分类组织成对象方便你在此基础上按需删改。最后一步预览接口。每个接口旁边都对应多个操作按钮点击预览按钮即可看到该接口实时生成的 Mock 数据。Easy Mock 对接口的 Method 限定为get / post / put / delete / patch五种见 controllers/mock.js 的create方法校验逻辑URL 必须以/开头同一项目内「URL Method」不能重复。三、进阶指南3.1 善用工作台一旦项目变多并且需要在各个项目中来回切换时请一定使用工作台。虽然搜索也能解决问题但仍有多余步骤。更快捷的方式是点击项目上的小星星将其加入到工作台中项目结束后用同样的方式将其移除。从源码看工作台能力由UserProjectProxy维护updateWorkbench接口接收statusboolean更新项目的is_workbench标记而项目列表接口在typeworkbench时只查询被标记的项目见 controllers/project.js。3.2 Swagger效率一直是 Easy Mock 关注的问题。Easy Mock 支持基于 Swagger 创建项目以节省手动创建接口的时间Swagger 文档更新后也能通过更新操作重新生成接口并且这个过程是智能的——只对修改过的接口进行更新。基于 Swagger 创建的项目有以下几种能力创建时会匹配状态为200的响应数据生成相应的 Class Model节省创建实体类的时间支持查看请求参数和响应参数前提是 Swagger 文档有定义这些字段。源码层面util/swagger.js 会解析 Swagger 文档中的paths遍历每个 path 下的get/put/post/delete/options/head/patch/trace操作取responses[200].example或responses[default].example作为 Mock 模板mode同时把parameters与完整的response_model一并写入接口记录对于已存在的接口会通过比对字段结构util.flatten展平后的键集合差异判断是否发生了修改从而实现「只更新修改过的接口」。获取 Swagger Docs API。进入文档首页获取文档接口地址。下面以 Swagger 官方演示项目 Petstore 为例文档首页中红框标注部分就是文档接口地址在创建项目时把它填写到Swagger Docs API一栏即可。由于版本问题不同版本的文档首页样式可能不同直接复制 API 地址即可。如果不确定接口地址是否正确可以将地址复制到浏览器打开看看内容是否与以下结构相似不同版本接口内容不同但可以大致判断{ apiVersion: 1.0, swaggerVersion: 1.2, info: { description: api list, termsOfServiceUrl: http://www.example/api-docs, title: api }, apis: [ { description: 用户相关, path: /user, position: 0 }, { description: 图片相关, path: imgs, position: 0 } ] }如果创建项目之后没有接口数据那么该接口文档可能存在一些问题例如数据对象交叉引用建议对照 OpenAPI 规范OpenAPI Specification 1.2 / 2.0 / 3.0检查并修改文档。接口的更新同步对应 controllers/project.js 中的syncSwagger接口它会重新拉取swagger_url并调用SwaggerUtil.create若存在无法解析的接口会通过syncErrorURLs返回提示。3.3 API 自动生成如果你想进一步提高效率可以通过 Easy Mock CLI 自动创建诸如api.js这样的前端请求文件。服务端为此提供了按项目 ID 批量拉取接口数据的接口见 controllers/mock.js 中的getAPIByProjectIds源码注释明确标注「Easy Mock CLI 依赖该接口获取接口数据」传入project_ids逗号分隔即可返回各项目的完整接口定义。3.4 响应式数据虽然无法做到数据联动但借助响应式数据也能玩出许多新花样在数据编辑器中可以为某个属性指定一个Function。在 Function 中 Easy Mock 提供了_req 对象使得我们可以通过请求对象编写逻辑实现响应式数据。例如下面的定义请求接口时如果传入的name为nk那么name将会是nk拼接随机名字的结果{ success: true, data: { default: hah, _req: { method: GET, url: /mock/599e9e962f17da111139eaf9/example/query, header: { connection: keep-alive, accept: application/json, */*, content-type: application/json, accept-encoding: gzip, deflate, accept-language: zh-CN,zh;q0.8,en;q0.6,zh-TW;q0.4,ja;q0.2, // ... } }, name: nk_Melissa Hernandez } }在 util/mock.js 的演示示例中可以看到标准写法例如GET /query接口的定义为function({ _req }) { return _req.query.name || this.default }而POST /upload则同时使用了_req.body与Mock对象。Function 参数说明对象描述MockMock 对象_req.url获得请求 url 地址_req.method获取请求方法_req.params获取 url 参数对象_req.querystring获取查询参数字符串(url中?后面的部分)不包含 ?_req.query将查询参数字符串进行解析并以对象的形式返回如果没有查询参数字符串则返回一个空对象_req.body当 post 请求以x-www-form-urlencoded方式提交时我们可以拿到请求的参数对象_req.path获取请求路径名_req.header获取请求头对象_req.originalUrl获取请求原始地址_req.search获取查询参数字符串包含 ?_req.host获取 host (hostname:port)_req.hostname获取 hostname_req.type获取请求 Content-Type不包含像 charset 这样的参数_req.protocol返回请求协议_req.ip请求远程地址_req.get(field)获取请求 header 中对应 field 的值_req.cookies(field)获取请求 cookies 中对应 field 的值从源码看_req的实现位于 controllers/mock.js 的getMockAPI它重写了Mock.Handler.function将options.Mock注入 Mock 对象、options._req注入当前请求对象ctx.request并通过util.params(mockUrl, mockURL)见 util/index.js基于path-to-regexp解析填充_req.params同时把ctx.cookies.get绑定为_req.cookies方法。而_req.params与 Restful 路径参数、接口代理的路径参数解析复用同一套工具。3.5 响应式数据注意事项响应式数据提高了数据的可扩展性和灵活性但同时也带来了一些问题例如代码中出现死循环——这些问题往往都是致命的因此 Easy Mock 做了一些限制如果生成数据的时间超过 1s系统将会返回一个timed out的错误信息此时应检查代码是否出现了异步操作或死循环无法在函数中使用setInterval、setTimeout等方法进行异步操作。这两条限制在源码中有明确对应生成数据时使用vm2的VM沙箱执行并设置timeout: 1000毫秒同时先执行一次Mock.mock(new Function(return mode)())对模板做数据验证注释中明确指出这是为了「检测 setTimeout 等方法」——一旦模板中定义了setTimeout这类异步或循环调用验证阶段就会触发超时保护见 controllers/mock.js。3.6 自定义响应当定义的数据结构中包含_res 字段时会进入一个特殊逻辑可以给返回的请求添加一些定制信息字段描述status可以定制返回的 http status code默认是 200cookies可以定制需要设置的 cookie暂时不支持设置过期时间等headers可以定制返回的 response 的 headerdata如果有这个字段会以此数据直接覆盖整个返回的数据并且此处不支持 mock 的语法如果 _res.status 的值为 200则不会覆盖默认定义的 mock 数据示例定义{ success: true, data: { default: hah }, _res:{ status: 400, data: { success: false }, cookies: { test: true }, headers: { Power: easy-mock } } }以此定义为例当_res.status为 400 时用户端接收到的响应将会是_res.data中定义的数据返回 status code 为 400响应 header 中包含名为Power的值并为浏览器设置一个名为test的 cookie。当你想要返回正常的 mock 数据时把_res.status修改为 200或者将整个_res删掉即可。对应实现同样在 controllers/mock.js模板执行后若结果包含_res则依次应用ctx.status、ctx.cookies.set、ctx.set并且当_res.status非 200 且存在_res.data时用其覆盖返回体最后从返回数据中删除_res字段。演示项目中GET /接口正是这样一个_res示例在 test/controllers/mock.test.js 的/用例中可以看到其断言响应 status 为 400、header 含power: easy-mock。四、Tips 提高效率4.1 快捷键在任意页面按下键盘shift?会出现一个快捷键提示框目前 Safari 不支持如果没有弹出可切换输入法再试。左侧的快捷键是全局的不同页面有不同的快捷键可以到各个页面自行尝试。4.2 语法提示数据编辑器支持语法提示输入em.即可获得基于 Mock.js 分类的提示共分为em.baseem.dateem.imageem.colorem.textem.nameem.webem.addressem.helperem.miscellaneousem.demo.all这些分类对应的完整代码片段定义在 views/pages/editor/snippets/mock.snippets其中em.demo.all是覆盖全部分类的综合示例模板。此外数据编辑器还支持按下shiftf在提示列表中搜索。4.3 批量操作目前接口删除、接口下载支持批量操作只需在接口旁勾选上执行相应操作即可。对应服务端实现为 controllers/mock.js 的delete按ids数组批量删除与exportAPI使用 JSZip 将选中接口的mode打包为Easy-Mock-API.zip下载。4.4 移动端调试步骤利用 Charles、Fiddler 等代理工具抓取客户端中包含页面入口的接口在 Easy Mock 上创建一个接口将刚刚抓取的接口数据复制到数据编辑器中修改页面入口为本地入口然后保存——注意要用本地iplocalhost在手机上是无效的复制接口地址回到代理工具点击最开始抓取的接口将其代理成刚刚复制的地址即可。五、特性与高级场景5.1 接口代理不难发现演示项目下有一个地址为/proxy的接口在数据编辑器中只填写了一个真实接口地址预览时就可以把这个接口的数据代理回来向/proxy传入的参数query 和 body都会被透传过去。并且如果代理接口地址为http://example.com/api/user/:idmock 接口地址为/api/user/:id那么这个id也会被正确解析出来。实现要点controllers/mock.js当接口的mode以http(s)开头时进入代理分支Easy Mock 会用path-to-regexp把 mock 路径中的:id等参数编译进目标 URL并把query、body、原始请求头透传给目标服务。注意接口代理的超时时间为 3s源码中axios的timeout: 3000超时或失败会返回错误信息如time out、接口请求失败。5.2 JSONP为了满足更多的使用场景Easy Mock 支持 JSONP。不管是什么接口只需要在请求中加入jsonp_param_name参数即可// .../account/updSex?jsonp_param_namecallbackcallbacksuccess一般情况下 JSONP 参数名多为callback但为了满足更多情况通过jsonp_param_name指定回调参数名。源码中jsonpCallback query.jsonp_param_name (query[query.jsonp_param_name] || callback)当命中时响应以text/javascript类型返回${jsonpCallback}(${JSON.stringify(apiData)})并在 test/controllers/mock.test.js 的jsonp用例中得到验证。5.3 协同编辑如果是多人开发可以邀请小伙伴一起编辑 Mock。项目中的成员皆能邀请或移除成员作为被邀请者如果想移除项目可在编辑项目时将自己移除并保存即可。另外只有创建者才能删除项目。权限校验逻辑见 controllers/mock.js 的checkByProjectId团队项目校验UserGroupProxy成员关系个人项目校验创建者或project.members成员列表而删除项目的creater限制在 controllers/project.js 的checkByProjectId(id, uid, true)。5.4 团队项目为了满足更多场景Easy Mock 支持团队项目所有用户都可以创建、加入团队并且没有条件限制所有用户都可以在团队下创建、修改项目但无法删除项目——只有创建者能删除虽然个人项目也能通过邀请的方式达到同样的目的但团队项目这种方式更适合团队协作因为第一条的原因建议在创建团队时将团队名取特殊一点避免被无关人员加入详见「常见问题」。5.5 Restful如果后端提供/restful/:id/list或/restful/{id}/list这样的接口地址Easy Mock 同样支持。源码中会将接口 URL 中的{id}统一转换为:id形式item.url.replace(/{/g, :).replace(/}/g, )再交给path-to-regexp做匹配与参数解析所以两种写法都能正确工作演示项目的GET /restful/:id/list即为示例。六、常见问题忘记密码目前没有提供找回密码的通道建议重新创建一个账号。如何本地部署本地部署的相关介绍请参阅仓库根目录的 README.md 与 README.zh-CN.md 文档其中包含环境依赖Node.js、MongoDB、Redis、配置与启动方式等说明。数据如何联动无法进行数据联动但可以根据响应式数据实现一些需求。响应式数据返回异常如果使用了响应式数据并且接口返回异常请先根据message的描述检查数据模型中可能存在的语法错误并确认已了解响应式数据注意事项例如不要使用setTimeout/setInterval避免死循环导致超时。加入团队不用审核吗起初为了使用方便并没有涉及审核的支持。所以建议在创建团队时将团队名称取得特殊且长一点防止无关人员误加入。如何定义参数/响应状态目前只有基于 Swagger 创建的项目才会自动创建相关的参数和响应数据定义无法进行手动添加。没有 Swagger 文档Easy Mock 并没有强制要求使用 Swagger所以即使没有 Swagger 也能正常使用。如果你真的很想体验用 Swagger 创建项目可以到 Swagger Editor 上编写接口文档并生成 JSON再使用下面的「内网 Swagger 文档」方案。内网 Swagger 文档如果 Swagger 文档只能内网访问那么外网 Easy Mock 将无法直接为其创建项目不适用于 OAS 1.2 格式。解决方案复制文档接口的 JSON 数据以 Petstore 的swagger.json为例在 Easy Mock 中新建一个接口在数据编辑器中粘贴刚刚复制的接口数据可能有点大并完成创建复制刚刚创建的接口的 URL创建一个新的项目在Swagger Docs API文本框填写刚刚复制的 URL填写完其它内容点击创建即可。七、反馈如果在使用 Easy Mock 的过程中遇到任何问题或建议可以加入官方反馈群交流二维码见 views/pages/docs/docs.md 末尾的反馈小节群二维码图片位于 views/pages/docs/images/qq-qun.jpg。小结本文以官方用户指南为主体从快速上手演示项目、Mock.js 语法、数据占位符、项目创建到进阶能力工作台、Swagger 智能同步、响应式数据_req、自定义响应_res再到效率技巧与高级特性接口代理、JSONP、协同编辑、团队项目、Restful并给出了对应的源码位置controllers/mock.js、util/swagger.js、util/index.js、views/pages/editor/snippets/mock.snippets 等供进一步深入阅读。对 Easy Mock 而言把上述能力组合使用——例如「Swagger 自动生成 响应式数据 自定义响应 接口代理」——基本可以覆盖前端开发中绝大部分 Mock 场景。赞分享后端接口测试【免费下载链接】easy-mockA persistent service that generates mock data quickly and provids visualization view.项目地址https://gitcode.com/gh_mirrors/ea/easy-mock点击查看免费下载相关推荐Easy Mock 完整使用指南从快速生成模拟数据到响应式、Swagger 与团队协作Easy Mock 完整使用指南从快速生成模拟数据到响应式、Swagger 与团队协作 Easy Mock 是一个可视化、能够快速生成 模拟数据 的持久化服务后端接口测试Easy Mock数据迁移工具MongoDB导出与导入Easy Mock数据迁移工具MongoDB导出与导入 在使用Easy Mock进行接口开发时项目数据的备份与迁移是保障工作连续性的关键环节。本文将详细介绍后端接口测试Easy Mock未来展望AI驱动的Mock数据生成终极指南Easy Mock未来展望AI驱动的Mock数据生成终极指南 Easy Mock作为一款强大的模拟数据生成工具正在迎来AI技术驱动的革命性升级。这款可视化M后端接口测试上一篇抖音动态监控推送5分钟搭建你的专属内容管家实时掌握博主动态下一篇3分钟快速上手Notepad--国产跨平台文本编辑器完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考