2025年Thymeleaf配置及入门

大家好，我是讯享网，很高兴认识大家。

Thymeleaf - 视图模板技术

一.配置步骤：

1）添加thymeleaf的jar包

1.新建一个lib文件夹，将jar包都复制粘贴到该文件夹中
在这里插入图片描述
讯享网
2.点击右键，点击Add as Library

3.点击OK

4.打开Project Structure，找到Modules，点击加号，点击Library，找到lib，完成添加

5.在Problems中找到Fix，点击 Add “lib” to the artifact

2）新建一个Servlet类ViewBaseServlet

在src中添加ViewBaseServlet类

该类代码如下：

 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; @Override public 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>

根据逻辑视图名称得到物理视图名称
此处的视图名称是 index
那么thymeleaf会将这个逻辑视图名称对应到物理视图名称上去
逻辑视图名称： index
物理视图名称： view-prefix + 逻辑视图名称 + view-suffix
所以真实的视图名称是： / index .html

4）使得我们的Servlet继承ViewBaseServlet
在这里插入图片描述

二.简单实例
通过自定义的List集合，将数据导入到表格中

使用thymeleaf的标签
th:if , th:unless , th:each , th:text

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 javax.servlet.http.HttpSession; import java.io.IOException; import java.util.ArrayList; import java.util.List; / * @author ZHR * @version 1.0 / //Servlet从3.0版本开始支持注解方式的注册 @WebServlet("/index") public class IndexServlet extends ViewBaseServlet { 
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    List<Fruit> list = new ArrayList<>(4); for(int i = 0; i<4 ;i++){ 
    Fruit fruit = new Fruit("苹果",10,10,100); list.add(fruit); } //保存到作用域 HttpSession session = req.getSession(); session.setAttribute("list",list); //此处视图是index //那么thymeleaf会将这个 逻辑视图名称 对应到物理视图名称上去 //逻辑视图 index //物理视图 view-prefix + 逻辑视图名称 + view-suffix //所以真是视图是 /index.html super.processTemplate("index",req,resp); } }

注意：

1.//Servlet从3.0版本开始支持注解方式的注册
@WebServlet("/index")

2.通过下列代码来处理模板

讯享网super.processTemplate("index",req,resp);

html代码：

<html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <table id="table_fruit"> <tr > <th >名称</th> <th >单价</th> <th>数量</th> <th>操作</th> </tr> <tr th:if="${#lists.isEmpty(session.list)}"> <td colspan="4">库存为空</td> </tr> <!-- if是判断是否为条件真 unless是判断是否为条件假 each是叠代，从session.list中依次取出一个对象赋给fruit --> <tr th:unless="${#lists.isEmpty(session.list)}" th:each="fruit : ${session.list}"> <td th:text="${fruit.getName()}">苹果</td> <td th:text="${fruit.getNum()}">5</td> <td th:text="${fruit.getPrice()}">20</td> <td><img src="1.jpg" height="24px" /></td> </tr> </table> </div> </body> </html>

css代码：

讯享网body{ 
    margin: 0; padding: 0; } div{ 
    position: relative; float: left; } #container{ 
    width: 80%; height: 100%; border: 1px solid blue; margin-left: 10%; } #table_fruit , #table_fruit th , #table_fruit tr , #table_fruit td { 
    border: 1px solid gray; /* 边框合并 */ border-collapse: collapse; /* 居中 */ text-align: center; line-height: 28px; } #table_fruit{ 
    width: 60%; margin-top: 120px; margin-left: 20%; } #table1{ 
    /* 边框合并 */ border-collapse: collapse; /* 居中 */ text-align: center; line-height: 28px; width: 40%; margin-left: 30%; } .btn{ 
    width: 90px; height: 24px; }

2025年Thymeleaf配置及入门

Thymeleaf - 视图模板技术

相关推荐