概念
EJS
是一个高效的JavaScript
模板引擎。
模板引擎是为了使用户界面与业务数据(内容)分离而产生的。
简单来说,使用EJS模板引擎就能动态渲染数据。
EJS的使用
- 1)下载安装
yarn add ejs
- 2)配置模板引擎
app.set("view engine" , "ejs");
- 3)配置模板的存放目录
app.set("views","./views")
- 4)在views目录下创建模板文件
xxx.ejs
- 5)使用模板,通过response来渲染模板
response.render('模板名称', 数据对象)
DEMO
在项目目录下新建views文件夹,然后在views文件夹中新建index.ejs模板文件,目录结构如下图:
server.js
代码如下:
let express = require('express')
let app = express()
// 配置渲染引擎
app.set('view engine', 'ejs')
//配置模板文件夹
app.set('views', './views')
app.get('/', (request, response) => {
const title = '<h1>标题1</h1>'
const person = [{name: '周杰伦', age: 30}, {name: '蔡依林', age: 20}]
response.render('index', {title,person})
})
app.listen(3000, (err) => {
if (!err) {
console.log('express 服务器启动成功')
} else {
console.log(err)
}
})
index.ejs
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<%- title %>
<%= title %>
<ul>
<% for (let i = 0; i < person.length; i++) { %>
<li><%- person[i].name %></li>
<li><%- person[i].age %></li>
<% } %>
</ul>
</body>
</html>
运行后,效果如下: