简述模板引擎、常见模板引擎以及Thymeleaf常用指令

模板引擎概念：

是为了解决用户界面（显示）与业务数据（内容）分离而产生的。它可以生成特定格式的文档，常用的如格式如HTML、xml以及其他格式的文本格式。

场景使用理解：举个栗子---【开会】
在上高中的时候每次开会都要提前布置场地、拿小板凳。而你上了大学之后每次开会再也不去大操场了,每次开会都去学校的大会议室，桌子板凳音响设备齐全，来之即用……。

模板引擎的功能就类似我们的会议室开会一样拿来即用，将模板设计好之后直接填充数据即可而不需要重新设计整个页面。可以提高页面、代码的复用性。

常见模板引擎

1---【jsp】

Java Server Page,即--- Java服务器页面，根本是一个简化的servlet

优点：

1、功能强大，可以写java代码

2、支持jsp标签（jsp tag）

3、支持表达式语言（el表达式，jstl语法）

4、官方标准，用户群广，丰富的第三方jsp标签库

5、性能良好。jsp编译成class文件执行，有很好的性能表现

缺点： jsp没有明显缺点，由于可以编写java代码，如使用不当容易破坏mvc结构。

2---【velocity】

velocity是较早出现的用于代替jsp的模板语言

优点：

1、不能编写java代码，可以实现严格的mvc分离

2、性能良好，据说比jsp性能还要好些

3、使用表达式语言，据说jsp的表达式语言就是学velocity的

缺点：

1、不是官方标准

2、用户群体和第三方标签库没有jsp多。

3、对jsp标签支持不够好

4、已经很久很久没有维护了

3---【freemarker】

FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。

优点：
1、不能编写java代码，可以实现严格的mvc分离
2、性能非常不错
3、对jsp标签支持良好
4、内置大量常用功能，使用非常方便
5、宏定义（类似jsp标签）非常方便
6、使用表达式语言
缺点：
1、不是官方标准
2、用户群体和第三方标签库没有jsp多

4---【Thymeleaf】

Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎

优点：
静态html嵌入标签属性，浏览器可以直接打开模板文件，便于前后端联调

特点：

1、动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。

这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2、开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3、多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

4、与SpringBoot完美整合：SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

Thymeleaf常用指令

1---【在页面的使用 – 声明】

需要在HTML中的标签中加入：在页面的需要动态数据的标签上使用th:xx 指令来进行动态数据的加载。

2---【在页面的使用 – 使用WebContext中的变量】

Thymeleaf通过${...}来获取model中的变量，这是一种ognl表达式。

小扩展：ognl表达式（以下内容来自于百度百科）

名称：全称是Object-Graph Navigation Language
用途：是一个用来获取和设置 java对象属性的表达式语言。
应用场合：通过使用表达式语法导航对象图，而不是直接调用对象的获取和设置方法可以提供许多应用。比如在XML文件或者脚本文件中嵌入OGNL表达式语法，在JSP页面使用OGNL表达式语法来获取javabean中属性值
操作对象：基于当前对象的上下文。

3---【在HTML中的标签上使用th:xx 指令来动态加载变量】

Servlet中的代码：

        //处理乱码response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获取数据String name ="上山打老虎";//使用sessionHttpSession session = request.getSession();//创建页面容器WebContext contexts = new WebContext(request, response, getServletContext());contexts.setVariable("sname", name);//使用模板引擎解析模板并显示到浏览器templateEngine.process("hahaFile", contexts, response.getWriter());

hahaFile html中的代码 :

穿过传递的是一个对象，需要传递过去对象的属性

//处理乱码response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//创建对象Student su = new Student();su.setSbirthday(new Date());su.setSclassid(0056);su.setSid(2);su.setSname("王老板");su.setSsex("女");//使用sessionHttpSession session = request.getSession();
//      session.setAttribute("stu11", su);//创建页面容器WebContext contexts = new WebContext(request, response, getServletContext());contexts.setVariable("su", su);//使用自建方法的操作//使用模板引擎解析模板并显示到浏览器templateEngine.process("hahaFile", contexts, response.getWriter());

hahaFile html中的代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 th:object="${su}"></h1>
<hr>
<span th:text="${su.sid}"></span>
<div th:text="${su.sname}"></div>
<p th:text="${su.sbirthday}"></p>
<div th:text="${su.ssex}"></div>
<div th:text="${su.sclassid}"></div>
<hr>
</body>
</html>

4---【对象中方法的调用】

public String show() {return "我是一个学生,我叫"+this.sname+",我是一个"+this.ssex+"孩子";}

html中代码：

<!-- 调用方法 --><div th:text="${stu1.show()}"></div>

5---【java中的方法】

学生的姓名中间有个空格：可以使用java中的字符串的方法split来进行分割
<div th:text="${stu1.sname.split(' ')[0]}"></div>
<div th:text="${stu1.sname.split(' ')[1]}"></div>

获取session 内置对象的数据

 Student s2 = new Student();s2.setBirthday(new Date());s2.setClassid(200);s2.setSid(2);s2.setSname("王五");s2.setSsex("男");HttpSession session = request.getSession();session.setAttribute("stu2", s2);

使用方式1：语法糖

前端代码：<div th:text="${session.stu2.sname}"></div>

使用方式2：不使用语法糖

前端代码：<div th:text="${#session.getAttribute('stu2')['sname']}"></div>

获取request内置对象的数据没有语法糖：

Student s3 = new Student();s3.setBirthday(new Date());s3.setClassid(300);s3.setSid(3);s3.setSname("赵六");s3.setSsex("女");request.setAttribute("stu3", s3);

前端代码：<div th:text="${#request.getAttribute('stu3').sname}"></div>

6---【全局对象（工具对象）】

servlet中的代码

Student s2 = new Student();s2.setBirthday(new Date());s2.setClassid(200);s2.setSid(2);s2.setSname("王五");s2.setSsex("男");HttpSession session = request.getSession();session.setAttribute("stu2", s2);

前端代码： <div th:text="${#dates.format(session.stu2.birthday,'yyyy-MM-dd') }"></div>

7---【算术运算符】

int num=20;
context.setVariable("nums", num)

8---【比较运算符： >, = , <= ，==, !=】

9---【逻辑运算符：and , or, not(!)】

String name="上山打老虎";
context.setVariable("hahaname", name);

10---【三元运算符】

Thymeleaf中的三元运算符跟java中的三元运算符是一样的。

servlet代码：

int sex=1;
context.setVariable("sex", sex);

html代码：

<span th:text="${sex} == 1?'男':'女'"></span>

11---【Thymeleaf 在页面的使用 – 逻辑判断】

Thymeleaf中使用th:if 或者 th:unless 进行逻辑判断

<span th:if="${nums} < 20">数量不足</span>
<span th:if="${nums} >= 40">数量刚刚好</span>

12---【Thymeleaf 在页面的使用 – 分支控制】

Thymeleaf中使用两个指令：th:switch 和 th:case 与java中的switch是一样的

//等级
int leval=5;
context.setVariable("leval", leval);

<div th:switch="${leval}"><img src="img/2.png"  th:case="1"><img src="img/3.png"  th:case="2"><img src="img/4.png"  th:case="3"><img src="img/5.png"  th:case="4"><img src="img/1.png"  th:case="*">
</div>

一旦有一个th:case成立，其它的则不再判断。另外th:case="*"表示默认，放最后。

13---【Thymeleaf 在页面的使用 – 循环控制】

循环也是非常频繁使用的需求， Thymeleaf中使用th:each指令来完成与java中的增强for循环类似

<table border="1px"> <tr><th>编号</th> <th>姓名</th> <th>生日</th> <th>性别</th></tr> <tr th:each="student,stat:${stulist}"> <td th:text="${stat.count}">1</td> <td th:text="${student.sname}">张三</td> <td th:text="${#dates.format(student.birthday,'yyyy-MM-dd')}">2222-2-22</td> <td th:text="${student.ssex}==1?'男':'女'">2</td></tr>
</table>

14---【Thymeleaf 在页面的使用 – 在超链接中使用动态数据】

在之前做的数据表格中有对数据的删除或修改，需要用到超链接，每个超链接中携带的参数的值是不同的。语法： th:href=“@{xxxx(key=value,key2=value2,…)}”

<table border="1px"> <tr><th>编号</th> <th>姓名</th> <th>生日</th> <th>性别</th><th>操作</th></tr> <tr th:each="stu,stat:${stulist}"> <td th:text="${stat.count}">1</td> <td th:text="${stu.sname}">张三</td> <td th:text="${#dates.format(stu.birthday,'yyyy-MM-dd')}">2222-2-22</td> <td th:text="${stu.ssex}==1?'男':'女'">2</td><td><a th:href="@{delstu.do(sid=${stu.sid})}">删除</a></td></tr>
</table>