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的简单使用,有不正确的地方,欢迎朋友们留言。