Node.js - Express 框架

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索 Node.js 和 Express 框架的世界。作为你友好的计算机科学老师，我非常高兴能引导你完成这次冒险。如果你之前从未写过一行代码，也不用担心——我们将从最基础的内容开始，一起逐步学习。

Express 是什么？

在我们开始之前，让我们先聊聊 Express 究竟是什么。想象一下你正在建造一座房子。你可以从头开始，自己制作砖块和切割木材。或者，你可以使用预先制作好的材料，让工作变得更轻松、更快。Express 就像那些预先制作好的材料，但它是用于网络应用的。它是一个框架，为网络和移动应用提供了强大的功能集，使得使用 Node.js 构建网络应用变得更容易、更快。

安装 Express

让我们开始安装 Express。首先，确保你的计算机上安装了 Node.js。如果你没有安装，请访问 Node.js 官方网站下载。

一旦安装了 Node.js，打开你的终端（如果你在 Windows 上，则是命令提示符）并输入以下命令：

npm install express

这个命令使用 npm（Node 包管理器）来安装 Express。你可以将 npm 想象成一个神奇的工具箱，其中包含了我们可以在 Node.js 项目中使用的各种有用的工具（称为包）。

Hello World 示例

现在我们已经安装了 Express，让我们创建我们的第一个 Express 应用程序。我们将从经典的 "Hello, World!" 示例开始。

创建一个名为 app.js 的新文件，并输入以下代码：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`示例应用正在监听 http://localhost:${port}`);
});

让我们分解一下：

1. 我们导入 Express 模块并创建一个 Express 应用程序。
2. 我们定义了一个端口号（本例中为 3000）。
3. 我们为根 URL ('/') 设置了一个路由，当访问时返回 "Hello, World!"。
4. 我们告诉我们的应用程序在指定的端口上监听。

要运行这个应用程序，请打开终端，导航到包含 app.js 的目录，并运行：

node app.js

现在，打开你的网页浏览器并访问 http://localhost:3000。你应该会在页面上看到 "Hello, World!"。恭喜你！你刚刚创建了你的第一个 Express 应用程序！

应用程序对象

在我们之前的示例中，我们创建了一个 Express 应用程序对象：

const app = express();

这个 app 对象是我们使用 Express 的核心。它有用于路由 HTTP 请求、配置中间件、渲染 HTML 视图、注册模板引擎等方法。

以下是 app 对象最常用的方法：

方法	描述
app.get()	将 HTTP GET 请求路由到指定路径，并带有指定的回调函数
app.post()	将 HTTP POST 请求路由到指定路径，并带有指定的回调函数
app.use()	在指定路径上挂载指定的中间件函数或函数
app.listen()	在指定的主机和端口上绑定并监听连接

基本路由

路由是指确定应用程序如何响应客户端对特定端点的请求，这个端点是一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。

让我们扩展我们的应用程序以包含更多路由：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('这是关于页面');
});

app.post('/submit', (req, res) => {
res.send('收到一个 POST 请求');
});

app.listen(port, () => {
console.log(`示例应用正在监听 http://localhost:${port}`);
});

在这个示例中，我们添加了两个新的路由：

• 一个用于 '/about' 的 GET 路由，返回 "这是关于页面"
• 一个用于 '/submit' 的 POST 路由，返回 "收到一个 POST 请求"

要测试 POST 路由，你需要一个像 Postman 这样的工具，或者可以创建一个 HTML 表单来提交到这个路由。

服务器静态文件

通常，你会想要提供静态文件，如图片、CSS 文件和 JavaScript 文件。Express 提供了一个内置的中间件函数 express.static 用于此目的。

让我们在我们的项目文件夹中创建一个名为 public 的目录，并在其中放入一个图像文件（假设为 cat.jpg）。然后，像这样修改我们的 app.js：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`示例应用正在监听 http://localhost:${port}`);
});

在这个示例中，我们做了两件事：

1. 我们使用 app.use(express.static('public')) 来提供 'public' 目录中的静态文件。
2. 我们添加了一个新的路由 '/cat'，返回 cat.jpg 文件。

现在，你可以直接通过 http://localhost:3000/cat.jpg 访问你的猫图片，或者通过我们定义的 '/cat' 路由来访问。

就是这样！我们已经涵盖了 Express 的基础知识，从安装到提供静态文件。记住，学习编码就像学习一门新语言——它需要练习和耐心。如果你一开始不理解所有内容，请不要气馁。继续尝试，继续构建，最重要的是，保持乐趣！

在下一课中，我们将更深入地探讨 Express 中间件和更高级的路由技术。在此之前，祝编码愉快！

Credits: Image by storyset