npmjs地址: https://www.npmjs.com/package/ejs
github在线测试: https://ionicabizau.github.io/ejs-playground/
中文文档: https://ejs.bootcss.com
基本使用
安装 ejs 模板引擎
npm install ejs --save
js 部分
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
// 模拟数据
let info = {
name : 'alex',
vip : true,
hobby: [
'js', 'node', 'vue', 'ejs', 'express'
]
};
// 创建http服务并监听端口
http.createServer((request, response, next) => {
if (request.url === "/") {
// fs 读文件
fs.readFile(__dirname + '/index.html', (err, data)=>{
if (err) throw err;
// 渲染模板 并且给模板分配数据
let template = ejs.render(data.toString(), { title:'ejs模板引擎', user:info});
// 响应
response.end(template);
});
}
}).listen(3000);
ejs 模板部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 普通字符串的显示 -->
<title><%= title %></title>
<style>
* { margin: 0; padding: 0; }
.user { font-size: 30px; }
.user span{ color: #f00; }
</style>
</head>
<body>
<div>
<!-- 流程控制 -->
<div class="user">姓名: <%= user.name%>
<% if (user.vip) { %>
<span>vip</span>
<% } %>
</div>
<!-- 循环控制 -->
<div class="user">爱好:
<% user.hobby.forEach(item=>{ %>
<span><%= item %></span>
<% }) %>
</div>
</div>
</body>
</html>
在 express 框架中使用 ejs 模板引擎
安装 express 框架
npm install express --save
express 中文文档: http://www.expressjs.com.cn/4x/api.html
配置 express 的模板引擎为 ejs
// 引入模块
const app = require("express")();
const ejs = require("ejs");
// 设置模板存放的目录
app.set('views', './view');
// 设置模板文件的后缀
app.engine('.html', ejs.__express);
// 使用默认的模板引擎是可以省略
// app.set('view engine', 'html');
在 express 框架中使用 ejs 模板引擎
js 部分
// 引入模块
const app = require("express")();
const ejs = require("ejs");
// 监听端口
app.listen(3000);
// 设置模板存放的目录
app.set('views', './view');
// 设置模板文件的后缀
app.engine('.html', ejs.__express);
// 使用默认的模板引擎是可以省略
// app.set('view engine', 'html');
app.get("/", (request, response) => {
// render,渲染模板
// 此时会自动到 app.set('views', './view')
// 配置好的目录中去找
response.render("index.html",{
title: 'ejs template engine',
user: {
name: 'alex',
vip : true,
hobby: [ "javascript", "Java", "C", "C++" ],
},
});
});
模板部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 普通字符串的显示 -->
<title><%= title %></title>
<style>
* { margin: 0; padding: 0; }
.user { font-size: 30px; }
.user span{ color: #f00; }
</style>
</head>
<body>
<div>
<!-- 流程控制 -->
<div class="user">姓名: <%= user.name%>
<% if (user.vip) { %>
<span>vip</span>
<% } %>
</div>
<!-- 循环控制 -->
<div class="user">爱好:
<% user.hobby.forEach(item=>{ %>
<span><%= item %></span>
<% }) %>
</div>
</div>
</body>