freeCodeCamp 课程解析在 Express 指定路由上通过 res.json 输出 JSON 数据【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇文章围绕 freeCodeCamp 开源课程 Basic Node and Express 板块中的一课 Serve JSON on a Specific Route 展开讲解如何用 Express 的app.get()定义一个/json路由并通过res.json()以 JSON 格式把数据返回给浏览器。读完本文你将掌握 REST 接口的 GET 语义、JSON 作为数据交换格式的本质、res.json()的底层行为以及如何借助 freeCodeCamp 的自动化测试验证路由输出是否正确。课程背景从 HTML 服务器走向真正的 API在此之前Basic Node and Express 板块已经引导学习者完成了启动 Express 服务器、Serve an HTML File 与 Serve Static Assets 等课程——那时服务器的产出物主要是给人看的 HTML 页面。而本课标志着学习路径的一次关键转向服务器不再只提供 HTML而是开始提供数据也就是把服务器当作一个 API 来使用。从课程元数据看本课在板块内排第 5 位紧随 Serve Static Assets 之后其前后顺序记录在 basic-node-and-express.json 的challengeOrder中。整个板块又归属于 Back End Development and APIs 超板块对应目录 back-end-development-and-apis.json 以及 intro.json 中 Basic Node and Express 板块的介绍文案。按照 challenge-types.ts 的定义本课challengeType: 2对应backend类型即一类直接运行在真实 Node/Express 项目上、由服务端对代码运行结果做校验的实操练习。本课是该板块的第 5 个挑战挑战 ID 为587d7fb1367417b2b2512bf1dashedName 为serve-json-on-a-specific-route。文件中每个挑战都以 YAML frontmatterid、title、challengeType、forumTopicId、dashedName加正文段落# --description--、# --instructions--、# --hints--的结构组织。REST 与 GETAPI 世界里读取的标准姿势HTML 服务器与 API 的本质区别在于它们交付的内容以及面向的对象。正如课程 description 中所阐述的HTML 服务器输出 HTML而 API 输出数据。RESTREpresentational State Transfer表征状态转移API 的价值在于它以非常简单的方式完成数据交换客户端无需了解服务器内部任何实现细节。REST 的约定让客户端只需要知道两件事资源在哪里URL——即资源的位置想对资源执行什么动作HTTP 动词——即操作语义。本课聚焦的是GET动词当你只获取信息而不修改任何东西时就应该使用GET。这也是为什么把一条消息返回给请求方这件事天然适合用 GET 来表达——它无副作用、可重复请求、可被浏览器直接访问。在后续课程如 Get Route Parameter Input from the Client、Get Query Parameter Input from the Client中你会看到同样是 GET客户端可以通过路径参数或查询参数向服务器传递条件这正是 REST 接口信息交换的完整形态。JSONWeb 上最流行的数据移动格式这些天在 Web 上移动信息最受青睐的数据格式是 JSON。课程中这句话是理解 API 世界的钥匙。JSONJavaScript Object Notation本质上是一个 JavaScript 对象被序列化为字符串的形式因此可以非常方便地在网络中传输。你可以把它理解为服务端把一个合法的 JavaScript 对象**序列化serialize**成字符串字符串在网络上传输客户端收到字符串后再反序列化成自己语言里的数据结构。一个合法的 JSON 对象遵循{key: data}的结构其中data可以是数字、字符串、嵌套对象或数组也可以是变量或函数调用的结果——在后两种情况下值会在被转换成字符串之前先完成求值。正是这种对象 ↔ 字符串的自由转换能力让 JSON 成为前后端乃至不同语言之间通信的通用语言。动手实践用 app.get res.json 在 /json 路由上返回数据课程的 instructions 非常具体对/json路由的 GET 请求以 JSON 格式返回对象{message: Hello json}然后在浏览器中访问your-app-url/json屏幕即应显示该消息。按照课程前几课的约定路由代码应写在项目的myApp.js或你自己的应用入口文件中。实现如下app.get(/json, (req, res) { res.json({ message: Hello json }); });拆解 res.json() 的底层行为在 route handler 内部res.json()承担了终结一次请求-响应循环的职责。课程清楚地描述了它背后发生的三件事序列化把合法的 JavaScript 对象转换成字符串设置响应头告诉浏览器你正在收到的是 JSON——即把Content-Type设置为application/json发送数据把字符串作为响应体返回给客户端。值得注意的是你传给res.json()的可以是一个对象字面量也可以是一个保存了数据的变量甚至可以是函数的返回值会被先求值。对象中的值同样灵活数字、字符串、嵌套对象、数组均可。例如下面的写法同样是合法的const message Hello json; app.get(/json, (req, res) { res.json({ message: message }); });在真实项目中res.json()的这一序列化 设置Content-Type 结束响应的组合特性使它可以安全地替换手写res.setHeader(...)JSON.stringify(...)res.send(...)的繁琐流程因此也是 Express 中输出 JSON 接口数据的首选方法。自动化校验freeCodeCamp 如何验证你的 /json 接口与前端类的可视化挑战不同backend类型challengeType: 2的挑战由测试系统对你的真实服务器发起 HTTP 请求并断言响应。本课的# --hints--给出了可复现的验证逻辑const response await fetch(code /json); if (!response.ok) { throw new Error(await response.text()); } const data await response.json(); assert.equal( data.message, Hello json, The /json endpoint does not serve the right data );这段测试揭示了几个重要事实测试通过fetch向你的应用URL /json发起 GET 请求因此服务器必须处于监听状态断言前会先检查response.ok说明只要路由返回了错误状态码测试就会直接失败测试使用response.json()把响应体反序列化为对象后只校验data.message Hello json这一项——它并不关心响应头之外的多余字段说明接口只要保证核心数据正确即可。这也提醒学习者接口路径必须精确为/json且响应体必须可被解析为 JSON二者缺一不可。与本课直接衔接的下一课.env 与动态 JSON如果你在本板块继续向后学习会发现Serve JSON on a Specific Route学到的这个/json路由会在下一个挑战 Use the .env File 中被复用和升级通过在项目根目录创建.env文件并写入MESSAGE_STYLEuppercase配合require(dotenv).config()加载环境变量然后在/json路由 handler内部读取process.env.MESSAGE_STYLE实现响应从{message: Hello json}到{message: HELLO JSON}的动态切换。这恰好印证了本课 description 中的那句话data可以是变量或函数调用结果它会在序列化之前被求值。也就是说你在本课打下的路由 res.json基础直接构成了后续课程中配置驱动响应的载体——这正是在实际后端项目中极为常见的模式同一个接口根据环境或配置返回不同数据。小结通过这一课你完成了从用 Express 服务静态页面到用 Express 对外提供结构化数据的跨越。核心要点可归纳为语义REST 中 GET 表示只读获取、不做修改客户端只需知道 URL 与动词载体JSON 把 JS 对象序列化为字符串以便在网络上传输其{key: data}中data可为任意可求值的数据实现app.get(/json, handler)res.json(obj)后者自动完成序列化、设置Content-Type: application/json并终结响应验证backend类型挑战通过fetch(code /json)断言data.message是否精确等于Hello json延伸该路由将在下一课被.env环境变量驱动成为配置化接口的基础。掌握了这条路由 → res.json → JSON 响应的最小链路你就已经拥有了编写任意简单 REST 只读接口所需的核心能力可以在此基础上继续探索 Express 的中间件、参数路由与 POST 数据接收。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考