1.安装：
npm i ejs -S
2.使用：
// 配置ejs模板引擎
app.set('view engine', 'ejs');// 设置模板引擎为 ejs
var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routes/index');
var userRouter = require('./routes/users');
app.set('views', path.join(__dirname, 'views'));// 设置存放模板文件的目录
// 配置ejs模板引擎
app.set('view engine', 'ejs');// 设置模板引擎为 ejs
app.use('/', indexRouter);
app.use('/users', userRouter);
app.listen(3000);
views/users.ejs
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {padding: 50px;font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;}
</style>
</head>
<body>
<h1><%= name.toUpperCase() %></h1>
<p>hello, <%= name %></p>
</body>
</html>
修改 routes/users.js 如下：
routes/users.js
var express = require('express');
var router = express.Router();
router.get('/:name', function(req, res) {
res.render('users', {
name: req.params.name
});
});
module.exports = router;
通过调用 res.render 函数渲染 ejs 模板，res.render 第一个参数是模板的名字，这里是 users 则会匹配 views/users.ejs，第二个参数是传给模板的数据，这里传入 name，则在 ejs 模板中可使用 name。res.render 的作用就是将模板和数据结合生成 html，同时设置响应头中的 Content-Type: text/html，告诉浏览器我返回的是 html，不是纯文本，要按 html 展示。现在我们访问 localhost:3000/users/haha，如下图所示：
image.png
ejs 有 3 种常用标签：
<% code %>：运行 JavaScript 代码，不输出
<%= code %>：显示转义后的 HTML内容
<%- code %>：显示原始 HTML 内容
注意：<%= code %> 和 <%- code %> 都可以是 JavaScript 表达式生成的字符串，当变量 code 为普通字符串时，两者没有区别。当 code 比如为 <h1>hello</h1> 这种字符串时，<%= code %> 会原样输出 <h1>hello</h1>，而 <%- code %> 则会显示 H1 大的 hello 字符串。
下面的例子解释了 <% code %> 的用法：
Data
supplies: ['mop', 'broom', 'duster']
Template
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
Result
<ul>
<li>mop</li>
<li>broom</li>
<li>duster</li>
</ul>
更多 ejs 的标签请看 官方文档。
网友评论