模板引擎 - Thymeleaf

1. 模板引擎简介
2. 模板引擎与 Thymeleaf 关系
3. 模板引擎原理
4. 使用流程
- 流程一：通过 maven 引入依赖
- 流程二：创建 HTML 模板文件
- 流程三：编写 servlet 代码
- 流程四：部署程序
5. 理解只创建一个引擎实例？
- （1） ServletContext
- 代码示例：多个 servlet 共享数据
- （2）监听器
- （3）修改 Thymeleaf 引擎初始化代码
6. Thymeleaf 模板语法
- （1）常用命令及功能
- （2）设置标签文本
- （3）设置标签属性
- （4）条件判断
- （5）循环

1. 模板引擎简介

模板引擎？你可能第一次听说模板引擎，估计你会禁不住想问：什么是模板引擎呢？

模板引擎（这里特指用于Web开发的模板引擎），是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档；

从字面上理解：模板引擎最重要的就是模板二字，相当于做好一个模板后并套入对应位置的数据，最终以html的格式展示出来；
将模板设计好之后直接填充数据即可，而不需要重新设计整个页面，这样就提高了页面以及代码的复用性；

2. 模板引擎与 Thymeleaf 关系

Java中模板引擎有许多，模板引擎作为动态网页发展进步的产物，在最初并且流传度最广的jsp就是一个模板引擎，但由于jsp的缺点比较多，所以很多人弃用jsp选用第三方的模板引擎，市面上开源的第三方的模板引擎也比较多，有Thymeleaf、FreeMaker、Velocity等模板引擎受众较广。

使用 Thymeleaf 优点：

动静分离：Thymeleaf 使用 html 通过一些特定标签语法代表其含义，而且并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便了界面的测试和修改；

关系：Thymeleaf 是模板引擎的其中一种产品！！！

3. 模板引擎原理

首先：客户端浏览器发起HTTP请求到 servlet中；
servlet 调用模板引擎组织 模板（静态不动的资源)+数据(动态的资源），将两者拼接为一个HTML字符串；
将该HTML字符串返回给服务端；

4. 使用流程

流程一：通过 maven 引入依赖

在 maven 中央仓库搜索 Thymeleaf 并选择一个版本；

maven 中央仓库网址：https://mvnrepository.com/

进入之后，搜索 Thymeleaf:

选择 3.0.12版本；

拷贝依赖代码到 pox.xml 中并刷新；

同时需要使用servlet，因此也要引入servlet依赖包；

 <dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency>

流程二：创建 HTML 模板文件

创建 hello.html , 放到 webapp/WEB-INF/templates 目录中；

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h3>网页模板技术学习</h3><p th:text="${message}"></p>
</body>
</html>

流程三：编写 servlet 代码

操作步骤：

创建一个模板引擎；
创建一个网页模板解析器；
设置渲染时编码；
设置网页模板文件路径的前缀与后缀；
将模板解析器绑定到模板引擎中；
创建一个web上下文（环境的语义，里面是map结构，存放键值对数据）；
设置键值对的数据；
返回渲染后的网页字符串；

package org.example;import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/hello")public class HelloServlet extends HttpServlet {//模板引擎都是返回HTML，因此重写HTML@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置body格式与编码格式resp.setContentType("text/html; charset = utf-8");//1.创建一个模板引擎TemplateEngine engine = new TemplateEngine();//2.创建一个网页模板解析器ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());//3.设置渲染时编码resolver.setCharacterEncoding("utf-8");//4.设置网页模板文件路径的前缀与后缀resolver.setPrefix("/WEB-INF/templates/");resolver.setSuffix(".html");//5.将模板解析器绑定到模板引擎中engine.setTemplateResolver(resolver);//6.创建一个web上下文（环境的语义，里面是map结构，可以存放键值对数据）WebContext webContext =new WebContext(req,resp,getServletContext());//7.设置键值对的数据：可以理解为：为网页模板定义了一个变量（变量名为message，值为hello模板引擎）webContext.setVariable("message","hello模板引擎");//模板引擎渲染网页模板：第一个参数为模板名称，第二个参数为web上下文（里面保存了数据）//会根据模板解析器设置的前缀+模板名称+后缀，为模板路径，查找到模板，再组织模板内容+数据//8.返回值就是渲染后的网页字符串String html =engine.process("hello",webContext);resp.getWriter().write(html);}
}

流程四：部署程序

通过 URL

http://127.0.0.1:8080/Thymeleaf-study/hello

访问服务器，可以看到网页显示：

此时，页面看起来仍是静态不变的，做如下更改：

 //此处为固定页面显示//webContext.setVariable("message","hello模板引擎");//设置动态变化的 msg=xxxwebContext.setVariable("message", req.getParameter("msg"));

这样就可以通过浏览器地址栏URL输入内容的不同而产生不同的效果！

代码分析：

但以上 servlet 代码，执行效率并不高，且存在冗余！
原因：每次只要发送URL请求：就会创建一个模板引擎及解释器；

优化代码：

将创建的模板引擎与解释器放置在init()方法中，该方法只调用一次！

package org.example;import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/hello")public class HelloServlet extends HttpServlet {//1.创建一个模板引擎TemplateEngine engine = new TemplateEngine();@Overridepublic void init() throws ServletException {//2.创建一个网页模板解析器ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());//3.设置渲染时编码resolver.setCharacterEncoding("utf-8");//4.设置网页模板文件路径的前缀与后缀resolver.setPrefix("/WEB-INF/templates/");resolver.setSuffix(".html");//5.将模板解析器绑定到模板引擎中engine.setTemplateResolver(resolver);}//模板引擎都是返回HTML，因此重写HTML@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置body格式与编码格式resp.setContentType("text/html; charset = utf-8");//创建一个web上下文（环境的语义，里面是map结构，可以存放键值对数据）WebContext webContext =new WebContext(req,resp,getServletContext());//设置键值对的数据：可以理解为：为网页模板定义了一个变量（变量名为message，值为hello模板引擎）//此处为固定页面显示//webContext.setVariable("message","hello模板引擎");//设置动态变化的 msg=xxxwebContext.setVariable("message", req.getParameter("msg"));//模板引擎渲染网页模板：第一个参数为模板名称，第二个参数为web上下文（里面保存了数据）//会根据模板解析器设置的前缀+模板名称+后缀，为模板路径，查找到模板，再组织模板内容+数据//返回值就是渲染后的网页字符串String html =engine.process("hello",webContext);resp.getWriter().write(html);}
}

5. 理解只创建一个引擎实例？

上面优化后，还存在另一个问题？

当创建另一个 Servlet 时，还是需要创建一个 TemplateEngine 实例并进行初始化，因此，还是存在多个模板引擎对象与解析器对象的，但其实是完全没有必要的！！！

一个完整的项目中, 只需要创建一个 TemplateEngine, 并且只初始化一次即可~

为了达到这样的目的, 就需要使用 Servlet 中的 ServletContext 和 “监听器”；

（1） ServletContext

ServletContext 是一个 Servlet 程序中全局储存信息的空间, 服务器开始就存在, 服务器关闭才销毁；

Tomcat 在启动时，它会为每个Web app都创建一个对应的 ServletContext;
一个Web应用中的所有 Servlet 共享同一个 ServletContext 对象;
可以通过 HttpServlet.getServletContext() 或者HttpServletRequest.getServletContext() 获取到当前 webapp 的 ServletContext 对象;

如下所示关系：

ServletContext 对象的重要方法：

方法	功能
`void setAttribute（String name,Object obj）`	设置属性（键值对的形式）
Object getAttribute(String name)	根据属性名获取属性值, 如果 `name` 不存在, 返回 `null`
void removeAttribute(String name)	删除对应的属性

代码示例：多个 servlet 共享数据

（1) 创建一个 writeServlet类；

package org.example;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/write")
public class writeServlet extends HttpServlet {// write?data=xxx@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String data = req.getParameter("data");//将数据写入servlet共享的上下文环境//获取当前servletContext对象ServletContext sc = getServletContext();//设置属性sc.setAttribute("d",data);resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("写入context成功");}
}

（2) 创建一个 readServlet 类；

package org.example;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/read")
public class readServlet extends HttpServlet {// write?data=xxx@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取当前servletContext对象ServletContext sc = getServletContext();//根据属性名，获取属性值Object data = sc.getAttribute("d");resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("读取context："+data);}
}

（3）通过ServletContext进行数据共享；

通过地址栏访问URL：http://localhost:8080/Thymeleaf-study/write?data=shd，可以看到写入成功标志，在http://localhost:8080/Thymeleaf-study/read访问可以读取写入的数据；

如下所示：

（2）监听器

监听器：属于一种设计模式；

使用监听器优点：

将事件发生和事件发生后需要执行的代码进行解耦合；
事先注册一个函数或方法到监听器，在某个事件发生后，自动执行；

使用步骤：

创建一个类；
添加@WebListener 注解，否则 Tomcat 不能识别；
实现 ServletContextListener 接口, 并实现两个方法 contextInitialized 和 contextDestroyed；

代码如下：

package org.example;import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;@WebListenerpublic class MyListener implements ServletContextListener {@Overridepublic void contextInitialized(ServletContextEvent sce) {}@Overridepublic void contextDestroyed(ServletContextEvent sce) {}
}

（3）修改 Thymeleaf 引擎初始化代码

package org.example;import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;@WebListenerpublic class MyListener implements ServletContextListener {@Overridepublic void contextInitialized(ServletContextEvent sce) {//1. 先获取context对象ServletContext context = sce.getServletContext();//2. 创建Templateengine对象TemplateEngine engine = new TemplateEngine();//3.创建解析器对象ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(context);//4.设置resolver的一些属性resolver.setCharacterEncoding("utf-8");resolver.setPrefix("/WEB-INF/templates/");resolver.setSuffix(".html");//5.绑定 resolver 和 engineengine.setTemplateResolver(resolver);//6.将 engine 放到 ServletContext中，供其他servlet使用context.setAttribute("engine",engine);}@Overridepublic void contextDestroyed(ServletContextEvent sce) {}
}

后续的 Servlet 直接从 ServletContext 中获取到 engine 对象即可；

6. Thymeleaf 模板语法

（1）常用命令及功能

命令	功能
`th:text`	在标签体中展示表达式求值结果的文本内容
th:[HTML标签属性]	设置任意的 `HTML` 标签属性的值
th:if	当表达式的结果为真时则显示内容，否则不显示
th:each	循环访问元素

（2）设置标签文本

   <p th:text="${message}"></p>

最后结果：将webContext 设置的键值对数据，键为message的值设置到标签内容中；

（3）设置标签属性

常见的属性：

href
src
class
style…

如设置链接 a 标签的 href 属性：

前端代码：

 <a th:href="${a1}">百度</a><a th:href="${a2}">搜狗</a>

servlet代码：

 package org.example;import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/hello")public class HelloServlet extends HttpServlet {//1.创建一个模板引擎TemplateEngine engine = new TemplateEngine();@Overridepublic void init() throws ServletException {//2.创建一个网页模板解析器ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());//3.设置渲染时编码resolver.setCharacterEncoding("utf-8");//4.设置网页模板文件路径的前缀与后缀resolver.setPrefix("/WEB-INF/templates/");resolver.setSuffix(".html");//5.将模板解析器绑定到模板引擎中engine.setTemplateResolver(resolver);}//模板引擎都是返回HTML，因此重写HTML@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置body格式与编码格式resp.setContentType("text/html; charset = utf-8");//创建一个web上下文（环境的语义，里面是map结构，可以存放键值对数据）WebContext webContext =new WebContext(req,resp,getServletContext());//设置键值对的数据：webContext.setVariable("a1","http://www.baidu.com");webContext.setVariable("a2","http://www.sogou.com");//模板引擎渲染网页模板：第一个参数为模板名称，第二个参数为web上下文（里面保存了数据）//会根据模板解析器设置的前缀+模板名称+后缀，为模板路径，查找到模板，再组织模板内容+数据//返回值就是渲染后的网页字符串String html =engine.process("hello",webContext);resp.getWriter().write(html);}
}

（4）条件判断

 条件判断 th:if ：根据条件决定该标签是否显示；

 <p th:if="${islogin}">已经登陆</p>

当 webContext.setVariable("islogin",true);传入的值为true时，就显示为：已经登陆，否则不显示；

网页显示：

（5）循环

       th:each 循环的构造出多个元素；

 <ul><li th:each="name : ${names}"><span th:text="${name}"></span></li></ul>

  webContext.setVariable("names", Arrays.asList("张三","李四","王五"));

网页显示结果：