入门

我们的目标

为了真正检验我们新学的知识，我们将创建一个食物配送网页应用。以下是希望实现的一些目标：

• 查看所有餐厅
• 从餐厅选择菜品并加入购物车
• 计算购物车总价并进入结算流程

提供 HTML 页面

最简单且直接的开始方式是创建一个服务器。我们已经在之前的课程中学习过如何使用 Node.js 创建 Web 服务器并显示文本内容。现在，我们将学习如何通过服务器提供网页，这是我们应用的基础。

我们在同一目录下创建了一个简单的 HTML 文件。可以使用 Node.js 的 fs 模块来读取这个页面。让我们看看具体实现方式。

我们可以在文件夹根目录下使用命令 npm start 来运行应用程序。但因为我们在进行开发和修改，所以使用 npm run dev 来运行 开发 脚本。

通过 fs 模块，我们读取了 HTML 页面内容。然后使用 http.ServerResponse 类的 write() 方法将该页面作为响应返回给客户端。你可能会注意到图片没有显示出来，这是因为我们还没有读取图片文件。这个问题将在下一个示例中解决。

提供不同的页面

假设我们想为网站添加一个 关于 页面，让新访客了解我们的网站。同时，我们也希望为每种食物类型提供对应的图片。然而目前，我们的服务器只响应 main.html 页面。虽然之前我们忽略了请求对象 req，但现在是时候利用它了。req 对象包含许多属性，我们关注的是 url 属性——它返回服务器接收到的 URL。我们可以使用简单的 if-else 条件，根据 URL 返回不同的页面。来看看具体实现：

我们已在左上角的汉堡菜单中添加了一个额外的 关于 按钮，点击后跳转到 /about，而 美食 按钮则跳转到 /。通过更改 URL 并配合 if-else 判断，我们可以根据不同路径返回不同页面。同时，我们已经修复了图片显示问题。现在，当服务器收到图片请求时，会读取对应的图片文件并发送给浏览器。具体是如何实现的呢？

• main.html 文件中 img 标签的 src 属性对应一个路径（请查看第 57 行）。
• 本课程的图片文件位于 image 文件夹中，但你无法在当前界面看到该文件夹。它实际上存在于项目父目录中。
• 当浏览器加载 HTML 页面时，会根据 img 标签的 src 路径向我们的 Node.js 服务器发起请求。
• 请求的 URL 就是图片文件的路径。我们在第 17 行使用 match 方法检查 URL 中是否包含 image 字符串。
• 如果检测到是图片请求，则生成响应：第 19 行设置状态码为 200，第 20 行设置正确的 MIME 类型。
• 如果图片文件在项目目录内，就不需要第 21 行的代码。但在当前情况下，我们需要修改文件路径：使用 replace 方法将路径中的 / 替换为 ../，这样 readFileSync 就能正确访问父目录。
• 第 22 行读取图片文件后，使用 end 方法将图片数据传回浏览器，完成整个响应过程。end 方法标志着服务器对浏览器请求的响应结束。

如果我们要处理多个页面而不是仅仅两个，虽然可以继续使用多个 if-else 条件，但这不仅不实用，而且代码看起来也会很混乱。