模板引擎EJS
模板引擎（Tempalte Engine），将页面模板和要显示的数据结合起来生成HTML页面的工具。
EJS
JavaScript模版库，用来将EJS模版结合着JSON数据转换为HTML，并且可以直接在模版中写JavaScript的语法。EJS用于server端（node.js）直接渲染，返回给前端渲染好的页面，当请求某个链接时，直接将渲染完成的页面呈现给用户。EJS可以游离于Express独立使用。
地址：https://ejs.bootcss.com/
EJS标签含义
1、<% '脚本' 标签，用于流程控制，无输出。
2、<%_ 删除其前面的空格符
3、<%= 输出数据到模板（输出是转义 HTML 标签）
4、<%- 输出非转义的数据到模板
5、<%# 注释标签，不执行、不输出内容
6、<%% 输出字符串 '<%'
7、%> 一般结束标签
8、-%> 删除紧随其后的换行符
9、_%> 将结束标签后面的空格符删除
JS调用的方法主要有两个：
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str代码案例1
命令
npm install express --save
npm install ejs --saveapp.js
const express = require("express");
// 创建express的application对象
const app = new express();
const path = require("path");
// ejs模板引擎
const ejs = require("ejs");
//express使用 ejs模板引擎
app.set("view engine", "ejs");
//设置模板文件的目录
// app.set("views", "views");
app.set("views", __dirname + "/views");
app.get("/", (req, res) => {
//获取模板的路径
const filePath = path.resolve(__dirname, "views/index.ejs");
const data = "你好，EJS模板~";
res.render(filePath, {
data: data,
name: "秦始皇",
user: [{
name: "李斯",
age: 112,
sex: "男"
}, {
name: "王贲",
age: 111,
sex: "男"
}, {
name: "章邯",
age: 113,
sex: "男"
}, {
name: "子婴",
age: 115,
sex: "女"
}]
});
});
// 监听端口号和服务器状态
let port = 3000;
app.listen(port, err => {
if (err) {
console.log(err);
return;
}
console.log("服务器启动，请访问" + ` //127.0.0.1:${port}`);
})文件：views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EJS模块</title>
</head>
<body>
<h2>
<%= data %>
</h2>
<h2>
<%- name %>
</h2>
<h2>
<% user.forEach((item)=>{ %>
姓名: <%- item.name %> ---
性别: <%- item.sex %> ---
年龄: <%- item.age %>
<br>
<% }) %>
</h2>
</body>
</html>
代码案例2，后缀为HTML
app.js
const express=require("express");
const app=express();
const path = require("path");
// ejs模板引擎
const ejs=require("ejs");
//修改ejs模板后缀为html
app.engine(".html", ejs.__express);
// 或者
// app.engine('html', require('ejs').renderFile);
//views 文件为模板引擎的目录
app.set("view engine",'html');
//设置模板文件的目录
app.set("views", __dirname + "/views");
app.get("/", (req, res) => {
//路径也要加上html后缀
ejs.renderFile("views/index.html", { list: ['鬼谷子', '墨子', '屈原', '庄子'] }, (err, html) => {
if (err){
throw err;
}
res.send(html);
});
});
// 监听端口号和服务器状态
let port = 3000;
app.listen(port, err => {
if (err) {
console.log(err);
return;
}
console.log("服务器启动，请访问" + ` //127.0.0.1:${port}`);
})文件：views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<% for(var i=0;i<list.length;i++){ %>
<h2><%=list[i]%></h2>
<%}%>
<hr />
<%
list.forEach((item,index)=>{
%>
<h2><%=index %>---------------<%=item %></h2>
<%
});
%>
</body>
</html>