第五部分：第六节 - 模板引擎 (可选)：在厨房里完成“摆盘”

低代码布道师

于 2025-05-18 11:15:35 发布

阅读量219

点赞数 2

文章标签： express

本文链接：https://blog.csdn.net/u012877217/article/details/148041291

版权

到目前为止，我们的 Express 应用主要用于构建 RESTful API，即只返回数据（通常是 JSON）给客户端，由客户端（浏览器中的 JavaScript）负责将数据渲染成 HTML 显示给用户。这种方式称为客户端渲染。

但在某些场景下，我们可能需要在服务器端就将数据和 HTML 模板结合起来，直接生成完整的 HTML 页面发送给客户端。这种方式称为服务器端渲染 (SSR)。例如，对于一些对 SEO（搜索引擎优化）要求比较高的网站，或者希望首屏加载速度更快的情况。

模板引擎 (Template Engine) 就是用来实现服务器端渲染的工具。它允许你在 HTML 模板中嵌入数据变量和控制逻辑（如循环、条件判断），然后由后端程序用实际数据替换掉这些变量和执行逻辑，最终生成完整的 HTML 字符串。这就像在厨房里，不仅把菜做好了，还按照规范把菜“摆盘”好，直接端给顾客。

常见的 Node.js 模板引擎有：

EJS (Embedded JavaScript templates): 语法接近纯 HTML，嵌入 JavaScript 代码。简单易学。
Handlebars: 逻辑更少 (Logic-less)，语法更简洁。
Pug (原 Jade): 使用缩进而非标签闭合来表示 HTML 结构，语法独特。

这里我们以 EJS 为例进行介绍，因为它与 HTML 和 JavaScript 结合紧密，比较直观。

安装 EJS:

在你的 Express 项目目录中：

npm install ejs
# 或者 yarn add ejs

在 Express 中配置和使用 EJS:

设置模板引擎: 告诉 Express 使用 EJS 作为视图引擎。
设置模板文件目录: 告诉 Express 模板文件存放在哪里（通常是项目根目录下的 views 目录）。
渲染模板: 在路由处理函数中调用 res.render() 方法来渲染模板并发送给客户端。

// app.js
const express = require('express');
const app = express();
const port = 3000;
const path = require('path'); // Node.js 内置模块

// ... 其他中间件 (如 morgan, cors, body-parser)

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 设置模板文件存放的目录
// path.join(__dirname, 'views') 表示当前文件所在目录下的 views 目录
app.set('views', path.join(__dirname, 'views'));


// 定义一个路由，渲染一个包含用户列表的页面
app.get('/users-ssr', (req, res) => {
  // 模拟一些用户数据
  const users = [
    { id: 1, name: "张三", age: 30 },
    { id: 2, name: "李四", age: 25 },
    { id: 3, name: "王五", age: 35 }
  ];

  // 渲染 views 目录下的 users.ejs 模板
  // 将 users 数据传递给模板
  res.render('users', { users: users, pageTitle: '用户列表' });
});


// ... 其他路由和中间件 ...

// 启动服务器
app.listen(port, () => {
  console.log(`Express 应用运行在 http://localhost:${port}`);
});

创建一个 views 目录，并在其中创建 users.ejs 文件：

<!DOCTYPE html>
<html>
<head>
  <title><%= pageTitle %></title> <%-- 使用 <%= %> 输出变量值 --%>
</head>
<body>
  <h1><%= pageTitle %></h1>

  <ul>
    <% users.forEach(user => { %> <%-- 使用 <% %> 执行 JavaScript 代码 (循环) --%>
      <li><%= user.name %> (<%= user.age %> 岁)</li>
    <% }); %>
  </ul>

</body>
</html>

EJS 基本语法：

<%= variable %>: 输出变量的值（会对 HTML 特殊字符进行转义）。
<%- variable %>: 输出原始的 HTML 内容（不会转义，谨慎使用）。
<% javascript code %>: 执行 JavaScript 代码，不输出任何内容。
<%# comment %>: 注释。
<%% 或 %>%>: 输出字面量的 <%% 或 %>.

运行 app.js 并访问 http://localhost:3000/users-ssr，你将会看到一个由服务器端渲染生成的包含用户列表的 HTML 页面。

小结： 模板引擎使得 Node.js 应用可以在服务器端动态生成 HTML 页面，实现服务器端渲染。EJS 是一种常用的模板引擎，通过 <%= %> 和 <% %> 语法在 HTML 模板中嵌入数据和逻辑。

练习：

在你的 Express 项目中安装 EJS。
配置 Express 使用 EJS 作为模板引擎，并将模板目录设置为 views。
创建 views 目录和 index.ejs 文件。
在 index.ejs 中，显示一个标题和一个段落，其中标题和段落内容通过变量从后端传入。
在 app.js 中添加一个 GET 路由 /，使用 res.render() 方法渲染 index.ejs 模板，并向模板传递一个标题变量和一个段落内容变量。
（可选）创建一个包含书籍对象的数组，修改 users.ejs 或创建一个新的模板文件，使用循环将书籍列表渲染到 HTML 页面上。