尽管前后端分离是趋势,但后端模板引擎在一些十分简单的场景下还是广泛使用的,这篇笔记我们介绍下如何在Express中整合模板引擎,这里我们使用的是ejs
模板引擎。
注意:Express官网给出的模板引擎是pug
,但是它过于难用(主要是不符合常人的思维习惯,而非设计的垃圾),因此这里我们主要介绍的是ejs
。
我们可以执行以下命令用npm
安装ejs
模版引擎。
npm install --save ejs
Express使用模板引擎十分简单,处理函数中我们直接使用res.render()
向模板中绑定数据。
const express = require('express');
const path = require('path');
const router = express.Router();
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
router.get('/', (req, res, next) => {
let user = {
username: 'Tom',
password: '123456'
};
res.render('user', { user });
});
app.use(router);
app.listen(8080, () => {
console.log('Express server listen on 8080');
});
注意代码中,我们使用app.set()
设置了两个属性,其中views
设置了模板文件的存放路径,view engine
设置了模板引擎的类型,如果这里没有设置或设置错误,Express是无法找到模板文件的。
下面是ejs
模板的例子。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td><%= user.username %></td>
</tr>
<tr>
<td>密码</td>
<td><%= user.password %></td>
</tr>
</table>
</body>
</html>
由于程序员的本质就是造轮子,我们已经被迫学过不下十个模板引擎了,无非就是绑定数据,编写各种分支循环的渲染逻辑,这里关于ejs
就不多做介绍了。