Nodejs express中使用ejs怎么实现前后台共用同一套模板啊？

Nodejs express中使用ejs怎么实现前后台共用同一套模板啊？

我有一个单独的模板文件test.ejs 后台直接<% include test.ejs %>没问题 前台我想把test.ejs的内容放在script标签中让js调用渲染，咋整？ 类似

<div>
<% include test %>
</div>
<script type="text/template" id="tpl">
    <% include test %> <!-- 这边不想被解析，由客户端渲染 -->
</script>

5 回复

要在 Node.js 中使用 Express 和 EJS 实现前后台共用同一套模板，你可以通过一些技巧来实现。EJS 模板引擎默认会解析所有嵌入的 <% %>, <%= %>, <%- %> 等标签。为了在前台保留这些标签不被解析，我们需要采取一些措施。

示例代码

首先确保你已经在项目中安装了 express 和 ejs：

npm install express ejs

然后，创建一个简单的 Express 应用来处理前后台的请求。

文件结构

/project-root
|-- /views
|   |-- index.ejs
|   |-- partials
|       |-- test.ejs
|-- app.js

部分代码示例

app.js

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

const app = express();

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');

// 设置 views 目录
app.set('views', path.join(__dirname, 'views'));

// 静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 渲染主页
app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

/views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <div>
    <% include ./partials/test.ejs %>
  </div>

  <script type="text/template" id="tpl">
    <% include ./partials/test.ejs %>
  </script>

  <script src="/script.js"></script>
</body>
</html>

/views/partials/test.ejs

<p>This is the content from test.ejs</p>

/public/script.js

document.addEventListener("DOMContentLoaded", function() {
  const template = document.getElementById('tpl').innerHTML;
  // 在这里你可以使用 template 变量进行客户端渲染
  console.log(template);
});

解释

  1. EJS 模板解析：在后台（服务端），EJS 会解析并渲染包含的部分（如 test.ejs）。
  2. 静态模板字符串：在前端（客户端），我们使用 <script type="text/template"> 标签包裹模板内容，防止浏览器解析 EJS 标签。这样客户端可以将模板内容作为字符串获取并进行渲染。

通过这种方式，你可以在前后台共用同一套模板，同时保留 EJS 模板标签以供客户端使用。


用 swig 可以。ejs 不清楚。

直接css display掉不知道能不能达到你想要的结果

前后端使用不同的分隔符<% %> {{ }}

ejs.open = '{{';
ejs.close = '}}';

在 Node.js 中使用 Express 和 EJS 模板引擎时，可以实现前后台共用同一套模板。你的需求是将 test.ejs 的内容同时用于服务器端渲染和客户端 JavaScript 渲染。为了解决这个问题，我们可以采用一些技巧来处理模板的包含问题。

示例代码

首先确保你已经安装了 express 和 ejs：

npm install express ejs

然后在 Express 应用中配置 EJS 并创建路由来处理前后端请求：

app.js

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

const app = express();

// 设置视图引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 主页路由
app.get('/', (req, res) => {
  res.render('index', { title: 'Home' });
});

app.listen(3000, () => console.log('App listening on port 3000'));

views/index.ejs

在这个文件中，你可以分别渲染服务器端和客户端所需的模板内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <!-- 服务器端渲染 -->
    <%- include('test') %>

    <!-- 客户端渲染 -->
    <script type="text/html" id="client-tpl">
        <%- include('test') %>
    </script>

    <script src="/script.js"></script>
</body>
</html>

public/script.js

JavaScript 文件中你可以从 DOM 获取模板字符串并进行客户端渲染：

document.addEventListener("DOMContentLoaded", function() {
  const templateElement = document.getElementById('client-tpl');
  if (templateElement) {
    const templateString = templateElement.innerHTML;
    // 在这里你可以使用模板字符串进行客户端渲染
    console.log(templateString);
  }
});

解释

  • 服务器端渲染：通过 <%- include('test') %> 直接在 HTML 中包含模板内容。
  • 客户端渲染：将模板内容嵌入到一个隐藏的 <script> 标签中，该标签类型设置为 text/html 或 text/template，以避免浏览器将其作为脚本执行。当页面加载完成后，JavaScript 可以从该元素中提取模板内容，并在客户端进行渲染。

这样你就可以在同一份模板文件中实现前后台的共享，同时满足不同场景下的渲染需求。

回到顶部