<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();// 设置模板引擎为EJSapp.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><p>首先，确保你的项目已经安装了Express.js和一个你选择的模板引擎，比如我们继续以EJS为例：</p> <div class=”aritcle_card”> <a class=”aritcle_card_img” href=”/xiazai/code/11026″> <img src=”https://img.php.cn/upload/webcode/000/000/015/176468760758998.png” alt=”UQ云商B2B2C系统”> </a> <div class=”aritcle_card_info”> <a href=”/xiazai/code/11026″>UQ云商B2B2C系统</a> <p>UQCMS云商是一款B2B2C电子商务软件 ，非常适合初创的创业者，个人及中小型企业。程序采用PHP+MYSQL,模板采用smarty模板，二次开发，简单方便，无需学习其他框架就可以自行模板设计。永久免费使用，操作简单，安全稳定。支持PC+WAP+微信三种浏览方式，支持微信公众号。</p> <div class=””> <img src=”/static/images/card_xiazai.png” alt=”UQ云商B2B2C系统”> <span>1</span> </div> </div> <a href=”/xiazai/code/11026″ class=”aritcle_card_btn”> <span>查看详情</span> <img src=”/static/images/cardxiayige-3.png” alt=”UQ云商B2B2C系统”> </a> </div> <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>© 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中如何操作模板？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518650.html
微信扫一扫 
支付宝扫一扫 
