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>
<% } %>
遍历渲染
<% for(let i = 0; i < arr.length; i++) { %>
<li><%= arr[i] %>li>
<% } %>
<% arr.forEach((item) => { %>
<li><%= item %>li>
<% }) %>
包含（include）
<%- include('user/show', {user: user}); %>
布局（Layouts）
EJS 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局。
<%- include('header'); -%>
<h1>Titleh1>
<p>My pagep>
<%- include('footer'); -%>
1.3 前端使用
如果想要在前端使用ejs，需要引入ejs.js
ejs.compile
可以把模板字符串变成模板
let tHtml = `
<%= str %>
`;
let template = ejs.compile(tHtml)
template()
template是ejs.compile调用后的返回值，它可以叫任意名字。
let html = template({str: "Hello World"})
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'});
2.3 模板语法
通过模板引擎提供的特殊语法，告知模板引擎数据和模板具体的拼接细节。
插值表达式
即{{}}，用来显式数据，将数据变量放入双大括号之中即可。
原始语法
// 标准语法： {{ 数据 }}
// 原始语法：<%= 数据 %>
插值表达式中可以进行运算，最终显式运算的结果。
<h2>{{value}}h2>
<h2>{{a ? b : c}}h2>
<h2>{{a + b}}h2>
<h2><%= value %>h2>
<h2><%= a ? b : c %>h2>
<h2><%= a + b %>h2>
原文输出
如果数据中携带HTML标签，默认不会解析标签，会将其转义后输出。使用以下方式可以解析标签。
{{@ value }}
条件判断
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
数据循环
{{each target}}
{{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
子模板
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
{{include './header.art'}}
<% include('./header.art') %>
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
{{extend './layout.html'}}
{{block 'head'}} ... {{/block}}
3 不同的渲染方式
3.1 服务端渲染
优点
- 可以更好的SEO优化
- 前端耗时更少
- 客户端资源占用少
缺点
- 不便于前端后续维护
- 压力都在服务器，导致服务器压力过大
渲染的过程
- 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
- 数据库 -> 返回数据给服务器 -> 服务器 -> 将数据和模板进行渲染，返回给浏览器 -> 浏览器渲染
3.2 前端JS渲染
优点
- 速度快
- 压力均分给客户端
- 前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定的模板
- 用户体验更好
缺点
- 不能进行SEO优化
渲染的过程
- 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
- 数据库 -> 返回数据给服务器 -> 服务器 -> 数据处理后，返回JSON给浏览器 -> 浏览器根据返回的数据，使用模板渲染页面