【JavaWeb】-- thymeleaf视图模板技术
什么是thymeleaf？
在html页面上加载java内存数据，这个过程称为渲染，thymeleaf是用来帮助我们做视图渲染的一个技术，当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
thymeleaf特点
- 动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
- 开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
- 与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。
th属性
Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。
| 属性 | 描述 | 示例 |
|---|---|---|
| th:id | 替换 HTML 的 id 属性 |
|
| th:text | 文本替换，转义特殊字符 |
|
| th:utext | 文本替换，不转义特殊字符 |
|
| th:object | 在父标签选择对象，子标签使用 *{…} 选择表达式选取值。 没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。 同时即使选择了对象，子标签仍然可以使用变量表达式。 |
|
| th:value | 替换 value 属性 |
|
| th:with | 局部变量赋值运算 |
|
| th:style | 设置样式 |
|
| th:onclick | 点击事件 |
|
| th:each | 遍历，支持 Iterable、Map、数组等。 |
|
| th:if | 根据条件判断是否需要展示此标签 |
|
| th:unless | 和 th:if 判断相反，满足条件时不显示 |
|
| th:switch | 与 Java 的 switch case语句类似 通常与 th:case 配合使用，根据不同的条件展示不同的内容 |
|
| th:fragment | 模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段 |
|
| th:insert | 布局标签； 将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。 |
|
| th:replace | 布局标签； 使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。 |
|
| th:selected | select 选择框选中 |
|
| th:src | 替换 HTML 中的 src 属性 |
|
| th:inline | 内联属性； 该属性有 text、none、javascript 三种取值， 在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。 |
|
| th:action | 替换表单提交地址 |
|
使用步骤
1、添加thymeleaf的jar包
2、新建Servlet类ViewBaseServlet
package com.myssm.myspringmvc;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class ViewBaseServlet extends HttpServlet {private TemplateEngine templateEngine;@Overridepublic void init() throws ServletException {// 1.获取ServletContext对象ServletContext servletContext = this.getServletContext();// 2.创建Thymeleaf解析器对象ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);// 3.给解析器对象设置参数// ①HTML是默认模式，明确设置是为了代码更容易理解templateResolver.setTemplateMode(TemplateMode.HTML);// ②设置前缀String viewPrefix = servletContext.getInitParameter("view-prefix");templateResolver.setPrefix(viewPrefix);// ③设置后缀String viewSuffix = servletContext.getInitParameter("view-suffix");templateResolver.setSuffix(viewSuffix);// ④设置缓存过期时间（毫秒）templateResolver.setCacheTTLMs(60000L);// ⑤设置是否缓存templateResolver.setCacheable(true);// ⑥设置服务器端编码方式templateResolver.setCharacterEncoding("utf-8");// 4.创建模板引擎对象templateEngine = new TemplateEngine();// 5.给模板引擎对象设置模板解析器templateEngine.setTemplateResolver(templateResolver);}protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {// 1.设置响应体内容类型和字符集resp.setContentType("text/html;charset=UTF-8");// 2.创建WebContext对象WebContext webContext = new WebContext(req, resp, getServletContext());// 3.处理模板数据templateEngine.process(templateName, webContext, resp.getWriter());}
}3、在web.xml文件中添加配置
配置前缀 view-prefix
配置后缀 view-suffix
<!-- 配置上下文参数 --><context-param><param-name>view-prefix</param-name><param-value>/</param-value></context-param><context-param><param-name>view-suffix</param-name><param-value>.html</param-value></context-param>4、使Serlvet继承ViewBaseServlet
public class IndexServlet extends ViewBaseServlet{.....}
5、根据逻辑视图名称得到物理视图名称
处理模板:processTemplate("xxx",request,response);
此处视图名称是index；
thymeleaf会将逻辑视图名称对应到物理视图名称上；
逻辑视图名称：index；
物理视图名称：view-prefix + 逻辑视图名称 + view-suffix（前面的xml配置文件中定义前后缀为/和.html）
所以真实视图名称:/index.html
例：
package com.fruit.servlets;
import com.fruit.dao.FruitDAO;
import com.fruit.dao.impl.FruitDAOImpl;
import com.fruit.pojo.Fruit;
import com.myssm.myspringmvc.ViewBaseServlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {FruitDAO fruitDAO = new FruitDAOImpl();List<Fruit> fruitList = fruitDAO.getFruitList();//保存到session作用域HttpSession session = request.getSession();session.setAttribute("fruitList",fruitList);//处理模板，第一个参数为视图名称，会对应物理视图名称super.processTemplate("index",request,response);}
}
6、编辑html文件
示例：
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"><link rel="stylesheet" href="css/index.css"><script language="JavaScript" src="js/index.js"></script></head><body><div id="div_container"><div id="div_fruit_list"><p class="center f30">欢迎使用水果库存后台管理系统</p><div style="border:0px solid red;width:60%;margin-left:20%;text-align:right;"><a th:href="@{/add.html}" style="border:0px solid blue;margin-bottom:4px;">添加新库存记录</a></div><table id="tbl_fruit"><tr><th class="w20">名称1</th><th class="w20">单价</th><th class="w20">库存</th><th>操作</th></tr><tr th:if="${#lists.isEmpty(session.fruitList)}"><td colspan="4">对不起，库存为空！</td></tr><tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}"><!-- <td><a th:text="${fruit.fname}" th:href="@{'/edit.do?fid='+${fruit.fid}}">苹果</a></td> --><td><a th:text="${fruit.fname}" th:href="@{/edit.do(fid=${fruit.fid})}">苹果</a></td><td th:text="${fruit.price}">5</td><td th:text="${fruit.fcount}">20</td><!-- <td><img src="imgs/del.jpg" class="delImg" th:onclick="'delFruit('+${fruit.fid}+')'"/></td> --><td><img src="imgs/del.jpg" class="delImg" th:onclick="|delFruit(${fruit.fid})|"/></td></tr></table></div></div></body>
</html>