<blockquote>Node.js中操作模板需选择模板引擎（如EJS、Pug等），通过Express配置视图路径和引擎，创建含占位符的模板文件，并在路由中用res.render()传入数据渲染HTML，实现数据与页面分离，提升可维护性并防范XSS风险。</blockquote>
<p><img src="https://img.php.cn/upload/article/001/221/864/175660014232974.png" alt="node.js中如何操作模板？"></p>
<p>在Node.<a style="color:#f60; text-decoration:underline;" title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js</a>应用中操作模板，核心思路就是利用各种模板引擎来动态生成HTML或其他文本内容。这些引擎就像一个智能的“填空题”机器，你给它一个带有占位符的模板文件，再喂给它一些数据，它就能帮你把占位符替换掉，最终输出一个完整的、个性化的文本字符串，通常是网页内容。</p>
<h3>解决方案</h3>
<p>Node.js中的模板操作主要围绕着选择一个合适的模板引擎，然后在你的应用中（尤其是Web框架如Express.js中）进行配置和使用。这个过程通常包括以下几个步骤：</p>
<ol>
<li>
<strong>选择模板引擎：</strong> 根据项目需求和个人偏好，选择一个Node.js兼容的模板引擎，如EJS、Pug (Jade)、Handlebars、Nunjucks等。</li>
<li>
<strong>安装引擎：</strong> 使用npm或yarn将选定的模板引擎安装到你的项目依赖中。</li>
<li>
<strong>配置应用：</strong> 在你的Node.js应用（如果是Express.js，则在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">app.js</pre>
登录后复制
</div>或配置文件中）设置模板文件的存放路径和使用的模板引擎。</li>
<li>
<strong>创建模板文件：</strong> 编写带有特定语法和占位符的模板文件（例如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.ejs</pre>
登录后复制
</div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.pug</pre>
登录后复制
</div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.hbs</pre>
登录后复制
</div>文件）。</li>
<li>
<strong>渲染模板：</strong> 在路由处理函数或控制器中，调用渲染方法（如Express的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">res.render()</pre>
登录后复制
</div>），传入模板文件的名称和需要填充的数据对象。引擎会负责解析模板，将数据绑定进去，并返回最终的HTML字符串。</li>
</ol>
<p>以EJS为例，它以其接近原生HTML的语法而广受欢迎：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>// 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');
});</pre>
登录后复制
</div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!-- 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></pre>
登录后复制
</div><p>运行上述代码，访问<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000</pre>
登录后复制
</div>，你就能看到一个由EJS动态渲染的HTML页面了。</p>
<h3>为什么Node.js项目需要模板引擎？</h3>
<p>说实话，刚开始接触Web开发时，我曾天真地以为，只要用Node.js直接拼接字符串就能生成HTML。但很快就发现，那简直是噩梦。当页面结构复杂一点，或者需要展示的数据多一点，代码就会变得一团糟，HTML标签和JavaScript逻辑混在一起，可读性差到令人发指，更别提维护了。</p>
<p>模板引擎的出现，就是为了解决这种“意大利面条式代码”的困境。它提供了一种优雅的方式，将页面结构（HTML/CSS）与动态数据和业务逻辑清晰地分离。你可以在模板文件中专注于布局和展示，而将数据处理和业务逻辑放在JavaScript代码中。这种“关注点分离”原则，让代码更整洁、更易于理解和维护。</p>
<p>想象一下，如果你的网站有头部、尾部、导航栏等公共部分，没有模板引擎，你可能需要在每个页面文件中重复编写这些内容。一旦公共部分需要修改，你就得在所有文件中逐一改动，这效率可想而知。而有了模板引擎，你可以将这些公共部分定义为独立的模板片段，然后在需要的地方引用它们，轻松实现代码复用。它还能帮助你避免手动进行HTML转义，从而降低跨站脚本攻击（XSS）的风险，因为大多数模板引擎都会默认对输出内容进行转义。</p>
<h3>常见的Node.js模板引擎有哪些，它们各自的特点是什么？</h3>
<p>Node.js生态里，模板引擎的选择确实不少，每种都有其独特的哲学和适用场景。这就像是选择<a style="color:#f60; text-decoration:underline;" title="编程语言" href="https://www.php.cn/zt/16832.html" target="_blank">编程语言</a>一样，没有绝对的好坏，只有是否适合你的项目和团队习惯。</p>
<ul>
<li>
<strong>EJS (Embedded JavaScript):</strong> 这是我个人觉得最容易上手的。它的语法非常接近原生的HTML，只是在需要动态内容的地方用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><%%></pre>
登录后复制
</div>包裹JavaScript代码。这意味着如果你熟悉HTML，几乎不需要额外学习太多新语法就能开始使用。它的优点是直观、灵活，缺点是由于允许直接嵌入JS代码，如果使用不当，可能会导致模板文件变得复杂，混淆了视图和逻辑。</li>
<li>
<strong>Pug (formerly Jade):</strong> Pug是一个非常独特的模板引擎，它使用缩进和标签名称来定义HTML结构，而不是传统的尖括号。它的语法非常简洁，可以大大减少HTML的冗余代码。比如，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">div.container</pre>
登录后复制
</div>就会渲染成<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="container"></div></pre>
登录后复制
</div>。Pug的优势在于其简洁性和强大的功能，如Mixin（混入）、条件语句和循环。但它的学习曲线相对陡峭，对于习惯HTML标签的人来说，初期可能会感到不适应，甚至有些“反直觉”。</li>
<li>
<strong>Handlebars.js / Mustache.js:</strong> 这两种引擎被称为“逻辑无关（logic-less）”模板引擎。它们的设计理念是让模板只负责展示数据，而不能包含复杂的逻辑判断（比如循环和条件判断通常通过<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">each</pre>
登录后复制
</div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">if</pre>
登录后复制
</div>等辅助函数实现）。这种严格的区分有助于确保模板的纯粹性，避免业务逻辑渗透到视图层。Handlebars在Mustache的基础上增加了更强大的辅助函数（Helpers）机制，使得在保持逻辑无关的同时，也能处理一些复杂的展示需求。它们非常适合那些希望严格分离前后端职责的项目。</li>
<li>
<strong>Nunjucks:</strong> 如果你用过Python的Jinja2模板引擎，那么Nunjucks会让你感到非常亲切。它是由Mozilla开发的，功能非常强大，支持模板继承、块（blocks）、宏（<a style="color:#f60; text-decoration:underline;" title="mac" href="https://www.php.cn/zt/17259.html" target="_blank">mac</a>ros）、过滤器（filters）等高级特性。Nunjucks在功能和灵活性上介于EJS和Handlebars之间，既能保持模板的整洁，又能提供丰富的控制结构。对于需要构建大型、复杂Web应用的项目来说，Nunjucks是一个非常不错的选择。</li>
</ul>
<p>选择哪个引擎，很大程度上取决于团队的熟悉程度、项目的规模和对“逻辑分离”的严格程度。如果你追求快速开发和HTML的直观性，EJS是个不错的起点；如果喜欢简洁的语法和强大的抽象能力，Pug值得一试；而如果团队对模板逻辑有严格限制，Handlebars/Mustache是理想选择；Nunjucks则在功能和平衡性上表现出色。</p>
<h3>如何在Express.js应用中集成和使用模板引擎？</h3>
<p>在Express.js中集成模板引擎是一个相当标准化的过程，一旦你理解了核心配置，切换不同的引擎也只是改动几行代码的事。</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/8889">
<img src="https://img.php.cn/upload/webcode/000/000/004/175711680870388.jpg" alt="易森网络企业版">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/8889">易森网络企业版</a>
<p>如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="易森网络企业版">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/8889" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="易森网络企业版">
</a>
</div>
<p>首先，确保你的项目已经安装了Express.js和一个你选择的模板引擎，比如我们继续以EJS为例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:bash;toolbar:false;'>npm install express ejs</pre>
登录后复制
</div><p>接下来，在你的主应用文件（通常是<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">app.js</pre>
登录后复制
</div>或<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">server.js</pre>
登录后复制
</div>）中进行配置：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>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}`);
});</pre>
登录后复制
</div><p>然后，在你的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views</pre>
登录后复制
</div>目录下创建对应的模板文件，例如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views/index.ejs</pre>
登录后复制
</div>：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!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></pre>
登录后复制
</div><p>以及<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views/about.ejs</pre>
登录后复制
</div>：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!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></pre>
登录后复制
</div><p>当你访问<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000</pre>
登录后复制
</div>时，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">index.ejs</pre>
登录后复制
</div>会被渲染；访问<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000/about</pre>
登录后复制
</div>时，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">about.ejs</pre>
登录后复制
</div>会被渲染。Express的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">res.render()</pre>
登录后复制
</div>方法会自动处理查找文件、调用引擎渲染以及发送响应给客户端等一系列操作，极大地简化了服务器端生成动态HTML的工作。这种模式让开发者可以专注于数据处理和业务逻辑，而将页面的呈现交给模板引擎。</p>
<h3>模板引擎性能优化和安全注意事项有哪些？</h3>
<p>使用模板引擎虽然方便，但在实际项目中，我们总得考虑性能和安全这两块，毕竟谁也不想自己的应用又慢又不安全。</p>
<p><strong>性能优化方面：</strong></p>
<ul>
<li>
<strong>缓存机制：</strong> 大多数现代模板引擎都内置了缓存机制。这意味着模板文件在第一次被读取和解析后，其编译后的版本会被存储起来，后续的渲染请求可以直接使用缓存，避免重复的磁盘I/O和编译过程。在生产环境中，务必确保这个缓存是开启的（Express默认在生产模式下开启模板缓存）。如果你在开发环境中修改了模板文件，但页面没有更新，很可能是缓存导致的问题，通常重启服务器或者在开发模式下禁用缓存可以解决。</li>
<li>
<strong>避免在模板中执行复杂逻辑：</strong> 模板的职责是展示数据，而不是进行复杂的计算或数据库查询。把这些重量级操作放在控制器或服务层，只将处理好的、扁平化的数据传递给模板。模板中过多的循环、条件判断甚至函数调用，都可能拖慢渲染速度。</li>
<li>
<strong>模板文件拆分与继承：</strong> 合理地拆分模板，利用模板引擎的布局（layout）和局部（partial）功能，可以减少重复代码，提高模板的可维护性。例如，将页面的头部、尾部、导航栏等公共部分定义为局部模板，然后在主模板中引用。这样不仅能减少模板文件的大小，也能让引擎更快地定位和编译所需部分。</li>
<li>
<strong>预编译模板：</strong> 对于一些性能要求极高的场景，可以考虑在部署前对模板进行预编译。这意味着在服务器启动或构建阶段，将模板文件编译成JavaScript函数，运行时直接调用这些函数，省去了运行时解析模板的开销。虽然这增加了构建复杂度，但能显著提升渲染性能。</li>
</ul>
<p><strong>安全注意事项：</strong></p>
<ul>
<li>
<strong>XSS（跨站脚本攻击）防护：</strong> 这是模板引擎最常见的安全问题之一。如果你的模板直接输出用户输入的内容而没有进行适当的转义，恶意用户可能会注入JavaScript代码，从而窃取用户信息、劫持会话等。<ul>
<li>
<strong>自动转义：</strong> 幸运的是，大多数现代模板引擎（如EJS、Handlebars、Pug）都默认对输出到HTML的内容进行自动转义（HTML Escaping）。这意味着<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><%= ... %></pre>
登录后复制
</div>或<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">{{ ... }}</pre>
登录后复制
</div>输出的字符串中的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>
登录后复制
</div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre>
登录后复制
</div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&</pre>
登录后复制
</div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">"</pre>
登录后复制
</div>等特殊字符会被转换成HTML实体（如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre>
登录后复制
</div>），从而阻止<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>将其解析为可执行的代码。</li>
<li>
<strong>禁用自动转义需谨慎：</strong> 有时你可能需要输出原始的HTML（例如，富文本编辑器生成的内容）。在这种情况下，模板引擎通常提供一个“不转义”的语法（如EJS的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><%- ... %></pre>
登录后复制
</div>，Handlebars的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">{{{ ... }}}</pre>
登录后复制
</div>）。使用这些语法时，你必须确保传入的内容已经经过了严格的服务器端净化（sanitization），移除了所有潜在的恶意代码。否则，这会成为一个巨大的安全漏洞。</li>
</ul>
</li>
<li>
<strong>模板路径注入：</strong> 避免直接将用户输入作为模板文件的路径。例如，如果你的代码是<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">res.render(req.query.template)</pre>
登录后复制
</div>，恶意用户可能会通过修改<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">template</pre>
登录后复制
</div>参数来读取服务器上的任意文件，甚至执行危险操作。始终确保模板路径是硬编码的，或者从一个受信任的白名单中选择。</li>
<li>
<strong>沙箱环境：</strong> 某些模板引擎（如Nunjucks）提供了更严格的沙箱模式，限制模板中可执行的操作，进一步降低了模板被滥用的风险。对于需要高度安全性的应用，可以考虑利用这些特性。</li>
</ul>
<p>总之，模板引擎是Node.js应用中不可或缺的一部分，它让动态页面生成变得高效且易于管理。但在享受便利的同时，性能优化和安全防护也绝不能掉以轻心，毕竟，一个健壮的应用，安全和速度都得兼顾。</p>
以上就是Node.js中如何操作模板？的详细内容，更多请关注php中文网其它相关文章！
广告
878
收藏
