05_模板引擎

模板引擎可以让将数据和HTML模板更加友好的结合，省去繁琐的字符串拼接，使代码更加易于维护。

1 EJS

文档地址：https://ejs.bootcss.com/#install

1.1 安装

npm install ejs

1.2 标签语法

• <% ‘脚本’ 标签，用于流程控制，无输出。
• <%_ 删除其前面的空格符
• <%= 输出数据到模板（输出是转义 HTML 标签）
• <%- 输出非转义的数据到模板
• <%# 注释标签，不执行、不输出内容
• <%% 输出字符串 ‘<%’
• %> 一般结束标签
• -%> 删除紧随其后的换行符
• _%> 将结束标签后面的空格符删除

插值表达式

• <%= key %> 可以把对应的key的值显示在页面上，可以直接把html标签内容展示 innerText
• <%- key %> 可以把对应的key的值显示在页面上，会把html渲染 innerHTML

条件渲染

<% if (false) { %>
    <div>条件为true时显示div>
<% } else { %>
    <div>条件为false时执行div>
<% } %>
1
2
3
4
5

遍历渲染

<% for(let i = 0; i < arr.length; i++) { %>
<li><%= arr[i] %>li>
<% } %>

<% arr.forEach((item) => { %>
<li><%= item %>li>
<% }) %>
1
2
3
4
5
6
7

包含（include）

<%- include('user/show', {user: user}); %>
1

布局（Layouts）

EJS 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局。

<%- include('header'); -%>
<h1>Titleh1>
<p>My pagep>
<%- include('footer'); -%>
1
2
3
4

1.3 前端使用

如果想要在前端使用ejs，需要引入ejs.js

ejs.compile

可以把模板字符串变成模板

let tHtml = `
<%= str %>
`;

let template = ejs.compile(tHtml)
1
2
3
4
5

template()

template是ejs.compile调用后的返回值，它可以叫任意名字。

let html = template({str: "Hello World"})
1

html就是最终生成的HTML代码
ejs可以帮助我们更好的渲染对应的html，如果遇到渲染中需要有条件判断和循环，使用模板要比字符串拼接，更简单一些。

2 art-template

文档地址：https://aui.github.io/art-template/zh-cn/docs/

2.1 安装

npm install art-template

2.2 模板编译

通过调用模板引擎提供的template函数，告知模板引擎将特定模板和特定数据进行拼接，最终返回拼接结果。

// 模板引擎导入
const template = require('art-template');
// 模板编译
// 1.模板位置
// 2.向模板中传递要拼接的数据，对象类型，对象属性可以直接在模板中使用。
// result 拼接结果
const result = template('./views/index.html', {msg: 'Hello, art-template'});
1
2
3
4
5
6
7

2.3 模板语法

通过模板引擎提供的特殊语法，告知模板引擎数据和模板具体的拼接细节。

插值表达式

即{{}}，用来显式数据，将数据变量放入双大括号之中即可。

原始语法

// 标准语法： {{ 数据 }}
// 原始语法：<%= 数据 %>
1
2

插值表达式中可以进行运算，最终显式运算的结果。

<h2>{{value}}h2>
<h2>{{a ? b : c}}h2>
<h2>{{a + b}}h2>


<h2><%= value %>h2>
<h2><%= a ? b : c %>h2>
<h2><%= a + b %>h2>
1
2
3
4
5
6
7
8
9

原文输出

如果数据中携带HTML标签，默认不会解析标签，会将其转义后输出。使用以下方式可以解析标签。

{{@ value }}
1

条件判断

 
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}


<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
1
2
3
4
5
6
7

数据循环

{{each target}}
{{$index}} {{$value}}
{{/each}}

<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
1
2
3
4
5
6
7

子模板

使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。

{{include './header.art'}}


<% include('./header.art') %>
1
2
3
4
5

模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。

{{extend './layout.html'}}
{{block 'head'}} ... {{/block}}
1
2

3 不同的渲染方式

3.1 服务端渲染

优点

• 可以更好的SEO优化
• 前端耗时更少
• 客户端资源占用少

缺点

• 不便于前端后续维护
• 压力都在服务器，导致服务器压力过大

渲染的过程

• 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
• 数据库 -> 返回数据给服务器 -> 服务器 -> 将数据和模板进行渲染，返回给浏览器 -> 浏览器渲染

3.2 前端JS渲染

优点

• 速度快
• 压力均分给客户端
• 前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定的模板
• 用户体验更好

缺点

• 不能进行SEO优化

渲染的过程

• 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
• 数据库 -> 返回数据给服务器 -> 服务器 -> 数据处理后，返回JSON给浏览器 -> 浏览器根据返回的数据，使用模板渲染页面