详细介绍：【Express教程】第5节：模板引擎

第5节：模板引擎

老曹带你掌握 Express 中的模板引擎！

引言

大家好，我是老曹。在上一节课中，我们深入探讨了请求与响应对象的使用方法。今天，我们将学习如何使用 模板引擎 来实现动态页面渲染。

模板引擎是构建动态网页的核心工具，它允许我们将数据嵌入到 HTML 模板中，从而生成最终的 HTML 页面。Express 支持多种模板引擎，如 EJS、Handlebars 和 Pug。通过本节课的学习，你将全面了解这些模板引擎的特点及其使用方法。准备好了吗？让我们开始吧！

学习目标

在本节课中，我们将完成以下目标：

理解模板引擎的作用及其在 Web 开发中的重要性。
对比 EJS、Handlebars 和 Pug 的特点和适用场景。
掌握如何在 Express 中配置和使用模板引擎。
学会传递数据到模板并渲染动态内容。
实现模板的布局和条件渲染。

1. 模板引擎的基本概念

什么是模板引擎？
模板引擎是一种工具，用于将动态数据嵌入到静态 HTML 模板中，生成最终的 HTML 页面。它的核心功能包括：

数据绑定：将变量插入到模板中。
控制结构：支持条件判断和循环渲染。
布局管理：实现页面复用和模块化设计。

作用：

动态生成 HTML 内容。
提高代码复用性和可维护性。

2. EJS、Handlebars 和 Pug 对比

三种主流模板引擎的特点

✅（1）EJS（Embedded JavaScript Templates）

特点：
- 使用 <% %> 插入 JavaScript 代码。
- 语法简单，易于上手。
- 支持条件判断和循环渲染。
适用场景：适合初学者或需要快速开发的项目。

✅（2）Handlebars

特点：
- 使用 {{ }} 插入变量。
- 语法更接近纯 HTML，逻辑较少。
- 支持模板块（partials）和辅助函数（helpers）。
适用场景：适合需要清晰分离逻辑和视图的项目。

✅（3）Pug（原名 Jade）

特点：
- 使用缩进代替标签，语法极简。
- 支持条件判断、循环和继承。
- 学习曲线较陡，但代码更简洁。
适用场景：适合追求代码简洁和高效的开发者。

小提示：
选择模板引擎时，应根据团队的技术栈和项目需求决定。

3. 配置模板引擎

如何在 Express 中配置模板引擎？

（1）安装模板引擎

以 EJS 为例：

npm install ejs

（2）设置模板引擎

const express = require('express');
const app = express();
app.set('view engine', 'ejs'); // 设置模板引擎为 EJS
app.set('views', './views'); // 设置模板文件目录
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' }); // 渲染模板
});
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});

️ 4. 使用 EJS 渲染动态内容

第一步：创建模板文件
在 views 文件夹下创建 index.ejs：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= title %></title>
        </head>
        <body>
        <h1>Welcome to <%= title %></h1>
        </body>
      </html>

（2）传递数据到模板

app.get('/', (req, res) => {
res.render('index', { title: 'My Awesome Website' });
});

5. 使用 Handlebars 渲染动态内容

第一步：安装和配置 Handlebars

npm install hbs

const express = require('express');
const app = express();
app.set('view engine', 'hbs'); // 设置模板引擎为 Handlebars
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' });
});

（2）创建模板文件

在 views 文件夹下创建 index.hbs：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{title}}</title>
        </head>
        <body>
        <h1>Welcome to {{title}}</h1>
        </body>
      </html>

6. 使用 Pug 渲染动态内容

第一步：安装和配置 Pug

npm install pug

const express = require('express');
const app = express();
app.set('view engine', 'pug'); // 设置模板引擎为 Pug
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' });
});

（2）创建模板文件

在 views 文件夹下创建 index.pug：

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title= title
  body
    h1 Welcome to #{title}

7. 实战演练

综合练习
编写一个应用，包含以下功能：

使用 EJS 渲染用户列表页面。
使用 Handlebars 实现条件渲染（如登录状态）。
使用 Pug 实现页面布局和继承。

代码示例（EJS 用户列表）：

app.get('/users', (req, res) => {
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];
res.render('users', { users });
});

views/users.ejs：

<ul>
  <% users.forEach(user => { %>
  <li><%= user.name %></li>
    <% }) %>
    </ul>

8. 总结

回顾一下我们今天学到了什么：

我们理解了模板引擎的作用及其在 Web 开发中的重要性。
对比了 EJS、Handlebars 和 Pug 的特点和适用场景。
学会了如何在 Express 中配置和使用模板引擎。
掌握了如何传递数据到模板并渲染动态内容。
实现了模板的布局和条件渲染。

老曹寄语：模板引擎是构建动态网页的重要工具，熟练掌握其使用方法将帮助你快速开发高效、灵活的应用。下一节课，我们将探讨静态资源与文件处理。加油，一起进步！

参考资料

⛄希望你喜欢今天的课程！如果有任何问题，欢迎随时提问。老曹在这里陪你一起成长！

posted @ 2026-02-06 16:50 clnchanpin 阅读(17) 评论(0) 收藏举报

刷新页面返回顶部