rap2-dolores接口测试页源码解析动态生成Mock请求表单的完整实现原理【免费下载链接】rap2-dolores项目地址: https://gitcode.com/gh_mirrors/ra/rap2-doloresrap2-dolores 接口测试页是 RAP2 开源 Mock 平台React 前端中最实用的功能之一选择任意接口后页面会自动根据接口定义的 request 参数动态生成一个可填写的请求表单提交后即可实时预览 Mock 数据。本文带你完整拆解这一动态生成 Mock 请求表单的实现原理帮助新手读懂源码、借鉴其表单设计思路。一、测试页入口从路由到组件在 routes.tsx 中测试页通过路由懒加载注册const RepositoryTester lazy(() import(./components/tester/Tester)) // ... Route exact{true} path/repository/tester component{RepositoryTester} /访问/repository/tester时才会加载 Tester.tsx避免首屏包体过大。这是大型 React 项目中常见的按需分包手法。组件初始化时的状态结构是理解全篇的钥匙this.state { requestData: {}, // 表单数据动态生成 template: null, // 接口返回的 Mock 模板 schema: null, // 接口返回的数据校验模式 data: null, // Mock 结果数据 target: serve, // 业务系统地址可编辑 }其中serve来自 constant.ts指向后端 rap2-delos 服务地址。二、核心原理动态表单是如何长出来的这是全文最关键的部分。表单没有任何写死的字段全部由接口的属性定义properties驱动。1️⃣ 过滤出 request 参数切换接口时触发switchItf方法Tester.tsxconst requestProperties itf.properties .map(property ({ ...property })) .filter(property property.scope request)每个接口的 properties 是扁平列表每条属性带parentId表达层级关系并用scope字段区分归属request请求参数、response响应数据、path路径参数。测试页只取 request 部分。2️⃣ 扁平列表 → 参数树参数树转换由 Tree.ts 工具完成。arrayToTree通过递归匹配parentId把扁平数组组织成树结构——这正是处理表格型层级数据的经典算法与数据库adjacency list思想一致。3️⃣ 参数树 → Mock.js 模板treeToJson把树逐节点转换成Mock.js 模板Tree.ts。转换时做了不少精细处理参数类型转换策略String原样保留 valueNumber未填初始值时默认1尝试parseFloat解析Boolean兼容true/false/0字符串Object / Array有初始值则eval解析否则递归子节点带 rule 规则拼成key\|1-10形式的 Mock 规则串例如一个rule: 1-10的数组参数会被转成{ list|1-10: [...] }Mock.js 据此随机生成 1~10 条数据。4️⃣ Mock 模板 → 表单默认值 → 动态渲染拿到模板后一行代码生成表单初值const requestData Mock.mock(requestTemplate)Mock实例从 family/index.ts 统一导出require(mockjs)。随后 render 阶段遍历对象键完成动态渲染Tester.tsx{Object.keys(requestData).map(key li key{key} classNamefiled div classNamelabel{key}/div input value{requestData[key]} onChange{e this.updateRequestData(e, key, e.target.value)} classNameform-control / /li )}至此动态生成 Mock 请求表单的完整链路就闭环了properties 扁平列表→arrayToTree建树 →treeToJson转 Mock 模板 →Mock.mock()生成默认值 →Object.keys遍历渲染表单 ✅这种数据驱动 UI的写法避免了为每个接口手写表单是配置化表单设计思想的典型范例。三、提交请求四路并发拉取数据点击 Submit 触发handleRequestTester.tsx它做三件事① 组装请求 URL用URIurijs同样从 family/index.ts 导出把表单数据逐个挂到查询串上空值字段自动剔除const uri URI(${serve}/app/mock/data/${itf.id}) for (const key in requestData) { if (requestData[key] ) { uri.removeSearch(key) } else { uri.setSearch(key, requestData[key]) } }② 四路fetch并发请求const requests [ fetch(${serve}/app/mock/template/${itf.id}), // 模板 fetch(${serve}/app/mock/schema/${itf.id}), // 校验模式 fetch(uri.toString()), // 带参数的 Mock 数据 ] requests.push(fetch(proxy)) // 代理转发到业务系统③ 代理请求验证真实接口构造target 业务系统地址 /app/mock/{repoId}/{method}/{url}再通过后端代理${serve}/proxy?target${target}转发。这样用户无需关心跨域即可把 Mock 参数打到真实业务系统做联调。四、Schema 校验Mock 数据的自证清白拿到数据后测试页还会做一次模式比对Tester.tsxconst { Diff, Assert } Mock.valid const result Diff.diff(schema, target) for (const item of result) { console.warn(Assert.message(item)) }原理是拿后端根据接口定义生成的schema数据模式与实际返回的data做递归比对类型不一致处通过console.warn输出警告。代码中还有一处小技巧——给Assert.match打了个猴子补丁让规则表达式字符串先eval再比对从而支持integer这类动态规则。这套接口返回后立即自检的机制让用户能直观确认 Mock 服务与接口定义保持一致。五、同类页面对照Checker 组件项目里还有个功能相近的接口检查页路由为/repository/checker。两者对比能帮你理清设计边界Tester面向调参生成可编辑请求表单提交后预览数据 代理转发 schema 校验Checker面向体检无表单切换接口即拉取默认数据并做 schema 比对两者共享Tree、Mock、serve等基础设施体现了组件复用的分层设计。六、新手可以借鉴的三个设计点配置驱动表单表单字段不写死而是从接口元数据properties派生新增接口零成本获得测试表单并发请求编排Promise.all聚合多路数据源一次性 setState减少中间渲染统一门面导出通过 family/index.ts 聚合导出connect、Link、URI、Mock等业务组件无需关心依赖来源便于后续替换七、相关文件索引文件职责src/components/tester/Tester.tsx测试页主组件表单生成、请求提交、schema 校验src/components/tester/Tester.sass测试页样式src/components/utils/Tree.ts扁平列表↔树↔Mock 模板转换src/routes.tsx路由注册与懒加载分包src/relatives/services/constant.ts后端服务地址常量src/components/checker/Checker.tsx接口检查页同类实现src/actions/property.ts接口属性的增删改 action一句话总结rap2-dolores 的接口测试页本质是一条properties → 树 → Mock 模板 → 表单数据 → DOM的数据流水线配合 urijs 拼参和后端 proxy 代理把定义接口即可测试接口这件事做到了极致。读懂 Tester.tsx 与 Tree.ts 这两个文件你就掌握了其全部核心原理。【免费下载链接】rap2-dolores项目地址: https://gitcode.com/gh_mirrors/ra/rap2-dolores创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考