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

小柒、Q

已于 2022-10-07 17:03:14 修改

阅读量5.2k

点赞数 7

分类专栏：后端学习文章标签： servlet java tomcat

于 2022-08-06 11:34:44 首次发布

本文链接：https://blog.csdn.net/Whoo_/article/details/126190705

版权

后端学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

问题出现：

最近学习后端，学到了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;

    @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);

        // ②设置前缀
        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 {

    @Override
    protected 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.html
        super.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>