模板引擎
一、介绍
在一个web应用程序中，如果只是使用服务器端代码来编写客户端html代码，前后端不分离，那么会造成很大的工作量，而且写出来的代码会比较难以阅读和维护。如果只是使用客户端的静态的HTML文件，那么后端的逻辑也会比较难以融入到客户端的HTML代码中。为了便于维护，且使后端逻辑能够比较好的融入前端的HTML代码中，很多第三方开发者就开发出了各种Nodejs模板引擎，其中比较常用的就是Jade/Pug/Ejs和art-template 等模板引擎。
总结一下：运用模板引擎，就是为了方便解决在服务器端渲染和html的维护工作同时也可以让html和数据分离
二、页面渲染模式
2.1、SSR（服务器端渲染）
ssr (Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面响应给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。
优缺点：
1、利用SEO（搜索引擎）
2、页面渲染时间短
3、服务器压力过大
2.2、CSR（客户端渲染）
CSR(Client Side Rendering)：是一种目前流行的渲染方式，页面由js渲染，js运行于浏览器端，所以称客户端渲染。
优缺点：
1、前后端并行开发，开发速度提升
2、首屏渲染时间比较长（首屏加载速度慢）
3、不利于SEO
三、art-template
art-template 是一个简约、超快的模板引擎。
特性
拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小
3.1、安装与配置
安装
npm i -S art-template express-art-template
配置
// 指定art-template模板，并指定模块后缀为.html app.engine('html', require('express-art-template')); // 指定模板视图路径 app.set('views', path.join(__dirname, 'views'));
3.2、语法
art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 Ejs一样。
//控制层返回数据
app.get(uri,(req,res)=>{
res.render(模板,{
username: '张三'
})
})
//输出
//标准语法
{{ username }} // 有转义输出 未转义输出 {{@ username }}
//原始(Ejs)语法
<%= username %> // 有转义输出 未转义输出 <%- username %>
//条件判断
{{if 条件}} … {{else if 条件}} … {{/if}}
<%if (条件){%> … <%}else if (条件){%> … <%}%>
//循环
// 支持 数组和对象的迭代 默认元素变量为$value 下标为$index 可以自定义 {{each target val key}}
{{each target}}
{{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
//子模板 --- 模板包含
{{include './header.art'}}
<% include('./header.art') %>
//注：在子模板中不要有html、head和body标签
//模板继承 模板布局 布局文件
//父模板 layout.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
</head>
<body>
<!-- block占位符 content此占位的名称 -->
{{block 'content'}}{{/block}}
</body>
</html>
//继承父模板 index.html
<!--extend 继承 -->
{{extend './layout.html'}}
{{block 'title'}}首页{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
//注：渲染 index.html后，将自动应用布局骨架
mysql
nodejs操作mysql，需要安装第3方模块
安装
npm i -S mysql