<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;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">app.js</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></div>或配置文件中）设置模板文件的存放路径和使用的模板引擎。</li> <li> <strong>创建模板文件：</strong> 编写带有特定语法和占位符的模板文件（例如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.ejs</pre><div class="contentsignin"></div></div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.pug</pre><div class="contentsignin"></div></div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.hbs</pre><div class="contentsignin"></div></div>文件）。</li> <li> <strong>渲染模板：</strong> 在路由处理函数或控制器中，调用渲染方法（如Express的<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">res.render()</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></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 class="contentsignin"></div></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 class="contentsignin"></div></div><p>运行上述代码，访问<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></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 class="contentsignin"></div></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 class="contentsignin"></div></div>就会渲染成<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="container"></div></pre><div class="contentsignin"></div></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 class="contentsignin"></div></div>和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">if</pre><div class="contentsignin"></div></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> <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 class="contentsignin"></div></div><p>接下来，在你的主应用文件（通常是<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">app.js</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></div>或<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">server.js</pre><div class="contentsignin"></div></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 class="contentsignin"></div></div><p>然后，在你的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views</pre><div class="contentsignin"></div></div>目录下创建对应的模板文件，例如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views/index.ejs</pre><div class="contentsignin"></div></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 class="contentsignin"></div></div><p>以及<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">views/about.ejs</pre><div class="contentsignin"></div></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 class="contentsignin"></div></div><p>当你访问<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></div>时，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">index.ejs</pre><div class="contentsignin"></div></div>会被渲染；访问<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">http://localhost:3000/about</pre><div class="contentsignin"></div></div>时，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">about.ejs</pre><div class="contentsignin"></div></div>会被渲染。Express的<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">res.render()</pre><div class="contentsignin"></div></div><div class="contentsignin"></div></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 class="contentsignin"></div></div>或<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">{{ … }}</pre><div class="contentsignin"></div></div>输出的字符串中的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre><div class="contentsignin"></div></div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre><div class="contentsignin"></div></div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&</pre><div class="contentsignin"></div></div>、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">"</pre><div class="contentsignin"></div></div>等特殊字符会被转换成HTML实体（如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre><div class="contentsignin"></div></div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">></pre><div class="contentsignin"></div></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 class="contentsignin"></div></div>，Handlebars的<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">{{{ … }}}</pre><div class="contentsignin"></div></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 class="contentsignin"></div></div>，恶意用户可能会通过修改<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">template</pre><div class="contentsignin"></div></div>参数来读取服务器上的任意文件，甚至执行危险操作。始终确保模板路径是硬编码的，或者从一个受信任的白名单中选择。</li> <li> <strong>沙箱环境：</strong> 某些模板引擎（如Nunjucks）提供了更严格的沙箱模式，限制模板中可执行的操作，进一步降低了模板被滥用的风险。对于需要高度安全性的应用，可以考虑利用这些特性。</li> </ul> <p>总之，模板引擎是Node.js应用中不可或缺的一部分，它让动态页面生成变得高效且易于管理。但在享受便利的同时，性能优化和安全防护也绝不能掉以轻心，毕竟，一个健壮的应用，安全和速度都得兼顾。</p>
评论（已关闭）
评论已关闭