前后端对接联调

前后端联调和接口对接 - 牧涯的收藏集 - 掘金 (juejin.cn)

一、Mock 平台和库

mock 数据简介

Mock 平台

Mock 库

Mock.js

Mock.js是一个用于生成随机数据、模拟 Ajax 请求的 JavaScript 库。它基于 JavaScript 语言实现，可以方便地模拟各种数据类型，如数字、字符串、数组、对象等，并支持自定义数据格式和生成规则。Mock.js 提供了一个简洁的 API，开发者可以使用它来快速生成模拟数据，并用于前端开发、测试、接口对接等场景。它支持在浏览器和 Node.js 环境中使用，并可以与多种前端框架和库（如 Vue、React、Angular、Webpack 等）集成使用。此外，Mock.js 还支持通过拦截 Ajax 请求来模拟后端接口响应，从而帮助开发者在前端开发中模拟后端数据交互，提高开发效率和开发体验。

**GitHub：**https://github.com/nuysoft/Mock

官网：http://mockjs.com/

faker.js

Faker.js是一个JavaScript库，用于生成大量假数据。这个库非常有用，特别是在前端开发、原型设计、测试、数据填充等方面。Faker.js可以生成各种类型的数据，包括名字、地址、电子邮件、电话号码、随机文本、日期、财务信息等。Faker.js的API设计得非常简单和直观，使得生成假数据变得非常容易。例如，可以使用faker.name.findName()来生成一个随机的名字，或者使用faker.address.city()来生成一个随机的城市名。

**GitHub：**https://github.com/faker-js/faker

Chance.js

Chance.js 是一个用于生成随机数据的 JavaScript 库。与 Faker.js 类似，Chance.js 提供了一组丰富的 API，用于生成各种类型的数据，如数字、字符串、日期、地址、姓名、电话号码、电子邮件地址等。它生成的数据很真实，例如生成的电话号码或邮政编码可能更接近实际使用的格式。此外，Chance.js 还提供了一些用于生成更复杂数据的函数，如生成随机颜色、图像、UUID 等。

**GitHub：**https://github.com/chancejs/chancejs

二、接口测试工具

Postman

官网地址：www.postman.com

**官方文档：**https://learning.postman.com/docs/introduction/overview/

Postman是一个接口测试工具，也可以用来模拟各种HTTP请求。在做接口测试的时候，Postman相当于一个客户端，它可以模拟用户发起的各类HTTP请求，将请求数据发送至服务端，获取对应的响应结果，从而验证响应中的结果数据是否和预期值相匹配，并确保开发人员能够及时处理接口中的bug。它提供了一个直观的界面，使得发送请求、检查响应和验证数据变得非常容易。

几乎所有前端应用程序都发送和接收 JSON 响应和请求。 应用程序通过请求 API 可以做很多事情，例如身份验证，用户数据传输，甚至是一些简单的事情，例如获取所在位置的当前天气。

Postman 是调试接口的最佳工具之一。 它适用于 MacOS，Windows 和 Linux 的系统， 可以快速轻松地直接发送 REST，SOAP 和 GraphQL 请求。

使用 Postman，我们可以调整请求，分析响应和调试问题。 当不确定问题出在前端还是后端时，这是很有帮助的。

浏览器复制 cUrl 到工具粘贴请求

Apifox

ApiPost

Hoppscotch

Hoppscotch 是一款强大的开源 API 工具，它的原名为 Postwoman，是知名 API 开发和测试工具 Postman 的开源替代品。它为用户提供了一个直观的界面，让开发者能够轻松地发送HTTP请求、查看响应并进行调试。

**Github：**https://github.com/hoppscotch/hoppscotch

Insomnia

Insomnia 是一款开源的、跨平台的 API 客户端工具，支持多种协议如 GraphQL、REST、WebSockets 等。它提供了丰富的功能，包括调试 API、设计 API、测试 API，并计划在未来支持模拟 API。此外，Insomnia 还支持多种存储选项，包括本地存储、云同步和 Git 存储，以满足用户的不同需求。

**GitHub：**https://github.com/Kong/insomnia

bruno

**GitHub：**https://github.com/usebruno/bruno

官网：https://www.usebruno.com/

用于探索和测试 API 的开源 IDE（postman/insomnia的轻量级替代品）

构建分析

Rsdoctor

Rsdoctor 是一个全面诊断和分析 Webpack 和 Rspack 构建过程与产物的工具，提供编译耗时细节和行为展示，以及防止代码劣化的 Bundle Diff 功能。

**GitHub：**https://github.com/web-infra-dev/rsdoctor

Webpack Bundle Analyzer

Webpack Bundle Analyzer 是一个 Webpack 插件，它将打包内容表示为方便的交互式可缩放树状图。它可以通过读取构建结果文件，生成代码分析报告。这个报告可以直观地分析打包出的文件有哪些，以及它们的大小、占比情况、模块包含关系、依赖等。帮助你发现构建过程中可能存在的性能瓶颈，从而更好地优化项目。

**GitHub：**https://github.com/webpack-contrib/webpack-bundle-analyzer

Rollup Plugin Visualizer

Rollup Plugin Visualizer 是一个用于 Rollup、Vite 构建工具的插件，它能够生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。使用这个插件，可以在构建完成后生成一个交互式的HTML报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。

**GitHub：**https://github.com/btd/rollup-plugin-visualizer

性能测试

Lighthouse

Lighthouse是一个开源的自动化性能测试工具，由Google开发并免费提供给所有网站使用。它可以检测网页的性能、可访问性以及SEO等方面，并给出优化建议。Lighthouse可以直接集成到Chrome开发者工具中，也可以在Node.js环境中使用。在Chrome开发者工具中，Lighthouse位于“Audits”面板下，可以很方便地进行性能分析。而在Node.js环境中，需要全局安装Lighthouse并使用命令行来运行。无论是哪种方式，Lighthouse都会生成一个详细的性能报告，包括各项指标得分、潜在问题以及优化建议等，帮助开发人员全面了解网页性能状况并进行优化。

**官方文档：**https://developer.chrome.com/docs/lighthouse/overview?hl=zh-cn

PageSpeed Insights

Google PageSpeed Insights 可以为网站生成性能报告，它在移动设备和桌面设备上都是免费的。并且还给出了影响页面加载速度的原因，并为这些问题提供了解决方案。

**在线地址：**https://pagespeed.web.dev/

Pingdom

Pingdom Website Speed Test 可以全面分析影响页面Web速度的因素。此外，还可以查看网站在亚洲、欧洲等多个不同的地理位置的性能信息。

**在线地址：**https://tools.pingdom.com/

JSON 查看

JSON Hero

JSON Hero 是一个功能强大的开源 JSON 可视化神器，它通过简介美观的UI及增强的额外功能，使得阅读和理解JSON文档变得更容易、直观。它支持多种视图以便查看JSON，如列视图、树视图、JSON视图等。其中，列视图是受macOS Finder启发创建的一种浏览JSON文档的新方法。

**GitHub：**https://github.com/triggerdotdev/jsonhero-web

JSON Crack

JSON Crack是一个开源的数据可视化应用，它能够将JSON、YAML、XML、CSV等数据格式可视化为交互式图表。JSON Crack具有直观且用户友好的界面，可以轻松探索、分析和理解即使是最复杂的数据结构。JSON Crack不仅仅简单地展示JSON数据，而是将其转化为类似思维导图的形式。通过这个工具，用户可以更方便地理解和分析复杂的JSON数据。它还支持多种操作，如放大/缩小、展开/收缩、搜索节点以及导出图片等。

**GitHub：**https://github.com/AykutSarac/jsoncrack.com

json.cn

json.cn 是一个提供JSON字符串在线格式化的网站。它可以帮助用户将JSON格式的字符串进行格式化，使其更易于阅读和编辑。

**在线地址：**https://www.json.cn/