springboot入门_thymeleaf
Posted wlzq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springboot入门_thymeleaf相关的知识，希望对你有一定的参考价值。
在之前的web开发中，视图层我们多数时间都使用的是jsp，但是在使用springboot时，已经不推荐(不推荐但依然可以使用)jsp，而是使用模板引擎，比如thymeleaf、freemarker、velocity等，本文记录在springboot中使用thymeleaf。
创建一个springboot项目，并引入web和thymeleaf的依赖，如下：
1 <!--web依赖--> 2 <dependency> 3 <groupId>org.springframework.boot</groupId> 4 <artifactId>spring-boot-starter-web</artifactId> 5 </dependency> 6 7 <!--thymeleaf依赖--> 8 <dependency> 9 <groupId>org.springframework.boot</groupId> 10 <artifactId>spring-boot-starter-thymeleaf</artifactId> 11 </dependency>
创建一个视图层页面，thymeleaf默认的视图路径为classpath:/templates/，所以我们在resources路径下创建目录templates，并在templates下创建页面hello.html，代码：
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8" > 5 <title>Insert title here</title> 6 </head> 7 <body> 8 <span th:text="${str}">thymeleaf</span> 9 </body> 10 </html>
创建一个控制器，并写上对应的请求方法，访问视图页面，代码如下：
1 @Controller 2 public class ThymeleafController { 3 4 @GetMapping("/hello") 5 public String hello(Model model) { 6 model.addAttribute("str", "hello thymeleaf!"); 7 return "hello"; 8 } 9 10 }
启动项目，访问http://localhost:8080/hello 浏览器中输出
到此说明thymeleaf已经成功和spring集成。
我们在加一个方法，简单的使用thymeleaf接收传递的参数。方法：
@GetMapping("/welcome") public String welcome(Model model) { //传递字符串 model.addAttribute("str", "world"); //传递对象 Book book = new Book("springboot", 12.3); model.addAttribute("book", book); //传递集合对象 List<Book> list = new ArrayList<Book>(); Book book1 = new Book("book1", 11.1); list.add(book1); Book book2 = new Book("book2", 22.2); list.add(book2); Book book3 = new Book("book3", 33.3); list.add(book3); model.addAttribute("list", list); model.addAttribute("id", 5); String htmlStr = "<h1>文本替换</h1>"; model.addAttribute("htmlStr", htmlStr); Date currentDate = new Date(); model.addAttribute("currentDate", currentDate); return "welcome"; }
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8" > 5 <title>Insert title here</title> 6 </head> 7 <body> 8 thymeleaf 简单用法!<br/> 9 <hr> 10 集合遍历 th:each： 11 <table> 12 <tr> 13 <td>书名</td> 14 <td>价格</td> 15 </tr> 16 <tr th:each="book:${list}"> 17 <td th:text="${book.name}">书名</td> 18 <td th:text="${book.money}">价格</td> 19 </tr> 20 </table> 21 动态ID th:id：<input type="text" th:id="‘id‘+${id}"><br/> 22 属性设置值 th:value：<input type="text" th:value="${str}"><br/> 23 文本替换值 th:text：<span th:text="${str}">文本值替换</span><br/> 24 html文本替换 th:utext:<p th:utext="${htmlStr}">文本值替换</p> 25 设置样式：th:style<input type="text" th:style="‘background-color:#FF0000;‘"><br/> 26 点击事件 th:onclick：<input type="button" th:onclick="‘alert(1)‘" th:value="按钮"/><br/> 27 链接 th:href：<a th:href="@{/login1}" th:text="登录1"></a> <a th:href="@{/login2}">登录2</a><br/> 28 判断 th:if(满足时才会显示)：<a th:if="${id} > 5">大于</a> <a th:if="${id} < 5">小于</a> <a th:if="${id} == 5">等于</a><br/> 29 表单action th:action: 30 <form action="/login.html" th:action="@{/login}"></form><br/> 31 下拉框选中 th:selected: 32 <select> 33 <option th:selected="${id} == 1">第一</option> 34 <option th:selected="${id} == 2">第二</option> 35 <option th:selected="${id} == 3">第三</option> 36 <option th:selected="${id} == 4">第四</option> 37 <option th:selected="${id} == 5">第五</option> 38 </select><br/> 39 当前时间：<span th:text="${{currentDate}}">当前时间</span><br/> 40 <span th:text="${#dates.format(currentDate,‘yyyy-MM-dd HH:mm:ss‘)}">当前时间</span><br/> 41 计算：<input type="text" th:value="${id}+1"><br/> 42 </body> 43 </html>
以上是springboot中thymeleaf的简单使用，有不正确的地方，欢迎朋友们留言。
下载源码：https://files.cnblogs.com/files/wlzq/springboot_thymeleaf.zip
以上是关于springboot入门_thymeleaf的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot入门系列六（ SpringBoot 整合thymeleaf）