Thymeleaf快速入门学习

最新推荐文章于 2023-08-05 11:15:02 发布

lonelyMangoo

最新推荐文章于 2023-08-05 11:15:02 发布

阅读量196

点赞数 2

本文链接：https://blog.csdn.net/qq_43472612/article/details/125875312

版权

文章概述

学习b站这位up主的视频总结一下Thymeleaf的简单用法。
视频地址：https://www.bilibili.com/video/BV1Pb4y1b74D
文章介绍了Springboot集成以及一些简单的用法

SpringBoot集成Thymeleaf

添加Thymeleaf依赖

   <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在resources目录下创建templates文件夹。
添加一些必要的配置信息

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html

创建html文件并加入命名空间
命名空间是提示作用

<html lang="en" xmlns:th="http://www.thymeleaf.org">

然后就可以正常使用了！如果有问题可以参考我的另一个问题总结的文章：
https://blog.csdn.net/qq_43472612/article/details/125874508

热部署
进行如下设置可以实现静态资源的热部署。

添加如下代码可以实现java代码的热部署（测试了很多次，删了这段不能热部署了）

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>  <!-- 这里很重要-->
        </dependency>

参考文章：https://blog.csdn.net/cm_pq/article/details/120074997
https://blog.csdn.net/weixin_44678104/article/details/124984842

Thymeleaf语法

基本对象

● ctx上下文对象
model传过来的都是上下文对象，也可以通过#获取

<div th:text="${#ctx.msg}"></div>

ctx也可以获得request、response、session、servletContext等
● param
用来获取请求参数，实际上是存在上下文当中的

<div th:text="${param.id}"></div>
    <div th:text="${param.name}">
</div>

在controller上加上相关参数就可以获取
在这里插入图片描述

其他方法：
在这里插入图片描述
（该图截图自链接的视频）

● session、request
获得session

<div th:text="${session.myLogin}"></div>
<div th:text="${#request.getAttribute('myRequest')}"></div>

在这里插入图片描述

● 其他

还有一些字符串格式化、日期格式化、数字格式化。
下面是参考文档
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#strings

代码

下面是我的测试代码
controller：

    @RequestMapping("/test")
    public String test(Model model, String id, String name, HttpServletRequest request){
        HttpSession session = request.getSession();
        session.setAttribute("myLogin","myLogin");
        session.setAttribute("myLogin666","myLogin555");
        request.setAttribute("myRequest","myRequest");
        model.addAttribute("msg","hello world");
        AdminUser user = userService.getById(1);
        System.out.println(id);
        System.out.println(name);
        List<AdminUser> allUsers = userService.getAllUsers();
        model.addAttribute("users",allUsers);
        model.addAttribute("user",user);
        model.addAttribute("msgHtml","<h1>hello world</h1>");
        return "login";
    }

我这里是从数据库获取的，写死也是一样。
html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/index.css">
</head>
<body>
<div th:text="${param.id}"></div>
<div th:text="${param.name}">
</div>
<div th:text="${msg}+ 第一次学习"></div>
<div th:text="|${msg}第一次学习|"></div>
<div th:text="|${user.name}|"></div>
<div th:utext="${msgHtml}"></div>
<div th:object="${user}">
    <p th:text="*{name}"></p>
    <p th:text="*{password}"></p>
</div>
<label>
    <input th:value="${user.getName()}">
</label>
<br>
<div th:if="${true}"> if成功</div>
<div th:unless="${false}"> unless成功</div>
<div th:if="${user.getName().equals('mango')}">成功</div>

<div th:switch="${user.id}">
    <p th:case="*">其他</p>
    <p th:case="1">可见</p>
    <p th:case="4">可见</p>
    <p th:case="2">隐藏</p>
</div>

<!--th:class="${iterStat.last}?'odd':null"-->
<div th:each="user,iterStat : ${users}" >
    <span th:text="${user.getName()}"></span>
    <span th:text="${iterStat.index}"></span>
    <span th:text="${iterStat.odd}"></span>
</div>

<a th:href="@{http://www.baidu.com/index(id=1)}" th:text="${user.name}"></a>
<hr>
<div>[[${msg}]]</div>
<div>[(${msgHtml})]</div>
<div th:inline="none">[(${msgHtml})]</div>
<hr>

<div th:text="${#ctx.msg}"></div>
<div th:text="${#ctx.msgHtml}"></div>

<hr>
<div th:text="${param.id}"></div>
    <div th:text="${param.name}">
</div>

<div th:text="${session.myLogin}"></div>
<div th:text="${#request.getAttribute('myRequest')}"></div>
<hr>
<div th:text="${session.myLogin}"></div>
<div th:text="${session.myLogin666}"></div>
<div th:text="${session.myLogin666}"></div>
<!--<div th:text="${session.my}"></div>-->
<!--<div th:text="${session.my}"></div>-->
<!--<div th:text="${#request.getAttribute('myRequest')}"></div>-->
<div th:text="${#request.getAttribute('myRequest')}"></div>
</body>
</html>
<script th:inline = "javascript">
    const user = /*[[${user}]]*/{}
    const user = [[${user}]]
    console.log(user)
</script>