我要评论1. Thymeleaf概述
thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。
(其他模板引擎，如Velocity、FreeMarker等)
特点:开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：
- XML
- 有效的XML
- XHTML
- 有效的XHTML
- HTML5
- 旧版HTML5
2. Springboot整合thymeleaf
2.1 步骤:
1. 创建一个sprinboot项目
2. 添加thymeleaf的起步依赖
3.添加spring web的起步依赖
4.编写html 使用thymleaf的语法获取变量对应后台传递的值
5.编写controller 设置变量的值到model中
2.2 入门案列:
2.2.1 创建一个springboot工程,案例工程名取为springboot-thymeleaf,导入pom.xml依赖
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>2.2.1.RELEASE</version> </dependency> </dependencies> 2.2.2 创建包com.cf.thymeleaf.并创建启动类ThymeleafApplication
@SpringBootApplication public class ThymeleafApplication { public static void main(String[] args) { SpringApplication.run(ThymeleafApplication.class,args); } } 2.2.3 创建application.yml
# 设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试 spring: thymeleaf: cache: false 2.2.4 控制层,创建controller用于测试后台 设置数据到model中,com.cf.thymeleaf.controller.ThymeleafController
@Controller @RequestMapping("/thymeleaf") public class ThymeleafController { /***
* 访问/test/hello 跳转到demo1页面
* @param model
* @return
*/ @RequestMapping("/hello") public String hello(Model model){ model.addAttribute("hello","hello welcome"); return "demo"; } } 2.2.5 在resources中创建templates目录，在templates目录创建 demo.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--输出hello数据--> <p th:text="${hello}"></p> </body> </html> 3. Thymeleaf基本语法
3.1 th:action
- 修改demo.html
<!--form表单--> <form th:action="@{/thymeleaf/hello}" > <input th:type="text" th:name="id"> <button>提交</button> </form> - 修改后台内容
@RequestMapping("/hello") public String hello(Model model,String id){ model.addAttribute("hello","hello welcome"); System.out.println("接受的值:"+id); } - 测试访问url:http://localhost:8080/thymeleaf/hello 在文本框中输入值adff，然后提交,提交之后会自动拼接到url地址栏中，在后台控制台中可以打印出“adff”.
3.2 th:each
对象遍历，功能类似jstl中的<c:forEach>标签。
- 创建com.cf.model.User,代码如下：
public class User { private Integer id; private String name; private String address; //..get..set } - Controller添加数据
@RequestMapping("/hello") public String hello(Model model,String id){ model.addAttribute("hello","hello welcome"); System.out.println("接受的值:"+id); //集合数据 List<User> users = new ArrayList<>(); users.add(new User(1,"张三","深圳")); users.add(new User(2,"李四","北京")); users.add(new User(3,"王五","武汉")); model.addAttribute("users",users); } - 页面输出demo.html
<!--th:each遍历--> <table> <tr> <td>下标</td> <td>编号</td> <td>姓名</td> <td>住址</td> </tr> <tr th:each="user,userstate:${users}"> <td th:text="${userstate.index}"></td> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.address}"></td> </tr> </table> <!--
注意:th:each表示循环遍历，user表示users集合的泛型名称，userstate表示别名
userstate.index表示获取下标从0开始
--> 3.3 Map输出
- 后台添加Map
//Map定义 Map<String,Object> dataMap = new HashMap<String,Object>(); dataMap.put("No","123"); dataMap.put("address","深圳"); model.addAttribute("dataMap",dataMap); - 页面输出demo.html
<!--map输出遍历--> <div th:each="map,mapstate:${dataMap}"> <!--获取map中的k=v--> <div th:text="${map}"></div> key:<span th:text="${mapstate.current.key}"></span><br> value:<span th:text="${mapstate.current.value}"></span><br> </div>
解析：
${map}表示获取的是key=value的形式
${mapstate.current.key}表示获取key值
${mapstate.current.value}表示获取map集合中的value值
3.4 数组输出
1、后台添加数组
//存储一个数组 String[] names = {"张三","李四","王五"}; model.addAttribute("names",names); 2、页面输出
<!--数组输出--> <div th:each="name,namestate:${names}"> 序号:<span th:text="${namestate.count}"></span> 姓名:<span th:text="${name}"></span> </div> ${namestate.count}表示获取序号，从1开始
3.5 Date输出
1、后台添加日期
//日期 model.addAttribute("now",new Date()); 2、页面输出
<!--日期输出--> <div> <!--默认时间格式--> <span th:text="${now}"></span><br> <!--转化日期格式--> <span th:text="${#dates.format(now,'yyyy-MM-dd hh:mm:ss')}"></span> </div>
${#dates.format(日期，输出的日期格式)}表示用来转化日期格式
${#dates.format()}表示日期转化格式的固定方法
3.6 th:if条件
- 后台添加年龄
//if条件 model.addAttribute("age",22); - 页面输出
<!--if判断--> <div> <span th:if="${age>20}" th:text="你终于长大了"></span> </div> 3.6 th:fragment &th:includ
1、创建一个foot.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"> 关于我们<br> </div> </body> </html> 2、在demo.html中引入foot.html如下代码：
<!--引入模块--> <div th:include="foot::copy"></div>
解析：
th:include表示在当前页面中引入其他页面或者模块的意思
foot::copy
其中foot表示要引入页面的名称，copy表示引入页面的模块名称，两者之间用“::”双冒号关联.
本文地址：https://blog.csdn.net/ABestRookie/article/details/108229803
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论