目录
1. 初识模板引擎
什么是模板引擎？
模板引擎就是为了解决HTML代码和Java代码混合在一起这个问题的，我们可以把HTML内容提取出来单独的放在一个文件中，称为模板，对于一些动态的内容，可以将这些内容在模板中使用占位符占位，当服务器把这些动态的内容计算好了之后，就可以把模板中占位符替换成动态计算的结果，然后把组装好的HTML格式的字符串在返回给浏览器
模板引擎的作用
- 通过组织网页模板和数据，就可以返回一个动态的网页
- 可以分离Servlet Java代码和HTML网页代码（模板引擎的最大优点）
模板引擎的使用原理
2. Thymleaf的使用流程
2.1 通过Maven引入依赖
在Maven中央仓库搜索Thymeleaf
选择一个合适的版本，这里选择的是3.0.12
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.12.RELEASE</version>
</dependency>2.2 创建HTML模板文件
我们创建一个hello.html放到webapp/WEB-INF/templates目录中
注意：web.xml和templates是同级目录，都在WEB-INF目录下，hello.html在templates目录下
<body>
<h3>模板技术学习</h3>
<p th:text="${message}"></p>
</body>说明：th:text是Thymeleaf的语法，后边介绍更多的Thymeleaf语法
2.3 编写Servlet代码
创建HelloServlet类，注解为@WebServlet("/hello")，继承HttpServlet，重写doGet方法，在该类中先创建模板引擎和模板解析器，再设置数据和模板名称，最后再将渲染的html设置到响应正文
创建模板引擎和模板解析器
//创建模板引擎，用于最终完成最终页面渲染工作
TemplateEngine engine = new TemplateEngine();
//创建渲染网页模板的解析器
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());
resolver.setCharacterEncoding("utf-8");//设置渲染时编码
resolver.setPrefix("/WEB-INF/templates/");//前缀
resolver.setSuffix(".html");//后缀
//将解析器绑定到模板引擎中
engine.setTemplateResolver(resolver);设置数据和模板名称
//创建一个web上下文（里面有一个map结构，存放键值对）
WebContext wc = new WebContext(req,resp,getServletContext());
//设置一个键值对数据，键为message(模板中的变量)，值为好好学习(要渲染的值),
wc.setVariable("message","好好学习");
//模板引擎渲染网页模板，第一个参数为模板名称，第二个参数为web上下文
//根据模板解析器设置的前缀+模板名称+后缀为模板路径，查找到模板，再组织模板内容+数据
//返回值就是渲染后的网页字符串
String html = engine.process("hello",wc);将渲染的html设置到响应正文
resp.setContentType("text/html; charset=utf-8");//设置响应编码
resp.getWriter().write(html);2.4 部署程序
1. 点击启动tomcat
2. 输入路径hello
3. 观察结果
2.5 小结
- resovler的setPefix和setSuffix方法指定了从那个目录下筛选哪些文件
- engine.process方法第一个参数指定了要加载哪个模板文件
- webContext中指定了模板变量名和变量值的对应关系（类似哈希表结构），setVariable中的第一个参数要和模板文件中写的 ${message} 匹配
- engine.process方法会把刚才的webContext里的值替换到模板中，并把最终结果写到resp对象中
在上述代码中，有这三个关键类：
- TemplateEngine，核心功能是通过process()方法完成渲染工作
- ServletContextTemplateResolver，核心功能是加载模板文件，为后边的渲染做准备
- webContext，核心功能是组织模板变量要替换为什么值
3. Thymeleaf的常用语法
| 命令 | 功能 |
|---|---|
| th:text | 设置标签文本 |
| th:[HTML标签属性] | 设置标签属性 |
| th:if | 当表达式的结果为真时则显示内容，否则不显示 |
| th:each | 循环访问元素 |
Thymeleaf语法很多，此处只介绍最常用的几个
3.1 设置标签文本
th:text功能就是设置标签文本
<p th:text="${message}"></p>3.2 设置标签属性
常需要设置的属性：href src class style...
示例：设置a标签的href属性
<a th:href="${url1}">百度</a>
<a th:href="${url2}">搜狗</a>对应后端代码：
wc.setVariable("url1","http://www.baidu.com");
wc.setVariable("url2","http://www.sogou.com");运行程序，访问页面，点击就会跳转到对应的页面
3.3 条件判断
th:if功能就是根据条件决定该标签是否显示
<P th:if="${isLogin}">已经登陆</P>
<p th:if="${noLogin}">没有登陆</p> wc.setVariable("isLogin",true);
wc.setVariable("noLogin",false);结果：只显示已经登陆
3.4 循环
th:each的功能是可以循环的构造出多个元素
语法格式：th:each="自定义变量元素名称 : ${集合变量名称}"
<ul>
<Li th:each="u : ${users}">
姓名：<span th:text="${u.name}"></span>
年龄：<span th:text="${u.age}"></span>
</Li>
</ul> wc.setVariable("users",Arrays.asList(
new User("张三",21),
new User("李四",23),
new User("王五",28)
)); private static class User{
private String name;
private int age;
public User(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public int getAge() {
return age;
}
}注意：创建的User类需要提供getter方法
结果：
4. 如何创建一个引擎实例？
上述初始化引擎及解析器的代码，每个需要渲染页面的Servlet类都需要写一次，其实没有必要，一个完整的项目中，TemplateEngine和ServletContextTemplateResolver只需要创建一次并且初始化一次，为了完成这个目的，就需要使用Servlet中的ServletContext和ServletContextListener监听器
4.1 什么是ServletContext
ServletContext是一个Servlet程序中全局储存信息的空间，服务器启动就创建，服务器关闭就销毁
- Tomcat在启动时，它会为每个webapp都创建一个对应的ServletContext
- 一个Web应用的所有Servlet共享同一个ServletContext对象
- 可以通过HttpServlet.getServletContext()或HttpServletRequest.getServletContext()获取到当前webapp的ServletContext对象
理解Context：上下文/环境，常用于设置一些信息到上下文环境中，上下文环境中的对象就可以相互引用对方的数据
多个Servlet之间无法传递数据，但可以通过共享的上下文环境来设置或使用一些数据（数据传递）
ServletContext对象的重要方法
| 方法 | 说明 |
|---|---|
| void setAttribute(String name,Object obj) | 设置属性（键值对） |
| Object getAttribute(String name) | 根据name获取对应的值，如果name为不存在，返回null |
| void removeAttribute(String name) | 删除对应的属性 |
ServletContext类似Map结构，存放键值对数据
4.2 什么是监听器（Listener）
监听器属于一种设计模式，在Servlet运行过程中，会有一些特殊的“时机”供我们执行一些我们自己定义的逻辑，“监听器”就是可以让程序员在这些特殊的时机插入代码
此处学习的ServletContextListener，也是类似一种监听器的设计，在事件发生的时候不用我们自己写代码做事情，而是先注册一个方法到监听器，在某个事件发生后就会自动执行
此处我们需要使用监听器监听ServletContext的创建即可
4.3 修改Thymeleaf引擎初始化代码
结合ServletContext和Listener，我们就可以对之前的Thymeleaf引擎初始化代码做出调整
- 创建监听器，监听ServletContext的创建
- 当ServletContext创建完后，在contextInitialized方法中创建TemplateEngine实例和ServletContextTemplateResolver实例，并完成初始化
- 把创建出来的TemplateEngine实例放到ServletContext中
- 后续Servlet如果要使用TemplateEngine，那么直接从ServletContext获取之前创建好的实例
创建监听器
@WebListener
public class TemplateEngineListener implements ServletContextListener {
@Override
public void contextInitialized(ServletContextEvent sce) {
TemplateEngine engine = new TemplateEngine();
ServletContext sc = sce.getServletContext();
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(sc);
resolver.setCharacterEncoding("utf-8");
resolver.setPrefix("/WEB-INF/templates/");
resolver.setSuffix(".html");
engine.setTemplateResolver(resolver);
sc.setAttribute("engine",engine);
}
@Override
public void contextDestroyed(ServletContextEvent servletContextEvent) {
}
}写前端test.html代码
<p th:text="${content}"></p>写对应的后端代码
@WebServlet("/test")
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ServletContext sc = req.getServletContext();
WebContext wc = new WebContext(req,resp,sc);
wc.setVariable("content","写一篇博客");
TemplateEngine engine = (TemplateEngine) sc.getAttribute("engine");
String html = engine.process("test",wc);
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().write(html);
}
}启动Tomcat，输入url，观察结果
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
