Thymeleaf模板引擎

小路的蹊

已于 2023-11-18 09:20:29 修改

阅读量356

点赞数

文章标签： java java-ee

于 2023-11-18 09:19:39 首次发布

本文链接：https://blog.csdn.net/m0_66111719/article/details/134474213

版权

values

hello传入的是一个变量

物理视图：

/pages/user/login.html

逻辑视图：

物理视图=视图前缀+逻辑视图+视图后缀

1、jar包

2、配置上下文参数

如果html文件放在根目录(WEB-INF)下 <param-value>/</param-value>只需要/

在pages下就是<param-value>/pages</param-value>

说明：param-value中设置的前缀、后缀的值不是必须叫这个名字，可以根据实际情况和需求进行修改。

<!-- 在上下文参数中配置视图前缀和视图后缀 -->
<context-param>
    <param-name>view-prefix</param-name>
    <param-value>/WEB-INF/view/</param-value>
</context-param>
<context-param>
    <param-name>view-suffix</param-name>
    <param-value>.html</param-value>
</context-param>

为什么要放在WEB-INF目录下？

原因：WEB-INF目录不允许浏览器直接访问，所以我们的视图模板文件放在这个目录下，是一种保护。以免外界可以随意访问视图模板文件。

访问WEB-INF目录下的页面，都必须经过Servlet转发过来。不经过Servlet访问不了。这样就方便我们在Servlet下检查当前用户是否有权限访问。

那放在WEB-INF目录下之后，重定向进不去怎么办？（重定向就相当于地址栏访问）

重定向到Servlet，再通过Servlet转发到WEB-INF下。

3、创建Servlet基类

package com.bigdata.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;
import java.io.PrintWriter;

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(false);

        // ⑥设置服务器端编码方式
        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");
        PrintWriter out = resp.getWriter();
        ServletContext servletContext = this.getServletContext();

        // 2.创建WebContext对象
        WebContext webContext = new WebContext(req, resp, servletContext);

        // 3.处理模板数据
        templateEngine.process(templateName, webContext, out);
    }
}

创建index.html

在index.html编写超链接

<a href="/view/TestThymeleafServlet">初步测试Thymeleaf</a>

创建Servlet

package com.bigdata.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/TestThymeleafServlet")
public class TestThymeleafServlet extends ViewBaseServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("TestThymeleafServlet.service执行...");
        //1、声明当前请求要前往的视图名称
        String viewName = "target";

        //2、调用ViewBaseServlet父类中的解析视图模板的方法
        super.processTemplate(viewName,req,resp);
    }
}

在service()方法中跳转到Thymeleaf页面

Thymeleaf页面

<!DOCTYPE html>

<!-- 在html标签内加入Thymeleaf名称空间的声明 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>小猪佩奇，你真牛逼</h1>
<!-- 在p标签的基础上，使用Thymeleaf的表达式，解析了一个URL地址 -->
<p th:text="@{'/aaa/bbb/ccc'}">Thymeleaf将在这里显示一个解析出来的URL地址</p>

</body>
</html>

启动服务器

通过servlet请求转发与直接访问区别

4、基本语法：命名空间

5、基本语法：表达式语法

1、修改标签文本值

代码示例：

标签体原始值

①th:text作用

不经过服务器解析，直接用浏览器打开HTML文件，看到的是『标签体原始值』
经过服务器解析，Thymeleaf引擎根据th:text属性指定的『标签体新值』去替换『标签体原始值』

②字面量

『字面量』是一个经常会遇到的概念，我们可以对照『变量』来理解它的含义。

2、修改指定属性值

代码示例：

语法：任何HTML标签原有的属性，前面加上『th:』就都可以通过Thymeleaf来设定新值。

3、解析URL地址

①基本语法

代码示例：

标签体原始值

经过解析后得到：

/view/aaa/bbb/ccc

所以@{}的作用是在字符串前附加『上下文路径』

这个语法的好处是：实际开发过程中，项目在不同环境部署时，Web应用的名字有可能发生变化。所以上下文路径不能写死。而通过@{}动态获取上下文路径后，不管怎么变都不怕啦！

写a标签时要加@{}

<!DOCTYPE html>

<!-- 在html标签内加入Thymeleaf名称空间的声明 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>小猪佩奇，你真牛逼</h1>
<!-- 在p标签的基础上，使用Thymeleaf的表达式，解析了一个URL地址 -->
<p th:text="@{'/aaa/bbb/ccc'}">Thymeleaf将在这里显示一个解析出来的URL地址</p>

<p th:text="张无忌">张三丰</p>

<p th:text="@{/index.html}">标签体原始值</p>
<p th:text="@{index.html}">标签体原始值</p>

<a th:href="@{/index.html}">试一下</a>
</body>
</html>

4、直接执行表达式

Servlet代码：

request.setAttribute("reqAttrName", "hello-value");

页面代码：

<p>无转义效果：[[${reqAttrName}]]</p>
<p>有转义效果：[(${reqAttrName})]</p>

另一种写法

th:text效果<p th:text="${reqAttrName}"></p>
th:utext效果<p th:utext="${reqAttrName}"></p>

6、基本语法：访问域对象

1、域对象

①请求域

在请求转发的场景下，我们可以借助HttpServletRequest对象内部给我们提供的存储空间，帮助我们携带数据，把数据发送给转发的目标资源。

请求域：HttpServletRequest对象内部给我们提供的存储空间

我们使用request请求域来保存一些数据：

req.setAttribute("username","尚杰颖");
req.setAttribute("password","021211");
req.setAttribute("username","1234545676");

网页

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <base th:href="@{/}">-->
</head>
<body>
    <h1>域测试取值</h1>

<!--    表单元素就是value 非表单元素就用text-->
    用户名：<input type="text" th:value="${username}"><br>
    密码：<input type="text" th:value="${password}"><br>
    手机：<input type="text" th:value="${phone}"><br>

    <div>[(${username})]</div>
    <div>[(${password})]</div>
    <div>[(${phone})]</div>

    <h1 th:text="${username}"></h1>
    <h1 th:text="${password}"></h1>
    <h1 th:text="${phone}"></h1>
</body>
</html>

②会话域

//通过request对象获取HttpSession对象：session,,会话域
HttpSession session = req.getSession();
session.setAttribute("username","张三");
session.setAttribute("password","123456");
session.setAttribute("phone","98767833233");

会话域取值网页

<h1>会话域测试取值</h1>
用户名：<input type="text" th:value="${session.username}"><br>
密码：<input type="text" th:value="${session.password}"><br>
手机：<input type="text" th:value="${session.phone}"><br>

<div>[(${session.username})]</div>
<div>[(${session.password})]</div>
<div>[(${session.phone})]</div>

<h1 th:text="${session.username}"></h1>
<h1 th:text="${session.password}"></h1>
<h1 th:text="${session.phone}"></h1>

一旦会话域存了值，在当前任意页面都能取到值。session会话域默认可以保存30分钟数据有效果，但前提时不要关闭浏览器。