下面是关于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技术站