模板引擎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("服务器启动，请访问" + ` http://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("服务器启动，请访问" + ` http://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>