Node.js+Webpack开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.8　模板渲染

模板引擎能够在应用中使用静态模板文件，在运行时，可以根据实际变量替换模板中的变量，并将渲染后的HTML发送给客户端。

Express可以使用jade、pug、mustache和ejs作为模板引擎，默认的是jade，本书中使用ejs作为模板引擎。

要渲染模板文件，需要安装对应的模板引擎，还需要更改app设置。

4.8.1　使用ejs模板

ejs是接近普通HTML语言的模板，通过标记来赋予HTML模板动态化的能力。

使用npm安装ejs模块：

npm install ejs –save

设置应用模板配置：

app.set('views', './templates');
app.set('view engine', 'ejs');

以下是完整的示例：

渲染模板时传递了title变量，可以在模板中获取到：

// templates/site/index.ejs
<!DOCTYPE html>
<html lang="en">
<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><%= title %></title>
</head>
<body>

</body>
</html>

<%=title%>是渲染变量的语法，title是在路由函数中传递的。

4.8.2　ejs语法

ejs的语法比较多，这里列举比较常用的语法。

转义输出，如果title字符串含有HTML代码，则最终显示时会被转义为实体字符。

<%= title %>

不转义输出，不转义HTML代码，存在XSS（一种客户端JS攻击手段）风险。

<%- title %>

（1）执行JS代码：

<% 代码 %>

（2）导入其他模板：

<% include 模板路径 %>

（3）逻辑判断：

<% if(condition) { %>
// HTML代码
<% } %>

（4）循环：

<% list.forEach((item) => { %>
  <%= item %>
<% }) %>

以下是一个完整的示例：

访问http://localhost:8080时，页面标题为“用户列表”，页面主体为空白。

访问http://localhost:8080?show=1时，页面标题为“用户列表”，页面主体如下：

1-张三

2-夏磊

上一章目录下一章