ejs模板引擎

尽管前后端分离是趋势，但后端模板引擎在一些十分简单的场景下还是广泛使用的，这篇笔记我们介绍下如何在Express中整合ejs模板引擎。

注意：Express官网给出的模板引擎是pug，但是它过于难用（主要是不符合常人的思维习惯，而非设计的垃圾），因此这里我们主要介绍的是ejs。

安装ejs

我们可以执行以下命令用npm安装ejs模版引擎。

npm i ejs

配置Express使用ejs

在Express中配置ejs模板引擎非常简单，我们需要设置两个关键属性，模板文件的存放路径和模板引擎的类型。

import express from "express";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const app = express();

// 设置模板文件存放路径
app.set("views", path.join(__dirname, "views"));
// 设置模板引擎类型
app.set("view engine", "ejs");

app.listen(8080, () => {
  console.log("Express server listen on 8080");
});

渲染数据

配置好模板引擎后，在路由处理函数中我们可以使用res.render()方法向模板中绑定数据并渲染页面。

import express from "express";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const app = express();
const router = express.Router();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

router.get("/", (req, res, next) => {
  const user = {
    username: "Tom",
    password: "123456"
  };
  res.render("user", { user });
});

app.use(router);
app.listen(8080, () => {
  console.log("Express server listen on 8080");
});

代码中，res.render()的第一个参数是模板文件名（不需要.ejs后缀），第二个参数是传递给模板的数据对象。Express会自动在views目录下查找对应的模板文件进行渲染。

ejs模板语法

下面是对应的ejs模板文件views/user.ejs的例子。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
</head>
<body>
    <table>
        <tr>
            <td>用户名</td>
            <td><%= user.username %></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><%= user.password %></td>
        </tr>
    </table>
</body>
</html>

常用标签

ejs模板引擎提供了几种常用的标签语法。

标签	说明
`<%= %>`	输出转义后的HTML内容，防止XSS攻击
`<%- %>`	输出原始HTML内容，不进行转义
`<% %>`	执行JavaScript代码，不输出内容
`<%# %>`	注释，不会输出到页面

条件判断

<% if (user.role === "admin") { %>
    <p>欢迎管理员</p>
<% } else { %>
    <p>欢迎普通用户</p>
<% } %>

循环遍历

<ul>
<% for (const item of items) { %>
    <li><%= item.name %></li>
<% } %>
</ul>

也可以使用forEach方法。

<ul>
<% items.forEach((item) => { %>
    <li><%= item.name %></li>
<% }); %>
</ul>

引入子模板

ejs支持通过include引入其他模板文件，便于复用公共部分如页头、页脚等。

<%- include("header") %>

<div class="content">
    <h1>页面内容</h1>
</div>

<%- include("footer") %>

引入子模板时也可以传递数据。

<%- include("userCard", { user: currentUser }) %>

作者：Gacfox