企业官网建设流程全解析

freeCodeCamp 课程解析：在 Express 指定路由上通过 res.json 输出 JSON 数据

【免费下载链接】freeCodeCampfreeCodeCamp.org's 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 为587d7fb1367417b2b2512bf1，dashedName 为serve-json-on-a-specific-route。文件中每个挑战都以 YAML frontmatter（id、title、challengeType、forumTopicId、dashedName）加正文段落（# --description--、# --instructions--、# --hints--）的结构组织。

REST 与 GET：API 世界里"读取"的标准姿势

HTML 服务器与 API 的本质区别，在于它们交付的内容以及面向的对象。正如课程 description 中所阐述的：HTML 服务器输出 HTML，而 API 输出数据。REST（REpresentational 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 接口信息交换的完整形态。

JSON：Web 上最流行的数据移动格式

"这些天，在 Web 上移动信息最受青睐的数据格式是 JSON。"课程中这句话是理解 API 世界的钥匙。JSON（JavaScript Object Notation）本质上是一个 JavaScript 对象被序列化为字符串的形式，因此可以非常方便地在网络中传输。你可以把它理解为：

1. 服务端把一个合法的 JavaScript 对象**序列化（serialize）**成字符串；
2. 字符串在网络上传输；
3. 客户端收到字符串后再反序列化成自己语言里的数据结构。

一个合法的 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()承担了"终结一次请求-响应循环"的职责。课程清楚地描述了它背后发生的三件事：

1. 序列化：把合法的 JavaScript 对象转换成字符串；
2. 设置响应头：告诉浏览器"你正在收到的是 JSON"——即把Content-Type设置为application/json；
3. 发送数据：把字符串作为响应体返回给客户端。

值得注意的是，你传给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_STYLE=uppercase，配合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.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp