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>

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

示例说明

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

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

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

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

  1. 定义一个路由处理器,解析查询字符串参数并渲染模板。
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);
  1. 在前端浏览器中向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技术站

(0)
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • 说说如何利用 Node.js 代理解决跨域问题

    使用 Node.js 代理可以轻松解决跨域问题。跨域问题是由于浏览器的安全限制,不允许从一个源(协议、域名、端口)获取另一个源的资源。但是,如果服务器端使用 Node.js 代理涉及不同的源,那么跨域问题将不再是问题。 下面是两个示例说明: 基于 http-proxy-middleware 的 Node.js 代理 http-proxy-middleware…

    node js 2023年6月8日
    00
  • 教你如何使用node.js制作代理服务器

    使用Node.js制作代理服务器 什么是代理服务器? 代理服务器是一种位于用户和互联网之间的服务器,它充当了浏览器和真实服务器之间的中间人。在正常情况下,浏览器直接向真实服务器发送请求,获取响应。但是当使用代理服务器时,浏览器将请求发送到代理服务器,代理服务器再将请求发送到真实服务器,并将响应返回给浏览器。代理服务器可以隐藏用户的真实IP地址,加快数据传输速…

    node js 2023年6月8日
    00
  • Nodejs多站点切换Htpps协议详解及简单实例

    关于”Nodejs多站点切换Htpps协议详解及简单实例” 的攻略,我将按照以下内容来进行讲解: 什么是HTTP和HTTPS协议 Nodejs多站点切换HTTPS协议的实现方法 示例说明 1. 什么是HTTP和HTTPS协议 HTTP(HyperText Transfer Protocol,超文本传输协议) 和 HTTPS (HTTP Secure)协议是在…

    node js 2023年6月8日
    00
  • 用Node.JS打造一个恶劣天气实时预警系统

    如何用Node.js打造一个恶劣天气实时预警系统? 选择合适的天气API 在打造天气预警系统的过程中,我们需要选择合适的天气API来获取天气信息。国内的天气API有很多,例如聚合数据、心知天气、天气通等,这些API不仅提供天气信息,还可以获取空气质量、生活指数、日出日落时间等相关信息。 以聚合数据的API为例,在聚合数据官网注册并获取到API的key之后,我…

    node js 2023年6月8日
    00
  • 解决vue eslint开发严格模式警告错误的问题

    下面是解决vue eslint开发严格模式警告错误的问题的完整攻略,具体步骤如下: 1. 理解严格模式 在解决问题之前,我们需要先了解一下什么是严格模式。Vue默认启用了ESLint严格模式,用于捕获一些潜在的问题。这种模式下会对一些非规范行为进行报错提示,提高了代码的质量和可维护性。但是对于一些新手或者还不是很熟悉语法的人来说,这些警告可能会显得很繁琐,并…

    node js 2023年6月9日
    00
  • 关于Node.js中Buffer的一些你可能不知道的用法

    关于Node.js中Buffer的一些你可能不知道的用法完整攻略如下: 简介 在Node.js中,Buffer是一个用于处理二进制数据的对象。在Buffer中,可以存储任意长度的数据,并且可以通过索引访问每个字节。 创建Buffer实例 Node.js中Buffer对象可以通过以下方式创建: // 创建指定长度的Buffer const buf1 = Buf…

    node js 2023年6月8日
    00
  • Node.js的Koa框架上手及MySQL操作指南

    Node.js的Koa框架上手及MySQL操作指南 1. 什么是Koa框架? Koa是一个Node.js的Web框架,由Express的创造者TJ Holowaychuk在2013年创建。它具有轻量、简洁、灵活的特点,对ES6语法的支持也很好,是在Node.js平台下开发Web应用程序的良好选择。 2. Koa框架的安装及使用 要使用Koa框架,首先需要在本…

    node js 2023年6月8日
    00
  • nodejs 使用http进行post或get请求的实例(携带cookie)

    下面我将为你讲解“nodejs 使用http进行post或get请求的实例(携带cookie)”的完整攻略。 一、前置知识 在了解如何使用nodejs进行post或get请求之前,你需要了解以下前置知识: http协议和http请求 url模块:用于解析和格式化URL querystring模块:用于解析和格式化查询字符串 http模块:用于创建客户端和服务…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部