Nodejs 如何在客户端试用ejs

Nodejs 如何在客户端试用ejs

在examples中找到一份文件 <html> <head> <script src="…/ejs.js"></script> <script id=“users” type=“text/template”> <% if (names.length) { %> <ul> <% names.forEach(function(name){ %> <li><%= name %></li> <% }) %> </ul> <% } %> </script> <script> onload = function(){ var users = document.getElementById(‘users’).innerHTML; var names = [‘loki’, ‘tobi’, ‘jane’]; var html = ejs.render(users, { names: names }); document.body.innerHTML = html; } </script> </head> <body> </body> </html>

但问题是我想在服务器端的.ejs中放置一份模板（不需要在服务器端解析），在服务器端是会报错的

有没有什么好办法？


2 回复

要在客户端使用 EJS 模板，你需要确保你正确地引入了 EJS 库，并且你的模板被正确地嵌入到 HTML 中。以下是一个详细的步骤和示例代码来展示如何实现这一点。

步骤

  1. 引入 EJS 库： 在客户端使用 EJS 需要先加载 EJS 库。你可以通过 CDN 引入，或者下载后自行引入。

  2. 创建模板： 在 HTML 文件中定义一个 <script> 标签，用于存放 EJS 模板。type 属性可以设置为 text/template 或者 application/json 等，以避免浏览器将其视为 JavaScript 代码。

  3. 渲染模板： 使用 EJS 的 render 方法将数据填充到模板中，并将结果插入到页面的某个部分。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS in Client-Side Example</title>
    <!-- 引入 EJS 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ejs/3.1.7/ejs.min.js"></script>
</head>
<body>
    <!-- 定义 EJS 模板 -->
    <script id="user-template" type="text/template">
        <% if (names.length) { %>
            <ul>
                <% names.forEach(function(name){ %>
                    <li><%= name %></li>
                <% }) %>
            </ul>
        <% } else { %>
            <p>No users found.</p>
        <% } %>
    </script>

    <div id="content"></div>

    <script>
        // 页面加载完成后执行
        window.onload = function() {
            // 获取模板字符串
            var template = document.getElementById('user-template').innerHTML;

            // 定义数据
            var data = {
                names: ['loki', 'tobi', 'jane']
            };

            // 渲染模板
            var renderedHtml = EJS.render(template, data);

            // 将渲染后的 HTML 插入到页面中
            document.getElementById('content').innerHTML = renderedHtml;
        };
    </script>
</body>
</html>

解释

  1. 引入 EJS 库：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ejs/3.1.7/ejs.min.js"></script>

    这行代码通过 CDN 引入了 EJS 库。

  2. 定义 EJS 模板：

    <script id="user-template" type="text/template">
    <% if (names.length) { %>
        <ul>
            <% names.forEach(function(name){ %>
                <li><%= name %></li>
            <% }) %>
        </ul>
    <% } else { %>
        <p>No users found.</p>
    <% } %>
</script>

    这个 <script> 标签中的内容是一个 EJS 模板，它包含了一些条件逻辑和循环结构。<% ... %> 用于执行 JavaScript 代码，<%= ... %> 用于输出变量值。

  3. 渲染模板：

    window.onload = function() {
    var template = document.getElementById('user-template').innerHTML;
    var data = {
        names: ['loki', 'tobi', 'jane']
    };
    var renderedHtml = EJS.render(template, data);
    document.getElementById('content').innerHTML = renderedHtml;
};

    当页面加载完成后，获取模板字符串并使用 EJS.render 方法将其与数据对象一起渲染成最终的 HTML 字符串，然后将其插入到页面中指定的元素里。

这样，你就可以在客户端使用 EJS 模板了。


要在客户端使用 EJS 模板引擎，并且在服务器端保留 .ejs 文件而不进行解析，可以按照以下步骤操作：

  1. 确保服务器不解析 .ejs 文件：确保你的服务器配置不会将 .ejs 文件当作模板引擎来处理。例如，在 Express 中，你可以通过修改路由或视图引擎设置来实现这一点。

  2. 客户端加载 EJS 模板：在客户端，你可以通过 AJAX 请求获取 .ejs 文件中的模板内容，然后在客户端渲染这些模板。

以下是一个简单的示例，展示如何在客户端加载并渲染 .ejs 文件中的模板：

示例代码

假设你的服务器上有一个名为 template.ejs 的文件，内容如下：

<!-- template.ejs -->
<script id="user-template" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>

客户端 JavaScript 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Client Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ejs/3.1.7/ejs.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/path/to/template.ejs')
                .then(response => response.text())
                .then(template => {
                    var names = ['loki', 'tobi', 'jane'];
                    var renderedHtml = ejs.render(template, { names: names });
                    document.body.innerHTML = renderedHtml;
                })
                .catch(error => console.error('Error fetching the template:', error));
        });
    </script>
</head>
<body>
</body>
</html>

解释

  1. 服务器配置：确保你的服务器不会自动解析 .ejs 文件。例如，在 Express 中，你可以通过以下方式配置：

    app.set('views', './views');
app.set('view engine', 'ejs');

// 确保不要将特定路径映射到 EJS 渲染器
app.get('/path/to/template.ejs', (req, res) => {
    res.sendFile(__dirname + '/views/template.ejs');
});

  2. 客户端加载模板：使用 fetch 或其他 AJAX 方法从服务器获取 .ejs 文件的内容。

  3. 渲染模板：使用 EJS 库在客户端渲染模板，并将结果插入到页面中。

这样，你就可以在客户端使用 EJS 模板，同时保持服务器端的 .ejs 文件不被解析。

回到顶部