springboot-thymeleaf模板引擎
1 页面跳转
1.1 搭建springboot项目
1.2 在pom.xml中引入thymeleaf依赖
<!--thymeleaf模板引擎--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-java8time</artifactId> </dependency>
1.3 查看项目目录,确认导入成功
注意版本与spingboot版本对应
1.4 在resources/templates目录下创建一个 test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>test</h1> </body> </html>
这个目录相当于 WEB-INF ,不能被直接访问,只能通过controller来跳转
1.5 创建controller层,并新建一个TestController类
package com.lv.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; //在templates目录下的所有页面,只能通过controller来跳转! //这个需要模板引擎的支持 thymeleaf @Controller public class TestController { @RequestMapping("/test") public String test(){ return "test"; } }
controller跳转到templates目录下的文件,必须要thymeleaf支持,所以必须导入thymeleaf模板引擎的依赖
1.6 启动项目.访问test
访问到了test.html中的内容,说明controller成功跳转
2 thymeleaf语法:传值
使用thymeleaf方式通过controller向templates目录下的html传值
2.1 修改TestController
package com.lv.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; //在templates目录下的所有页面,只能通过controller来跳转! //这个需要模板引擎的支持 thymeleaf @Controller public class TestController { @RequestMapping("/test") public String test(Model model){ model.addAttribute("msg","hello thymeleaf"); return "test"; } }
2.2 在test.html中导入约束
xmlns:th="http://www.thymeleaf.org"
2.3 修改test.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--所有的html元素都可以被thymeleaf替换接管 : th:元素名--> <div th:text="${msg}"></div> </body> </html>
2.4 重启项目.访问test
在test.html页面中成功显示controller传过来的值
3 hymeleaf语法:转译和不转译
3.1 修改TestController
package com.lv.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestController { @RequestMapping("/test") public String test(Model model){ model.addAttribute("msg","<h1>hello thymeleaf</h1>"); return "test"; } }
3.2 修改test.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--不转译--> <div th:text="${msg}"></div> <!--转译--> <div th:utext="${msg}"></div> </body> </html>
3.3 重启程序,访问test
4 hymeleaf语法:循环遍历
4.1 修改TestController
package com.lv.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.Arrays; @Controller public class TestController { @RequestMapping("/test") public String test(Model model){ model.addAttribute("numbers", Arrays.asList("one","two","three")); return "test"; } }
4.2 修改test.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种方式--> <h3 th:each="number:${numbers}" th:text="${number}"></h3> <hr> <!--第二种方式--> <h3 th:each="number:${numbers}">[[${number}]]</h3> </body> </html>
4.3 重启程序,访问test
5 thymeleaf的其它语法
5.1 简单表达式：
- 变量表达式：${...}
- 选择变量表达式：*{...}
- 消息表达式：#{...}
- 链接网址表达式：@{...}
5.2 文字
- 文本文本：
'one text','Another one!',… - 数字文字：
0,34,3.0,12.3,… - 布尔文字：
true,false - 空文本：null
- 文字标记：
one,sometext,main,…
5.3 文本操作：
- 字符串串联：+
- 文字替换：|The name is ${name}|
5.4 算术运算：
- 二元运算符：
+,-,*,/,% - 减号（一元运算符）：-
5.5 布尔运算：
- 二元运算符：
and,or - 布尔否定（一元运算符）：
!,not
5.6 比较和平等：
- 比较器：
>,<,>=,<=(gt,lt,ge,le) - 等运算符：
==,!=(eq,ne)
5.7 条件运算符：
- 如果-那么：(if) ? (then)
- 如果-然后-否则：(if) ? (then) : (else)
- 默认：(value) ?: (defaultvalue)
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术