手摸手3分钟教你整合springboot和thymeleaf

最新推荐文章于 2024-10-16 10:13:45 发布

mambaMentality

最新推荐文章于 2024-10-16 10:13:45 发布

阅读量2.3k

点赞数 2

文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/mambaMentality/article/details/121460884

版权

github仓库

https://github.com/itwell/springboot-thymeleaf (原码下载)

引入 Thymeleaf 依赖

<!-- Thymeleaf 模板引擎依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

创建模板文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf demo</title>
</head>
<body>
<p>description字段值为：</p>
<p th:text="${description}">这里显示的是 description 字段内容</p>
</body>
</html>

controller

package com.itwell.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import javax.servlet.http.HttpServletRequest;

@Controller
public class ThymeleafController {
    @GetMapping("/thymeleaf")
    public String hello(HttpServletRequest request, @RequestParam(value = "description", required = false, defaultValue = "springboot-thymeleaf") String description) {
        request.setAttribute("description", description);
        return "thymeleaf";
    }
}

关闭缓存

# thymeleaf模板缓存 开发环境下推荐打开 实时看到页面的变化
spring.thymeleaf.cache=false

#{} 消息表达式

在resource文件夹下创建 i18n文件夹

创建不同语言的配置文件

hello.properties
hello_en_US.properties
hello_zh_CN.properties

application.properties配置文件

#i18n国际化
spring.messages.basename = i18n.hello

模板文件测试

<p th:text=" #{language}" >...</p>

*{} 星号表达式

controller

Book book = new Book();
book.setTitle("三国演义");
request.setAttribute("book", book);

html

<div th:object="${book}">
    <span th:text="*{title}"></span>
</div>

*{}取的是${}里面的数据
${}取的是上下文里面的数据

@{} 链接表达式

相对的链接表达式

<a th:href="@{../xxx/xxx}"></a>

服务器相对

<a th:href="@{~/xxx/xxx}"></a>

协议相对

<a th:href="@{//xxx.com/xxx}"></a>

绝对链接表达式

<a th:href="@{http://www.xxx.com/xxx}"></a>

th:insert th:replace

新建一个footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:fragment="copy">
        © 2020 <a href="http://www.itwell.com"></a>
    </div>
</body>
</html>

在thymeleaf.html 引入 footer.html

<div th:insert="~{footer.html :: copy}"></div>

字面量

文本

<p th:text="'hello'" >...</p>

数字

<p th:text="123456" >...</p>

数字计算

<p th:text="123456+1" >...</p>

布尔

<p th:if="1<2 == true" >真</p>

null

<p th:if="${xxx.xxx}==null" >真</p>

th:class 条件运算符

三元表达式

<p th:class="${xxx.xxx}? 'true':'false'"></p>

无操作

<p th:class="${xxx.xxx}?:_">no user authenticated</p>

设置属性值

内置属性

<form action="#" th:action="@{/user}" method="get">
    <input type="text" th:name="nickname">
    <input type="submit" value="提交">
</form>

自定义属性

<form action="#" th:attr="action=@{/user}" method="get">
    <input type="text" th:attr="name=nickname">
    <input type="submit" value="提交">
</form>

固定布尔值

<input type="checkbox" name="active" th:checked="${xxx.xxx}">

迭代器

        ArrayList<Book> books = new ArrayList<>();
        Book book1 = new Book();
        book1.setTitle("水浒传");
        Book book2 = new Book();
        book2.setTitle("西游记");
        Book book3 = new Book();
        book3.setTitle("红楼梦");
        Book book4 = new Book();
        book4.setTitle("三国演义");
        books.add(book1);
        books.add(book2);
        books.add(book3);
        books.add(book4);

遍历

<li th:each="book : ${books}" th:text="${book.title}">default</li>

状态变量
index count size current even/odd first last

    <table>
        <!--奇数加属性odd 偶数加属性even-->
        <tr th:each="book,bookStat:${books}" th:class="${bookStat.even}?'odd':'even'">
            <td th:text="${bookStat.index}">...</td>
            <td th:text="${book.title}">default</td>
        </tr>
    </table>

条件语句th:if th:unless th:switch th:case

th:if

<p th:if="${boolean}">如果 boolean 是 true ，本句话就会显示</p>

th:unless

<p th:unless="${unless}">如果 unless 是 false ，本句话就会显示</p>

th:switch

<div th:switch="${switch}">
    <p th:case="a">显示a</p>
    <p th:case="b">显示b</p>
    <p th:case="c">显示c</p>
</div>

引用片段th:fragment

定义片段

<body>
    <div th:fragment="copy">
        © 2020 <a href="http://www.itwell.com"></a>
    </div>
</body>

引用片段

<div th:replace="~{footer.html :: copy}"></div>

不使用th:fragment

定义片段

<body>
    <div id="copy-section">
        <h1>片段</h1>
    </div>
</body>

引用片段

<div th:insert="~{section :: #copy-section}"></div>

th:insert th:replace th:include

th:insert 将被插入内容连同标签放入到主页面当中.
th:replace 将被插入内容连同标签放入到主页面当中但是会替换掉主页面的标签
th:include 类似于th:insert ,将被插入内容不包含标签放入到主页面当中(3.x版本后,不在推荐使用)

属性优先级

Order	Feature	Attributes
1	Fragment inclusion	`th:insert` `th:replace`
2	Fragment iteration	`th:each`
3	Conditional evaluation	`th:if` `th:unless` `th:switch` `th:case`
4	Local variable definition	`th:object` `th:with`
5	General attribute modification	`th:attr` `th:attrprepend` `th:attrappend`
6	Specific attribute modification	`th:value` `th:href` `th:src` `...`
7	Text (tag body modification)	`th:text` `th:utext`
8	Fragment specification	`th:fragment`
9	Fragment removal	`th:remove`

内联表达式

[[…]]或[(…)]分别对应于th:text和th:utext

[[…]]不会解析html标签
[(…)]会解析html标签

controller

request.setAttribute("msg", "<b>great!</b>");

html

<p> The message is "[(${msg})]"</p>
<p> The message is "[[${msg}]]"</p>

表达式基本对象

#ctx :上下文对象。

${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}

希望对热爱编程的小伙伴有所帮助，博学谷-IT在线教育培训机构-传智教育旗下IT在线学习平台在这里插入图片描述
学IT，上博学谷

mambaMentality

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫