7：Node.js

难度系数：有点难

在前面的题目中，我们已经尝试使用 JavaScript 调用外部 API，从服务器获取数据，并将数据展示在网页上。但你有没有想过：API 中的数据来自哪里？浏览器发出的请求去了哪里？我们能不能自己编写一个 API？

在这一题中，你将暂时走到网页的“另一边”，使用 Node.js 搭建一个简单的本地数据服务。

微光工作室学习小组准备制作一个学习资源导航页，用于向新同学推荐 HTML、CSS、JavaScript 和前端工具等学习资料。页面已经准备好了，但学习资源暂时都直接写在网页代码中。每次修改内容，都需要重新修改页面。

于是，大家决定搭建一个简单的数据服务，让页面可以通过 API 获取工作室介绍和学习资源。

这一次，你不再只是 API 的使用者，而是要尝试成为 API 的创造者。

本题会使用 Node.js。Node.js 可以让 JavaScript 在浏览器之外运行。

安装完成后，请打开终端并输入：

node -v

npm -v

如果可以看到版本号，说明环境安装成功。

你还可以新建一个 hello.js 文件：

console.log('Hello, Glimmer!');

在终端中运行：

node hello.js

看到 Hello, Glimmer! 后，恭喜你，你已经迈出了第一步！

题目提供的初始项目如下：

T7/
├── public/
│   ├── index.html
│   ├── style.css
│   └── index.js
├── data/
│   └── resources.js
└── server.js

本题文件点此下载

建议先把所有文件简单浏览一遍（每个文件有什么作用呢？）再寻找标有 TODO 的位置。

在项目目录打开终端，运行：

node server.js

正常情况下，终端会显示：

服务器已启动：http://localhost:3000

在浏览器中访问：

http://localhost:3000

如果页面可以打开，说明服务器已经开始工作。

试着思考：

• localhost 表示什么？3000 是什么？为什么运行服务器后，终端没有立即结束？修改服务器代码后，为什么通常需要重新启动？

服务器创建、静态页面返回和监听端口的代码已经提供，不必从零写完整个服务器，但你需要阅读这些代码！

请打开 server.js，找到对应的 TODO，完成接口：

GET /api/studio

访问：

http://localhost:3000/api/studio

服务器应返回 JSON 格式的数据，例如：

{
  "code": 200,
  "message": "请求成功",
  "data": {
    "name": "微光工作室",
    "direction": "前端",
    "description": "xxxxxxxxx"
  }
}

代码中已经提供了 sendJson() 工具函数，可以先读懂它，再考虑应该向它传入什么内容。

可以了解：

• JavaScript 对象和 JSON 有什么联系？
• JSON.stringify() 有什么作用？
• Content-Type: application/json 表示什么？
• 为什么要设置 charset=utf-8？

data/resources.js 中已经准备好了学习资源。

每条资源的数据结构类似：

{
  id: 1,
  title: 'MDN Web Docs',
  category: 'HTML',
  description: '适合查阅前端知识的文档网站',
  url: 'https://developer.mozilla.org/'
}

请完成：

GET /api/resources

访问后，应返回全部学习资源：

{
  "code": 200,
  "message": "请求成功",
  "data": [
    {
      "id": 1,
      "title": "MDN Web Docs",
      "category": "HTML",
      "description": "适合查阅前端知识的文档网站",
      "url": "https://developer.mozilla.org/"
    }
  ]
}

尝试使用服务器已经读取的 resources。

可以思考：

• require() 在这里做了什么？
• 为什么把数据单独放在一个文件中？
• 返回对象与返回数组有什么区别？

请完成：

GET /api/random-resource

每次访问时，从资源数组中随机选择一条并返回。

可能的结果：

{
  "code": 200,
  "message": "今天推荐你看看这条资源",
  "data": {
    "id": 3,
    "title": "现代JavaScript教程",
    "category": "JavaScript",
    "description": "从基础语法逐步了解现代JavaScript",
    "url": "https://zh.javascript.info/"
  }
}

这里可能会用到：

Math.random()
Math.floor()
resources.length

• Math.random() 返回的范围是什么？
• 怎样生成一个合法的数组下标？
• 为什么数组最大下标是 length - 1？

完成后多刷新几次，看看结果是否发生变化。

当用户访问不存在的 API，例如：

http://localhost:3000/api/hello

服务器应返回：

{
  "code": 404,
  "message": "你访问的接口不存在"
}

同时将 HTTP 状态码设置为 404。

可以思考：

• JSON 数据中的 code: 404 与 HTTP 响应状态码有什么区别？
• 常见的 200、404 和 500 大致表示什么？
• 为什么服务器不能对不存在的地址一直不作响应？

请打开：

public/index.js

补全其中的 TODO，使用 fetch() 请求：

/api/resources

并把返回的资源展示到页面中。

页面至少应显示：

• 资源名称；
• 资源分类；
• 简短介绍；
• 可以点击访问的链接。

页面结构、资源卡片函数和样式已经提供。只需要完成“获取数据并逐条添加到页面”的核心过程。

完成后，可以在浏览器开发者工具的 Network 面板中找到该请求，观察：

• 请求地址；请求方式；状态码；响应数据。

只要求 GET 请求。不需要学习数据库、用户登录、权限管理或完整的增删改查。

可以使用浏览器和 Network 面板检查结果噢

遇到问题时，可以先使用：

console.log(request.url);
console.log(pathname);
console.log(resources);

观察程序实际收到了什么、数据又是什么样子。

可以依次检查：

1. 终端是否报错；
2. 服务器是否仍在运行；
3. 浏览器控制台是否报错；
4. Network 中是否存在对应请求；
5. 请求地址和返回数据是否正确。

也可以想想这些问题：

1. Node.js 和浏览器中的 JavaScript 有什么不同？
2. localhost:3000 中的两部分分别表示什么？
3. request 和 response 分别代表什么？
4. 为什么返回对象前需要使用 JSON.stringify()？
5. 为什么访问不同路径会得到不同数据？
6. 从页面打开到资源列表显示，中间经历了哪些步骤？
7. 完成本题时有没有遇到什么问题？你是怎样定位和解决的？
8. 你认为前端开发者为什么需要了解服务器和 API？

下面均为选做，可以根据兴趣选择。

1. 按分类筛选

支持：

GET /api/resources?category=JavaScript

只返回对应分类的资源。

2. 根据ID查找资源

支持：

GET /api/resources/1

返回指定资源，不存在时返回 404。

3. 增加前端搜索

在页面中加入搜索框，根据名称或介绍筛选资源。

4. 使用Express重写

尝试安装 Express，并使用：

app.get('/api/resources', (request, response) => {
  // 返回数据
});

重写服务器。思考框架替你简化了哪些内容。

5. 尝试POST请求

增加一个简单留言接口，将留言临时保存在数组中即可。

• Node.js中文网
• Node.js学习指南
• Node.js教程｜菜鸟教程
• 需要了解多少 JavaScript 才能使用 Node.js？
• Node.js 和浏览器之间的区别?

• HTTP概述｜MDN
• 使用Fetch｜MDN
• JSON｜MDN

• Express中文文档
• Express教程｜菜鸟教程

提交点这里

提交主题示例 2026090101012-张三-前端-T7

提交文件：完整的 T7 项目文件夹，并在文件夹根目录下附上README.md文件，附上自己的做题心得~

出题人：  猫染

QQ：604716015

邮箱：604716015@qq.com