当前位置：首页 > 文章列表 > 文章 > 前端 > Node.js模板使用详解与实战技巧

Node.js模板使用详解与实战技巧

2025-09-01 15:45:34 0浏览收藏

Node.js模板操作是动态生成HTML的关键，它通过模板引擎（如EJS、Pug）将数据与页面分离，提升代码可维护性并有效防范XSS攻击。本文将深入探讨Node.js中模板引擎的选择、安装配置及使用方法，例如在Express.js框架中，如何配置视图路径、选择模板引擎，并利用`res.render()`方法渲染数据，配合EJS等引擎的语法，轻松实现动态网页内容。同时，文章还将剖析为何Node.js项目需要模板引擎，以及EJS、Pug、Handlebars、Nunjucks等常见引擎的特点与适用场景。此外，本文还将提供在Express.js中集成和使用模板引擎的详细步骤，以及模板引擎性能优化与安全防护的最佳实践，助力开发者构建高效、安全的Node.js应用。

Node.js中操作模板需选择模板引擎（如EJS、Pug等），通过Express配置视图路径和引擎，创建含占位符的模板文件，并在路由中用res.render()传入数据渲染HTML，实现数据与页面分离，提升可维护性并防范XSS风险。

Node.js中如何操作模板？

在Node.js应用中操作模板，核心思路就是利用各种模板引擎来动态生成HTML或其他文本内容。这些引擎就像一个智能的“填空题”机器，你给它一个带有占位符的模板文件，再喂给它一些数据，它就能帮你把占位符替换掉，最终输出一个完整的、个性化的文本字符串，通常是网页内容。

解决方案

Node.js中的模板操作主要围绕着选择一个合适的模板引擎，然后在你的应用中（尤其是Web框架如Express.js中）进行配置和使用。这个过程通常包括以下几个步骤：

选择模板引擎： 根据项目需求和个人偏好，选择一个Node.js兼容的模板引擎，如EJS、Pug (Jade)、Handlebars、Nunjucks等。
安装引擎： 使用npm或yarn将选定的模板引擎安装到你的项目依赖中。
配置应用： 在你的Node.js应用（如果是Express.js，则在app.js或配置文件中）设置模板文件的存放路径和使用的模板引擎。
创建模板文件： 编写带有特定语法和占位符的模板文件（例如.ejs、.pug、.hbs文件）。
渲染模板： 在路由处理函数或控制器中，调用渲染方法（如Express的res.render()），传入模板文件的名称和需要填充的数据对象。引擎会负责解析模板，将数据绑定进去，并返回最终的HTML字符串。

以EJS为例，它以其接近原生HTML的语法而广受欢迎：

// app.js (使用Express.js)
const express = require('express');
const path = require('path');
const app = express();

// 设置模板引擎为EJS
app.set('view engine', 'ejs');
// 设置模板文件存放目录
app.set('views', path.join(__dirname, 'views'));

// 定义一个路由，渲染模板
app.get('/', (req, res) => {
    const data = {
        title: '我的Node.js应用',
        message: '欢迎来到我的主页！',
        items: ['苹果', '香蕉', '橘子']
    };
    // 渲染 views/index.ejs 文件，并传入数据
    res.render('index', data);
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
    <p>以下是一些商品：</p>
    <ul>
        <% items.forEach(function(item){ %>
            <li><%= item %></li>
        <% }); %>
    </ul>
    <p>当前时间：<%= new Date().toLocaleString() %></p>
</body>
</html>

运行上述代码，访问http://localhost:3000，你就能看到一个由EJS动态渲染的HTML页面了。

为什么Node.js项目需要模板引擎？

说实话，刚开始接触Web开发时，我曾天真地以为，只要用Node.js直接拼接字符串就能生成HTML。但很快就发现，那简直是噩梦。当页面结构复杂一点，或者需要展示的数据多一点，代码就会变得一团糟，HTML标签和JavaScript逻辑混在一起，可读性差到令人发指，更别提维护了。

模板引擎的出现，就是为了解决这种“意大利面条式代码”的困境。它提供了一种优雅的方式，将页面结构（HTML/CSS）与动态数据和业务逻辑清晰地分离。你可以在模板文件中专注于布局和展示，而将数据处理和业务逻辑放在JavaScript代码中。这种“关注点分离”原则，让代码更整洁、更易于理解和维护。

想象一下，如果你的网站有头部、尾部、导航栏等公共部分，没有模板引擎，你可能需要在每个页面文件中重复编写这些内容。一旦公共部分需要修改，你就得在所有文件中逐一改动，这效率可想而知。而有了模板引擎，你可以将这些公共部分定义为独立的模板片段，然后在需要的地方引用它们，轻松实现代码复用。它还能帮助你避免手动进行HTML转义，从而降低跨站脚本攻击（XSS）的风险，因为大多数模板引擎都会默认对输出内容进行转义。

常见的Node.js模板引擎有哪些，它们各自的特点是什么？

Node.js生态里，模板引擎的选择确实不少，每种都有其独特的哲学和适用场景。这就像是选择编程语言一样，没有绝对的好坏，只有是否适合你的项目和团队习惯。

EJS (Embedded JavaScript): 这是我个人觉得最容易上手的。它的语法非常接近原生的HTML，只是在需要动态内容的地方用<%%>包裹JavaScript代码。这意味着如果你熟悉HTML，几乎不需要额外学习太多新语法就能开始使用。它的优点是直观、灵活，缺点是由于允许直接嵌入JS代码，如果使用不当，可能会导致模板文件变得复杂，混淆了视图和逻辑。
Pug (formerly Jade): Pug是一个非常独特的模板引擎，它使用缩进和标签名称来定义HTML结构，而不是传统的尖括号。它的语法非常简洁，可以大大减少HTML的冗余代码。比如，div.container就会渲染成。Pug的优势在于其简洁性和强大的功能，如Mixin（混入）、条件语句和循环。但它的学习曲线相对陡峭，对于习惯HTML标签的人来说，初期可能会感到不适应，甚至有些“反直觉”。
Handlebars.js / Mustache.js: 这两种引擎被称为“逻辑无关（logic-less）”模板引擎。它们的设计理念是让模板只负责展示数据，而不能包含复杂的逻辑判断（比如循环和条件判断通常通过each和if等辅助函数实现）。这种严格的区分有助于确保模板的纯粹性，避免业务逻辑渗透到视图层。Handlebars在Mustache的基础上增加了更强大的辅助函数（Helpers）机制，使得在保持逻辑无关的同时，也能处理一些复杂的展示需求。它们非常适合那些希望严格分离前后端职责的项目。
Nunjucks: 如果你用过Python的Jinja2模板引擎，那么Nunjucks会让你感到非常亲切。它是由Mozilla开发的，功能非常强大，支持模板继承、块（blocks）、宏（macros）、过滤器（filters）等高级特性。Nunjucks在功能和灵活性上介于EJS和Handlebars之间，既能保持模板的整洁，又能提供丰富的控制结构。对于需要构建大型、复杂Web应用的项目来说，Nunjucks是一个非常不错的选择。

选择哪个引擎，很大程度上取决于团队的熟悉程度、项目的规模和对“逻辑分离”的严格程度。如果你追求快速开发和HTML的直观性，EJS是个不错的起点；如果喜欢简洁的语法和强大的抽象能力，Pug值得一试；而如果团队对模板逻辑有严格限制，Handlebars/Mustache是理想选择；Nunjucks则在功能和平衡性上表现出色。

如何在Express.js应用中集成和使用模板引擎？

在Express.js中集成模板引擎是一个相当标准化的过程，一旦你理解了核心配置，切换不同的引擎也只是改动几行代码的事。

首先，确保你的项目已经安装了Express.js和一个你选择的模板引擎，比如我们继续以EJS为例：

npm install express ejs

接下来，在你的主应用文件（通常是app.js或server.js）中进行配置：

const express = require('express');
const path = require('path'); // Node.js内置模块，用于处理文件路径
const app = express();

// 1. 设置模板文件的存放目录
// 'views' 是一个约定俗成的目录名，但你可以改成任何你喜欢的名字
// path.join(__dirname, 'views') 确保路径在不同操作系统下都能正确解析
app.set('views', path.join(__dirname, 'views'));

// 2. 设置要使用的模板引擎
// 'view engine' 告诉Express使用哪个已安装的模板引擎来解析模板文件
// 这里我们设置为 'ejs'
app.set('view engine', 'ejs');

// 3. 定义路由并渲染模板
app.get('/', (req, res) => {
    // 准备要传递给模板的数据
    const pageData = {
        title: 'Express与EJS的初次邂逅',
        header: '欢迎光临！',
        features: [
            '简单易学',
            '语法灵活',
            '强大的社区支持'
        ],
        showFooter: true
    };
    // 调用 res.render() 方法来渲染模板
    // 第一个参数是模板文件的名称（不带扩展名，因为我们已经设置了view engine）
    // Express 会自动在 app.set('views', ...) 指定的目录中查找 'index.ejs'
    // 第二个参数是一个对象，其中包含所有要传递给模板的数据
    res.render('index', pageData);
});

app.get('/about', (req, res) => {
    res.render('about', { companyName: '我的公司', year: 2023 });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在运行，请访问 http://localhost:${PORT}`);
});

然后，在你的views目录下创建对应的模板文件，例如views/index.ejs：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        h1 { color: #333; }
        ul { list-style-type: disc; margin-left: 20px; }
        li { margin-bottom: 5px; }
        footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #ccc; color: #666; font-size: 0.9em; }
    </style>
</head>
<body>
    <h1><%= header %></h1>
    <p>以下是我们应用的一些特点：</p>
    <ul>
        <% features.forEach(function(feature) { %>
            <li><%= feature %></li>
        <% }); %>
    </ul>

    <% if (showFooter) { %>
        <footer>
            <p>&copy; 2023 我的应用. 保留所有权利。</p>
        </footer>
    <% } %>
</body>
</html>

以及views/about.ejs：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - <%= companyName %></title>
</head>
<body>
    <h1>关于 <%= companyName %></h1>
    <p>我们是一家致力于提供优质服务的公司。</p>
    <p>成立于 <%= year %> 年。</p>
    <a href="/">返回首页</a>
</body>
</html>

当你访问http://localhost:3000时，index.ejs会被渲染；访问http://localhost:3000/about时，about.ejs会被渲染。Express的res.render()方法会自动处理查找文件、调用引擎渲染以及发送响应给客户端等一系列操作，极大地简化了服务器端生成动态HTML的工作。这种模式让开发者可以专注于数据处理和业务逻辑，而将页面的呈现交给模板引擎。

模板引擎性能优化和安全注意事项有哪些？

使用模板引擎虽然方便，但在实际项目中，我们总得考虑性能和安全这两块，毕竟谁也不想自己的应用又慢又不安全。

性能优化方面：

缓存机制： 大多数现代模板引擎都内置了缓存机制。这意味着模板文件在第一次被读取和解析后，其编译后的版本会被存储起来，后续的渲染请求可以直接使用缓存，避免重复的磁盘I/O和编译过程。在生产环境中，务必确保这个缓存是开启的（Express默认在生产模式下开启模板缓存）。如果你在开发环境中修改了模板文件，但页面没有更新，很可能是缓存导致的问题，通常重启服务器或者在开发模式下禁用缓存可以解决。
避免在模板中执行复杂逻辑： 模板的职责是展示数据，而不是进行复杂的计算或数据库查询。把这些重量级操作放在控制器或服务层，只将处理好的、扁平化的数据传递给模板。模板中过多的循环、条件判断甚至函数调用，都可能拖慢渲染速度。
模板文件拆分与继承： 合理地拆分模板，利用模板引擎的布局（layout）和局部（partial）功能，可以减少重复代码，提高模板的可维护性。例如，将页面的头部、尾部、导航栏等公共部分定义为局部模板，然后在主模板中引用。这样不仅能减少模板文件的大小，也能让引擎更快地定位和编译所需部分。
预编译模板： 对于一些性能要求极高的场景，可以考虑在部署前对模板进行预编译。这意味着在服务器启动或构建阶段，将模板文件编译成JavaScript函数，运行时直接调用这些函数，省去了运行时解析模板的开销。虽然这增加了构建复杂度，但能显著提升渲染性能。

安全注意事项：

XSS（跨站脚本攻击）防护： 这是模板引擎最常见的安全问题之一。如果你的模板直接输出用户输入的内容而没有进行适当的转义，恶意用户可能会注入JavaScript代码，从而窃取用户信息、劫持会话等。
- 自动转义： 幸运的是，大多数现代模板引擎（如EJS、Handlebars、Pug）都默认对输出到HTML的内容进行自动转义（HTML Escaping）。这意味着<%= ... %>或{{ ... }}输出的字符串中的<、>、&、"等特殊字符会被转换成HTML实体（如<, >），从而阻止浏览器将其解析为可执行的代码。
- 禁用自动转义需谨慎： 有时你可能需要输出原始的HTML（例如，富文本编辑器生成的内容）。在这种情况下，模板引擎通常提供一个“不转义”的语法（如EJS的<%- ... %>，Handlebars的{{{ ... }}}）。使用这些语法时，你必须确保传入的内容已经经过了严格的服务器端净化（sanitization），移除了所有潜在的恶意代码。否则，这会成为一个巨大的安全漏洞。
模板路径注入： 避免直接将用户输入作为模板文件的路径。例如，如果你的代码是res.render(req.query.template)，恶意用户可能会通过修改template参数来读取服务器上的任意文件，甚至执行危险操作。始终确保模板路径是硬编码的，或者从一个受信任的白名单中选择。
沙箱环境： 某些模板引擎（如Nunjucks）提供了更严格的沙箱模式，限制模板中可执行的操作，进一步降低了模板被滥用的风险。对于需要高度安全性的应用，可以考虑利用这些特性。