Node.js项目中调用JavaScript的EJS模板库的方法

下面是关于Node.js项目中调用JavaScript的EJS模板库的方法的完整攻略。

EJS模板库

在开始之前，首先需要了解一下EJS模板库，它是一个使用JavaScript模版引擎库，基于Node.js平台上的高效、灵活和易于使用的模板引擎。EJS允许动态生成HTML、XML、JSON等文件，以及将数据注入到模板中。这使得EJS成为Node.js中实现视图和模板功能时的常用工具。EJS的语法简单，易于学习和使用。关于EJS的更多信息可以参考官方文档：https://ejs.co/#docs。

安装EJS

在使用EJS模板库前，需要先安装它。可以使用npm工具完成安装，运行以下命令：

npm install ejs

在Node.js项目中使用EJS模板

有了EJS模板库的基础知识和安装，就可以在Node.js项目中使用它了。

首先需要在Node.js应用中加载EJS模板库：

const ejs = require('ejs');

然后使用ejs.renderFile()函数来渲染EJS模板文件，如下示例：

const ejs = require('ejs');
const greeting = "Hello, world!";
ejs.renderFile('template.ejs', {greeting}, {}, (err, html) => {
    if (err) {
        console.error(err);
    } else {
        console.log(html);
    }
});

在上面的示例中，使用了ejs.renderFile()函数来渲染template.ejs模板文件。第一个参数是模板文件的路径。第二个参数是传递给模板的数据，这里使用了ES6的对象简写语法，变量名greeting的值就是"Hello, world!"。第三个参数是选项对象，这里没有用到。

渲染结果会在回调函数中返回。如果成功，回调函数的第二个参数html就是渲染后的HTML代码。

在模板中，使用<%= %>标签来插入JavaScript代码的值，如下面的示例所示：

<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <p><%= message %></p>
    <ul>
        <% for(let i=0; i<items.length; i++) { %>
            <li><%= items[i] %></li>
        <% } %>
    </ul>
</body>
</html>

在上面的代码中，<%= %>标签被用来插入title和message的值，<% %>标签被用来包含JavaScript代码，例如循环遍历items数组。

示例说明

接下来演示两个使用EJS模板的示例：

示例1：通过在Node.js中生成HTML片段，实现前后端分离的方案

首先是一个不使用传统Server-Side Rendering(SSR)方式，使用EJS模板库生成HTML片段，实现前后端分离库的方案。

在Node.js应用程序中执行以下步骤：

定义一个路由处理器，解析查询字符串参数并渲染模板。

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

app.get('/api/message', function(req, res) {
  const name = req.query.name;
  const message = `Hello, ${name}!`;
  const htmlString = ejs.render('<p><%= message %></p>', { message });
  res.send(htmlString);
});

app.listen(3000);

在前端浏览器中向URL/api/message发起GET请求，传递name参数。

<script>
  const name = prompt("Enter your name:");
  fetch(`/api/message?name=${name}`, {
    credentials: 'include'
  })
    .then(function(response) {
      return response.text();
    })
    .then(function(htmlString) {
      const messageDiv = document.getElementById('message');
      messageDiv.innerHTML = htmlString;
    });
</script>
<div id="message"></div>

在上面的代码中，用户输入自己的名称，JavaScript发送HTTP GET请求，查询参数以name的形式添加到URL中，然后使用fetch API（XMLHttpRequest也可以）发起请求。在响应返回时，额外的JavaScript代码解析并呈现模板，在页面DIV区域显示该HTML片段。

示例2：使用MVC架构模式，使用EJS模板库实现浏览器应用程序

现在我们来看另一个示例，它演示了如何使用EJS模板库实现MVC架构模式并在浏览器上运行应用程序。

在JavaScript中编写控制器和模型代码，使用Node.js Express框架：

在模型中，使用JavaScript类表示数据模型。
控制器接受用于查询模型的API调用并在模板中呈现数据。

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

class QuoteModel {
  getQuote() {
    return 'It is pitch dark. You are likely to be eaten by a grue.';
  }
}
const quoteModel = new QuoteModel();

app.get('/api/quote', function(req, res) {
  const quote = quoteModel.getQuote();
  res.json({quote});
});

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

在模板中，使用EJS标记生成HTML，并使用JavaScript函数调用控制器中的API。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Quotes</title>
  </head>
  <body>
    <h1>JavaScript Quotes</h1>

    <p><%= quote %></p>

    <button id="refresh">Refresh</button>

    <script>
      const refreshButton = document.getElementById('refresh');
      const quoteP = document.querySelector('p');

      function refreshQuote() {
        fetch('/api/quote')
          .then(function(response) {
            return response.json();
          })
          .then(function(data) {
            quoteP.textContent = data.quote;
          });
      }

      refreshButton.addEventListener('click', refreshQuote);

      // Refresh on start.
      refreshQuote();
    </script>
  </body>
</html>

在上面的模板中，使用EJS功能插入控制器返回的值，并在JavaScript中创建一个与DOM事件相关的处理程序。当按钮单击时，控制器API会重新查询数据，并使用新数据刷新HTML。

好了，这就是关于如何在Node.js项目中调用JavaScript的EJS模板库的方法的完整攻略，两个示例希望可以帮助您更好地学习和使用EJS模板库。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js项目中调用JavaScript的EJS模板库的方法 - Python技术站