使用thymeleaf时，th:类标签失效的原因

article/2025/10/10 19:57:22

问题出现：

最近学习后端，学到了thymeleaf这一块，学习中出现了一个问题我没有注意到，导致后面页面编写出现重大bug：项目中我使用了thymeleaf，配置的映射路由为：/index，访问首页的时候，tomcat配置有个设置默认打开的网页，我写成了xxx/index.html，我开始的时候运行了一遍，发现界面显示不正确，后来我看视频写的是xxx/index,我就改了下，就运行成功了，也没有深究原因。直到后面使用a标签跳转页面的时候，才发现跳转后的th:标签失效了（<a th:href="@{/xxx.html}">跳转到xxx页面</a>)

问题原因：

我们代码中配置路由的时候是配置的/index，所以thymeleaf就不会对/index.html进行解析，所以打开的是原始的html界面，而th:前缀对于html来说是一个不能理解的东西（就好比你把java代码直接copy到c++编译器里去运行，肯定都无法识别，就相当于两种不同的语言），它是thymeleaf中的内容，所以里面有关thymeleaf的标签就会全部失效。

那我们怎么才能让它生效呢，这就得通过thymeleaf中间的TemplateEngine对象解析（其中的process方法），这样th:标签才能被识别处理。下面是servlet如何使用thymeleaf处理页面的代码：

基本的视图处理servlet类：

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);// ②设置前缀templateResolver.setPrefix(servletContext.getInitParameter("view-prefix"));// ③设置后缀templateResolver.setSuffix(servletContext.getInitParameter("view-suffix"));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());}
}

init方法配置了视图解析器，对拿到的视图名称，设置前后缀，编码等。processTemplate用于解析视图

问题与解决：

FruitServlet类：

package servlet;import bean.Fruit;
import dao.FruitDAO;
import dao.FruitDAOImpl;
import 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 FruitServlet extends ViewBaseServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {FruitDAO fruitDAO = new FruitDAOImpl();List<Fruit> fruitList = fruitDAO.getAllFruits();HttpSession session = req.getSession();session.setAttribute("fruitList",fruitList);// 此处的视图名称是index// 那么thymeleaf会将这个 视图逻辑名称 对应到 物理视图名称 上去// 逻辑视图名称：index// 物理视图名称：view-prefix + 逻辑视图名称 + view-suffix// 所以真实的视图名称是： /index.htmlsuper.processTemplate("index",req,resp);}
}

该类继承了ViewBaseServlet类，调用了父类的processTemplate方法处理index视图，并返回给浏览器。@WebServlet是将映射关系写进web.xml文件中。访问/index就是调用FruitServlet类。

test.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><a href="./index.html">跳转到水果页面，方法1</a><a href="./index">跳转到水果页面，方法2</a>
</div>
</body>
</html>

用于比较使用index和index.html的差别

fruit.html(css省略了)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><div id="fruit_list"><table id="tb_fruit"><tr><th class="tCell">名称</th><th class="tCell">单价</th><th class="tCell">库存</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 th:text="${fruit.name}"></td><td th:text="${fruit.price}"></td><td th:text="${fruit.reserve}"></td><td>删除</td></tr></table></div>
</body>
</html>