Nodejs ejs 与 前端template.js模板引擎的疑惑？

Nodejs ejs 与 前端template.js模板引擎的疑惑？

以前一个项目是用php做的，我在前端加了template.js模版引擎，写法跟ejs是一样的。 大概是这个样子（但是这一块是不需要node解析的）： <script type=“text/html” id=“app-button-html”> &lt div class=“app-icon”> &lt img src="<%= src %>"> &lt/div> &lt span><%= title %> &lt/span> </script>

现在问题来了，要改成nodejs了，页面一引用就直接报错，因为那个的根本不会有值，是前端js的。 但是又不能整个ejs都不解析，所以有没有解决办法是不解析这一块的呢？ 求大神帮助。谢谢！！！


6 回复

当然可以！让我们来详细讨论一下这个问题，并提供一些解决方案。

背景

在你的项目中，你之前使用的是 PHP 和前端的 template.js 模板引擎。现在你想要将项目迁移到 Node.js，并且希望继续使用 EJS 模板引擎。然而，你遇到了一个问题：前端的 template.js 模板代码被 EJS 错误地解析了，导致页面报错。

示例代码

首先，让我们来看一下你提到的 template.js 模板代码：

<script type="text/html" id="app-button-html">
  <div class="app-icon">
    <img src="<%= src %>">
  </div>
  <span><%= title %></span>
</script>

这段代码是前端的模板代码，不应该被后端的 EJS 引擎解析。但是在 Node.js 项目中，EJS 默认会解析所有 <%= %> 这样的标签。

解决方案

方法1：使用不同的模板标签

你可以配置 EJS 使用不同的标签，这样前端的模板标签就不会被 EJS 解析了。

在 Node.js 中设置 EJS 的配置：

const express = require('express');
const app = express();

// 设置 EJS 配置
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// 设置 EJS 的标签
app.locals.ejsSettings = {
  client: true,
  delimiter: '?' // 更改默认的 <% %> 为其他字符
};

app.get('/', (req, res) => {
  res.render('index.html', { src: 'image.jpg', title: 'My Title' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

然后修改你的 HTML 文件中的 EJS 标签为新的标签：

<script type="text/html" id="app-button-html">
  <div class="app-icon">
    <img src="?= src ?">
  </div>
  <span>?= title ?</span>
</script>

方法2：使用条件语句

你也可以在 EJS 模板中添加条件语句来避免解析特定的部分。

例如，在 EJS 文件中添加条件判断：

<% if (typeof src === 'undefined') { %>
  <script type="text/html" id="app-button-html">
    <div class="app-icon">
      <img src="<%= src %>">
    </div>
    <span><%= title %></span>
  </script>
<% } else { %>
  <!-- 正常渲染 EJS 数据 -->
  <div class="app-icon">
    <img src="<%= src %>">
  </div>
  <span><%= title %></span>
<% } %>

这种方法可以在运行时动态决定是否解析该部分。

总结

通过更改 EJS 的标签或者使用条件语句，你可以避免前端模板代码被 EJS 错误解析。选择适合你项目需求的方法进行实现即可。希望这能帮到你！


ejs可以改分割符的啊。你把<% 改为{%。跟前端不一样就可以了

额 是的啊，谢谢指点！哈哈 刚才没转过来呢？ 那分隔符怎么改呢？ 刚刚找了下 没找到呢。

var ejs = require(‘ejs’); ejs.open = ‘{{’; ejs.close = ‘}}’;

好的 谢谢啊！！！ 这每天进步一点点， 就离高手更进一步了，哈哈！

在使用 Node.js 和 EJS 模板引擎时，可能会遇到与前端 template.js 模板引擎冲突的情况。由于 EJS 会在后端解析模板，因此会尝试解析所有 <% %> 语法。为了防止这种情况，可以采取一些措施来避免 EJS 解析前端的模板字符串。

解决方案

  1. 更改前端模板引擎的语法：可以调整前端模板引擎的语法，以避免与 EJS 的语法冲突。

  2. 使用不同的模板标签：可以在 EJS 中配置不同的模板标签，从而避免与前端模板标签冲突。

  3. 将前端模板放在 <script> 标签中：将前端模板放在 <script> 标签中，EJS 不会解析这部分内容。

示例代码

方法一：更改前端模板引擎的语法

<script type="text/html" id="app-button-html">
<%_ div class="app-icon" _%>
<%_ img src="<%= src %>" _%>
<%/div%>
<%_ span _%><%= title %><%_ /span _%>
</script>

方法二：使用不同的模板标签

在 EJS 中配置不同的模板标签：

// 在服务器端设置 EJS 配置
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').renderFile, {
    client: true,
    compileDebug: false,
    delimiter: '?'
});

// 使用不同的标签
<script type="text/html" id="app-button-html">
? div class="app-icon" ?
img src="?? src ?"?
?/div?
? span ?? title ??/span ?
</script>

方法三：将前端模板放在 <script> 标签中

将前端模板放在 <script> 标签中，EJS 不会解析这部分内容：

<script type="text/html" id="app-button-html">
<div class="app-icon">
<img src="<%= src %>">
</div>
<span><%= title %></span>
</script>

总结

通过以上方法，你可以避免 EJS 在后端解析前端模板引擎的内容。建议将前端模板放在 <script> 标签中，这样可以避免大部分解析冲突。

回到顶部