ExpressJS - 提供动态内容

Express.js - 使用模板引擎提供动态内容

Express 应用程序通常需要根据来自数据库或用户输入的数据生成动态 HTML 内容。您应该使用模板引擎，而不是在 JavaScript 代码中手动构建 HTML 字符串（这种做法容易出错且难以维护）。

什么是模板引擎？

模板引擎允许您编写静态模板文件（例如 HTML，但带有特殊语法），并在运行时向其中注入动态数据。这种做法将表示层（HTML）与逻辑层（JavaScript）分离，从而使代码更清晰、更有组织。Express 流行的模板引擎包括 Pug（以前称为 Jade）、EJS 和 Nunjucks。

在本教程中，我们将使用 Pug，因为它具有干净、基于缩进的语法。但是，这些原则适用于任何模板引擎。

项目设置

让我们构建一个简单的应用程序，它从表单中获取一个数字，在服务器上计算其平方，并显示结果。

1. 安装依赖项

此示例中您只需要 express 和 pug。

npm install express pug

2. 配置 Express

首先，您需要告诉 Express 使用哪个模板引擎以及在哪里找到模板文件（称为 ‘views’）。

index.js

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const app = express();
const PORT = 3000;

// ES 模块中 __dirname 所必需
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 1. 将视图引擎设置为 Pug
app.set('view engine', 'pug');
// 2. 指定模板文件所在的目录
app.set('views', path.join(__dirname, 'views'));

3. 处理表单提交

要处理来自 HTML 表单的数据，您需要使用 express.urlencoded() 中间件。此中间件解析带有 x-www-form-urlencoded 有效负载（HTML 表单的默认设置）的传入请求，并填充 req.body 对象。

注意： 在旧版本的 Express 中，这需要外部的 body-parser 包。它现在已内置到 Express 中。

// 3. 使用中间件解析表单数据
app.use(express.urlencoded({ extended: true }));

创建应用程序逻辑

1. 创建 Pug 模板

创建一个名为 views 的目录，并在其中创建一个名为 calculator.pug 的文件。

views/calculator.pug

html
  head
    title Dynamic Content Calculator
    style.
      body { font-family: sans-serif; padding: 20px; }
      input, button { font-size: 1rem; padding: 5px; }
  body
    h1 Square Calculator

    form(action="/calculate", method="POST")
      div
        label(for="number") Enter a Number:
        input#number(name="number" type="number" value=inputValue || '')
      br
      button(type="submit") Calculate Square

    //- 此块仅在服务器传递 'result' 时渲染
    if result
      h2 Result: #{result}

2. 创建路由处理器

现在，让我们用渲染表单和处理计算的路由来完成我们的 index.js 文件。

// index.js（续）

// 显示表单的路由
app.get('/', (req, res) => {
    // res.render() 查找 'calculator.pug' 并将其作为 HTML 发送
    res.render('calculator');
});

// 处理表单提交的路由
app.post('/calculate', (req, res) => {
    const number = parseFloat(req.body.number);

    // 基本验证
    if (isNaN(number)) {
        return res.render('calculator', {
            inputValue: req.body.number,
            result: 'Error: Please enter a valid number.'
        });
    }

    const square = number * number;

    // 渲染相同的模板，但向其传递数据
    res.render('calculator', {
        inputValue: number,
        result: `The square of ${number} is ${square}.`
    });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

运行应用程序

1. 使用 node index.js 运行您的服务器。
2. 在浏览器中打开 http://localhost:3000。
3. 输入一个数字并点击“计算平方”按钮。
4. 页面将重新加载，并在表单下方显示计算结果。

常见陷阱

• req.body 未定义： 这几乎总是意味着您忘记包含 app.use(express.urlencoded({ extended: true })); 中间件，或者您将其放置在路由处理器之后。
• 无法查找视图 ”…”： 此错误表示 Express 找不到您的模板文件。请仔细检查 app.set('views', ...) 是否指向正确的目录，以及 res.render() 中的文件名是否正确。