EJS模板引擎的渲染知识点总结及用法详解
引言
随着Web开发技术的快速发展，动态网页的需求日益增长。EJS（Embedded JavaScript Templates）作为一种流行的模板引擎，因其简洁性和强大的功能而受到开发者的青睐。本文将详细介绍EJS的概念、出现的原因、基本用法、高级用法以及常见的使用场景。
EJS模板引擎的概念
EJS是一种使用JavaScript作为模板语言的模板引擎，它允许开发者将HTML和JavaScript代码混合在一起，通过预编译的方式生成纯HTML页面。EJS的核心思想是将数据和视图逻辑分离，使得代码更加模块化和可重用。
EJS出现的原因
在EJS出现之前，开发者通常需要手动拼接字符串来生成HTML页面，这种方法不仅效率低下，而且难以维护。EJS的出现解决了以下问题：
代码复用：EJS允许开发者创建可重用的模板，减少了代码重复。
数据绑定：EJS提供了一种简洁的方式来将数据绑定到HTML元素上。
逻辑控制：EJS支持条件判断和循环控制，使得在模板中处理复杂逻辑变得简单。
Ejs渲染标识
在EJS中，渲染标识是用来在模板中插入动态内容的标记。以下是一些常用的EJS渲染标识和对应的代码示例：
1. 数据输出及执行代码 <%= %> 及 <% %>
用于输出数据，HTML实体会被转义。
html
复制代码
<% var title = '轨道交通充值信息' %>
<% var A = '东环城路'%>
<% var B = '01284740'%>
<% var C = '2024-7-8 10:42:55'%>
<% var D = '19.67元'%>
<% var E = '100.67元'%>
<% var F = '119.67元'%>
<%=title%>
车站名称：<%=A%>
设备编号：<%=B%>
充值时间：<%=C%>
交易前金额：<%=D%>
充值金额：<%=E%>
交易后金额：<%=F%>
文章区块 ：一篇文章可以被分为多个部分，每个部分可以用
博客帖子 ：博客中的每个帖子可以用
论坛帖子 ：论坛中的每个讨论帖子可以用
产品描述 ：电子商务网站中，产品的每个特性或描述部分可以用
在你提供的代码示例中， ），每个段落包含不同的信息点，如车站名称、设备编号、充值时间等。使用 例如： html 复制代码
）和几个段落（
充值信息
车站名称：北京南站
设备编号：001A
充值时间：2023-11-27 10:00
交易前金额：100元
充值金额：50元
交易后金额：150元
在这个例子中，
2. 数据输出（不转义） <%- %>
用于输出数据，不进行HTML实体转义，用于插入HTML代码。
html
复制代码
<%- user.htmlContent %>
3. 条件语句 <% if %> <% else %> <% endif %>
用于在模板中进行条件判断。
html
复制代码
<% if (user.isLoggedIn) { %>
Welcome back, <%= user.name %>!
<% } else { %>
Please log in.
<% } %>
4. 循环语句 <% for %> <% endfor %>
用于在模板中进行循环。
html
复制代码
- <%= items[i] %>
<% for (var i = 0; i < items.length; i++) { %>
<% } %>
5. 包含其他模板 <% include %>
用于在一个模板中包含另一个模板。
html
复制代码
<% include('header.ejs') %>
<% include('footer.ejs') %>
6. 继承和布局 <% extends %> <% block %>
用于模板继承。
html
复制代码
<% block content %>
<% endblock %>
<% extends layout.ejs %>
<% block content %>
My Page
This is my page content.
<% endblock %>
这些标识是EJS模板引擎中的核心，它们允许你将服务器端的数据和逻辑嵌入到HTML模板中，生成动态的网页内容。使用这些标识，你可以构建出功能丰富、响应迅速的Web应用。
EJS的基本用法
1. express中使用Ejs
安装EJS
首先，通过npm安装EJS模块：
bash
复制代码
npm install ejs --save
配置Express.js
在Express.js应用中设置EJS为模板引擎，并指定视图文件的存放目录：
javascript
复制代码
const express = require('express');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
创建EJS模板文件
在views目录下创建EJS模板文件，使用EJS语法插入动态数据：
html
复制代码
<%= message %>
渲染EJS模板
使用res.render()函数渲染模板并发送响应：
javascript
复制代码
app.get('/', (req, res) => {
const title = 'Express.js Template Engine';
const message = 'Hello, EJS!';
res.render('index', { title: title, message: message });
});
2. http中使用Ejs
环境准备
在开始之前，请确保你的开发环境中已经安装了Node.js。你还需要安装EJS模板引擎，可以通过npm来安装：
bash
bash
复制代码
npm install ejs
创建HTTP服务器
我们将使用Node.js的内置http模块来创建一个简单的HTTP服务器。这个服务器将负责接收HTTP请求，并根据请求返回相应的响应。
javascript
javascript
复制代码
const http = require('http');
const fs = require('fs');
var ejs = require('ejs');
// 创建HTTP服务器
const server = http.createServer((req, res) => {
// 处理根目录请求
if (req.url === '/' && req.method === 'GET') {
// 使用EJS模板渲染页面
// ejs.renderFile 是 EJS 模板引擎提供的一个函数，它用于将 EJS 模板文件渲染成 HTML 字符串
ejs.renderFile('index.ejs', { title: 'Hello EJS' }, {}, (err, str) => {
if (err) {
// 处理错误
res.writeHead(500, {'Content-Type': 'text/plain'});
res.end('Error: ' + err.message);
} else {
// 发送渲染后的HTML
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(str);
}
});
}
});
// 监听端口
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
创建EJS模板
EJS模板是一种HTML文件，其中可以包含JavaScript代码。这些代码通常用于动态地插入数据。创建一个名为index.ejs的文件，并添加以下内容：
html
html
复制代码
Welcome to <%= title %>
This is a dynamic page rendered by EJS.
在这个模板中，<%= title %>是EJS的语法，用于插入传递给模板的数据。
运行服务器
保存你的代码和模板文件后，运行Node.js脚本：
bash
bash
复制代码
node your_script_name.js
打开浏览器，访问http://localhost:3000，你将看到一个标题为"Hello EJS"的网页，这正是我们在模板数据中设置的标题。
扩展功能
EJS模板引擎的功能远不止于此。你可以在模板中使用循环、条件语句等JavaScript特性来进一步控制HTML内容的生成。例如，你可以传递一个数组到模板，并使用<% for %>循环来渲染列表。
结论
通过本文的介绍，你应该已经了解了如何使用Node.js、http模块和fs模块来创建一个简单的HTTP服务器，并使用EJS模板引擎来渲染动态网页。EJS是一个强大而灵活的工具，可以帮助你快速构建动态Web应用。随着你对EJS的深入了解，你将能够创建更加复杂和功能丰富的网页。
EJS的高级用法
条件判断
EJS模板中的条件判断使用JavaScript的if语句。这允许模板根据数据动态显示内容。
html
复制代码
<% if (user) { %>
Welcome back, <%= user.name %>!
<% } else { %>
Please log in.
<% } %>
循环控制
EJS模板中的循环控制使用JavaScript的for和while循环。这允许模板遍历数组或对象，并为每个元素生成HTML。
html
复制代码
<% for (let i = 0; i < items.length; i++) { %>
<% } %>
<% for (let key in object) { %>
<%= key %>: <%= object[key] %>
<% } %>
包含其他模板
EJS允许在一个模板中包含另一个模板，这有助于代码复用和模块化。
html
复制代码
<%- include('header') %>
<%- include('footer') %>
<% include('partials/header') %>
继承和布局
EJS支持模板继承，允许你创建一个基础模板（layout），然后在其他模板中继承这个基础模板。
html
复制代码
<%- body %>
<%- extend ../layout.ejs %>
<%- block content %>
My Page
This is my page content.
<%- endblock %>
未转义输出
使用<%- %>可以输出未转义的HTML，这对于插入HTML代码片段非常有用。
html
复制代码
<%- user.htmlContent %>
只执行代码
<% %>标签内的代码不会被输出，只执行代码。
html
复制代码
<%
var fullName = user.firstName + ' ' + user.lastName;
%>
<%= fullName %>
过滤器
EJS允许使用过滤器来处理输出，例如格式化日期或字符串。
html
复制代码
<%= |capitalize %>
<%= user.name | capitalize %>
宏
EJS允许定义宏来重用代码片段。
html
复制代码
<% macro.hello(name) { %>
Hello, <%= name %>!
<% } %>
<%- macro.hello('John') %>
异步宏
EJS也支持异步宏，这对于处理异步数据特别有用。
javascript
复制代码
// 在Express中定义异步宏
app.locals.asyncMacro = {
fetchData: function(callback) {
// 异步获取数据
callback(null, 'Data fetched');
}
};
// 在模板中使用异步宏
<%- asyncMacro.fetchData(function(err, data) { %>
<% if (err) { %>
Error: <%= err %>
<% } else { %>
<%= data %>
<% } %>
<% }) %>
错误处理
EJS模板可以在渲染时捕获错误，并在模板中处理它们。
html
复制代码
<% try { %>
<% } catch (err) { %>
Error: <%= err.message %>
<% } %>
这些高级用法使得EJS成为一个非常灵活和强大的模板引擎，可以满足复杂的Web开发需求。通过这些用法，开发者可以构建出更加动态和交互性强的Web应用。
Ejs模块的数据传递
在Express.js中使用EJS模块的数据传递
在Express.js中，EJS是作为视图引擎集成的，所以数据传递通常是通过res.render()方法完成的。
javascript
复制代码
const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs'); // 设置EJS为视图引擎
app.get('/', (req, res) => {
// 准备数据对象
const data = {
No:'221#',
orderTime:'2024-7-8 11:00',
orderPrice:[
{
menu:'麻辣烫',
orderNo:'*1',
price:'30.00'
},{
menu:'可乐',
orderNo:'*2',
price:'5.00'
},{
menu:'合计',
orderNo:'*3',
price:'40.00'
}
]
}
// 使用res.render()渲染EJS模板，并传递数据
res.render('./static/6-2', data);
// 这是第一个参数，通常是一个字符串，表示要渲染的视图文件的名称（不包括文件扩展名）。
// 这是第二个参数，是一个对象，包含了所有要传递给视图模板的局部变量。
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
在这个例子中，template.ejs是EJS模板文件的名称，它应该位于views文件夹下（或者你可以通过app.set('views', path)设置自定义的模板文件夹路径）。data对象包含了所有模板中需要用到的数据。
在http模块中使用EJS模块的数据传递
javascript
复制代码
const http = require('http')
const fs = require('fs')
const ejs = require('ejs')
http.createServer((request,response) =>{
fs.readFile('./static/6-2.ejs','utf-8',(error,html) =>{
response.writeHead(200, { 'Content-Type': 'text/html' });
const data = {
No:'221#',
orderTime:'2024-7-8 11:00',
orderPrice:[
{
menu:'麻辣烫',
orderNo:'*1',
price:'30.00'
},{
menu:'可乐',
orderNo:'*2',
price:'5.00'
},{
menu:'合计',
orderNo:'*3',
price:'40.00'
}
]
}
response.end(ejs.render(html,data));
});
}).listen(52274,function(){
console.log('服务器监听端口为 http://127.0.0.1:52274')
})
在客服端接收数据
html
复制代码
订单详情
订单编号：<%= No %>
订单时间：<%= orderTime %>
| 菜品名称 | 数量 | 价格 |
|---|---|---|
| <%= item.menu %> | <%= item.orderNo %> | <%= item.price %> |
EJS的使用场景
快速搭建静态网站：EJS可以用于快速构建静态网页，只需将数据绑定到模板中，然后将渲染后的HTML保存到文件中。
构建动态网页：EJS也适用于构建动态网页，将数据绑定到模板中，然后将渲染后的HTML发送给客户端。
前后端不分离的项目：在一些项目中，后端服务直接连接数据库，查询数据后返回到EJS页面，根据EJS语法，从路由处拿到变量后渲染在EJS模板内。
结论
EJS作为一个强大的模板引擎，提供了灵活的方式来处理动态内容的生成，适用于各种Web开发场景，从简单的静态页面到复杂的业务型网站。通过EJS，开发者可以更高效地构建和维护Web应用，提高开发效率和代码质量。