Spring Boot学习记录 04SpringBoot Thymeleaf应用

最新推荐文章于 2024-05-30 08:15:00 发布

柏竹

最新推荐文章于 2024-05-30 08:15:00 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/weixin_45963193/article/details/120396235

版权

SpringBoot Thymeleaf应用Thymeleaf是用于 Web 和独立环境的Java模板引擎（类似于JSP）SpringBoot 为 Thymeleaf 提供一系列的默认配置，Thymeleaf依赖一旦导入，项目会自动配置thymeleaf优点：Thymeleaf 在有网络和无网络的环境下皆可运行，通过美工实现页面数据的动静结合有网络则覆盖静态显示的内容数据无网络则显示默认静态的内容数据SpringBoot完美整合，springboot默认整合thymeleafSpr

摘要由CSDN通过智能技术生成

SpringBoot Thymeleaf应用

Thymeleaf是用于 Web 和独立环境的Java模板引擎（类似于JSP）

SpringBoot 为 Thymeleaf 提供一系列的默认配置，Thymeleaf依赖一旦导入，项目会自动配置

thymeleaf优点：

Thymeleaf 在有网络和无网络的环境下皆可运行，通过美工实现页面数据的动静结合
有网络则覆盖静态显示的内容数据
无网络则显示默认静态的内容数据
SpringBoot完美整合，springboot默认整合thymeleaf

thymeleaf详解

表达式

表达式语法有四种类型

变量表达式 ${...}
选择或星号表达式 *{...}
URL表达式 @{...}

变量表达式

请求响应的数据，通过以下的变量表达式进行获取去到数据

${session.user.name}

在HTML标签中的变量表达式展示

展示前提需要在 Controller控制类里添加方法测试

@RequestMapping ("/test")
public String Test(Model model) {
   
    model.addAttribute("good","Thymeleaf very Good!");
    // 跳转页面
    return "test";
}

在 /resources/templates/test.html 页面进行HMTL展示

<!--响应的变量 good的值为 “Thymeleaf very Good!” -->
<h5>表达式</h5>
<span>${good}</span><br>
<span th:text="${good}">你好 thymleaf</span><br>
<span>${good}</span><br>

<!-- 浏览器预览结果
    
表达式
${good}
Thymeleaf very Good!
${good}

-->

选择(星号)表达式

选择表达式需要预先选择一个对象进行代替上下文变量容器(map)来执行（星号表达式也如此）

后端存储响应的数据形式：

Map<String, String> map = new HashMap<>();
map.put("dog","狗");
map.put("cat","猫");
model.addAttribute("pet",map);

<div th:object="${pet}">
    <span th:text="*{dog}"></span> <br>
    <span th:text="*{cat}"></span> <br>
</div>

<!-- 浏览器预览结果
    
狗
猫

-->

URL表达式

URL表达式是把一个有效的信息添加到URL，也是URL重写

url重写形式有三种：

url表达式
文本替换
字符串拼接

以下代码实例：

<!--url无参 形式-->
<!--href值结果：main.html-->
<a th:href="@{/main}">
    
<!--
参数说明:
	user.id = 1
	user.name = "张三"
-->
    
<!--url参数 形式-->
<!--href值结果：/del?id=1&name=张三  -->
<a th:href="@{/del(id=*{id},name=${user.name})}">删除</a>
    
<!--文本替换 形式-->
<!--href值结果：/update/1 -->
<a th:href="@{|/update/*{id}|}">修改</a>
    
<!--字符串拼接 形式-->
<!--href值结果：/approve/1 -->
<a th:href="'/approve/'+*{id}">审核</a>

th属性

关键字	功能介绍	案例
th:id	替换id	`<input th:id="'xxx' + ${collect.id}"/>`
th:text	文本替换	`<p th:text="${collect.description}">description</p>`
th:utext	支持html的文本替换	`<p th:utext="${htmlcontent}">conten</p>`
th:object	替换对象	`<div th:object="${session.user}">`
th:value	属性赋值	`<input th:value="${user.name}" />`
th:with	变量赋值运算	`<div th:with="isEven=${prodStat.count}%2==0"></div>`
th:style	设置样式	`th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
th:onclick	点击事件	`th:onclick="'getCollect()'"`
th:each	属性赋值	`tr th:each="user,userStat:${users}">`
th:if	判断条件	`<a th:if="${userId == collect.userId}" >`
th:unless	和th:if判断相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
th:href	链接地址	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />`
th:switch	多选择配合th:case 使用	`<div th:switch="${user.role}">`
th:case	th:switch的一个分支	`<p th:case="'admin'">User is an administrator</p>`
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	`<div th:fragment="alert">`
th:include	布局标签，替换内容到引入的文件	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />`
th:replace	布局标签，替换整个标签到引入的文件	`<div th:replace="`

最低0.47元/天解锁文章

柏竹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot学习记录 04SpringBoot Thymeleaf应用

SpringBoot Thymeleaf应用Thymeleaf是用于 Web 和独立环境的Java模板引擎（类似于JSP）SpringBoot 为 Thymeleaf 提供一系列的默认配置，Thymeleaf依赖一旦导入，项目会自动配置thymeleaf优点：Thymeleaf 在有网络和无网络的环境下皆可运行，通过美工实现页面数据的动静结合有网络则覆盖静态显示的内容数据无网络则显示默认静态的内容数据SpringBoot完美整合，springboot默认整合thymeleafSpr
复制链接

扫一扫