主题
渲染动态 HTML
在现代 Web 开发中，渲染动态 HTML 页面是常见的需求。通过 Express 和模板引擎（如 EJS 或 Pug），我们可以根据服务器端的动态数据渲染页面，实现与客户端的交互。
传递数据给模板引擎
无论使用哪种模板引擎（EJS、Pug、Handlebars 等），渲染动态页面的核心是传递数据到模板。在 Express 中，通过 res.render() 方法将数据传递给视图引擎。
示例 1：使用 EJS 渲染动态页面
1.1 安装 EJS
bash
npm install ejs1.2 配置 EJS 和路由
在 app.js 中配置 EJS 模板引擎，并设置视图路径：
js
const express = require('express');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.listen(3000, () => {
console.log('服务器启动在 http://localhost:3000');
});1.3 渲染动态内容
假设你需要渲染一个动态的用户列表，可以在路由中传递一个数组，渲染到 HTML 页面：
js
app.get('/users', (req, res) => {
const users = [
{ name: '张三', age: 28 },
{ name: '李四', age: 32 },
{ name: '王五', age: 24 }
];
res.render('users', { users });
});1.4 创建 views/users.ejs
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %>，年龄：<%= user.age %></li>
<% }) %>
</ul>
</body>
</html>1.5 渲染结果
访问 /users 路径时，Express 会渲染动态用户列表页面：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<ul>
<li>张三，年龄：28</li>
<li>李四，年龄：32</li>
<li>王五，年龄：24</li>
</ul>
</body>
</html>通过查询参数渲染动态内容
查询参数是 URL 中 ? 后跟随的键值对，可以用来传递动态数据。例如，使用查询字符串来渲染用户的详细信息。
示例 2：根据查询参数渲染用户详情
2.1 路由处理查询参数
js
app.get('/user', (req, res) => {
const userId = req.query.id;
const users = [
{ id: 1, name: '张三', age: 28 },
{ id: 2, name: '李四', age: 32 },
{ id: 3, name: '王五', age: 24 }
];
const user = users.find(u => u.id == userId);
res.render('user', { user });
});2.2 创建 views/user.ejs
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= user.name %> 的个人信息</title>
</head>
<body>
<h1><%= user.name %> 的个人信息</h1>
<p>年龄：<%= user.age %></p>
</body>
</html>2.3 渲染结果
访问 /user?id=2 时，页面内容会显示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李四 的个人信息</title>
</head>
<body>
<h1>李四 的个人信息</h1>
<p>年龄：32</p>
</body>
</html>使用表单提交渲染动态内容
表单提交的数据也可以作为动态内容渲染的一部分。例如，用户提交信息后，渲染其个人信息页面。
示例 3：表单提交并渲染结果
3.1 创建 HTML 表单
html
<form action="/submit" method="POST">
<input type="text" name="username" placeholder="请输入用户名" required />
<button type="submit">提交</button>
</form>3.2 处理表单数据并渲染页面
js
app.use(express.urlencoded({ extended: true })); // 解析表单数据
app.post('/submit', (req, res) => {
const username = req.body.username;
res.render('welcome', { username });
});3.3 创建 views/welcome.ejs
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
</head>
<body>
<h1>欢迎，<%= username %>！</h1>
</body>
</html>3.4 渲染结果
当表单提交后，页面会显示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
</head>
<body>
<h1>欢迎，张三！</h1>
</body>
</html>总结
渲染动态 HTML 页面是 Web 开发中的常见需求，通过 Express 和模板引擎结合，可以轻松实现根据不同的数据生成页面。在本章节中，我们通过使用 EJS 和查询参数、表单数据等方式，展示了如何动态渲染内容。掌握这些技巧后，您可以根据用户的请求灵活生成和返回页面。