一、介绍
EJS是一种简单同时又强大的模板引擎,我们可以使用EJS制作动态的html,使用EJS还可以在html文件中插入JS代码,帮助我们更方便快捷的完成任务。
二、使用EJS前的准备
1.首先需要先下载依赖
使用命令 npm i ejs
2.在node中使用时
只需要导包即可直接使用
const ejs = require('ejs');
3.在express中框架使用
设置ejs模板引擎
app.set('view engine', 'ejs');
设置模板文件存放的目录
app.set('views', 'views');
模板文件的后缀必须是.ejs
三、EJS的语法
1.render
// 在路由中渲染模板
app.get('/', (req, res) => {
res.render('index', {place: '上海'});
});
此时在index文件中,我们应该用一个同名参数接收‘上海’
<!DOCTYPE html>
<html>
<head>
<title>欢迎</title>
</head>
<body>
<h1>Welcome to <%= place%></h1>
</body>
</html>
在EJS模板中,<% %>可以用来插入JS代码,<%= %>中可以写入参数。
2.列表渲染
路由:
let users =['jack','peter','alice','joe']
app.get('/', (req, res) => {
res.render('index', {users});
});
index文件:
<ul>
<% user.foreach( item => { %>
<li><%= item %></li>
<% }) %>
</ul>
通过循环渲染就可以把所有用户循环打印出来,避免了大量重复代码
3.条件渲染
有时我们需要根据不同的数据,渲染不同的html内容
路由:
let users =['jack','peter','alice','joe']
app.get('/', (req, res) => {
res.render('index', {users});
});
index文件:
<% if (user.length==0){ %>
<h1>暂无数据</h1>
<% }else{ %>
<ul>
<% user.foreach( item => { %>
<li><%= item %></li>
<% }) %>
</ul>
<% } %>
在渲染数据之前判断了用户数量是否为0,若是则显示暂无数据,若不是,则将用户数据都显示出来。
四、总结
可以看到在EJS中使用JS的代码是非常方便的,基本只需要将其加在<% %>中,就可以对JS进行解析。变量的输出则是依靠<%= %>。此外,我们也可以通过include引入其他的模板文件,能极大的增强代码的复用性。