thymeleaf的整合和使用
发表于|更新于
|阅读量:
Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。
<Excerpt in index | 首页摘要>
<The rest of contents | 余下全文>
整合thymeleaf
修改pom.xml文件,添加依赖
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.3.RELEASE</version> <relativePath/> </parent> <groupId>com.caicai</groupId> <artifactId>10-spring-boot-view-thymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <name>10-spring-boot-view-thymeleaf</name> <description>Demo project for Spring Boot</description>
<properties> <java.version>1.8</java.version> </properties>
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
</project>
|
编写视图:
在templates/ 下建立 userList2.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <title>index</title> </head> <body> <table border="1" align="center" width="50%"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr>
<tr th:each="user:${list}"> <td th:text="${user.userid}"></td> <td th:text="${user.username}"></td> <td th:text="${user.userage}"></td> </tr>
</table> </body> </html>
|
创建Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| package com.caicai.springbootviewfreemarker.controller;
import com.caicai.springbootviewfreemarker.pojo.Users; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList; import java.util.List;
@Controller public class UserController { @RequestMapping("/showuser2") public String index(Model model){ List<Users> list = new ArrayList<>(); list.add(new Users(1,"caicai",21)); list.add(new Users(2,"honghong",32)); list.add(new Users(3,"mingming",43)); model.addAttribute("list",list); return "userList2"; } }
|
创建Users类:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| package com.caicai.springbootviewfreemarker.pojo;
public class Users { private Integer userid; private String username; private Integer userage;
public String getUsername() { return username; }
public void setUsername(String username) { this.username = username; }
public Integer getUserage() { return userage; }
public void setUserage(Integer userage) { this.userage = userage; }
public Users() { }
public Integer getUserid() { return userid; }
public void setUserid(Integer userid) { this.userid = userid; }
public Users(Integer userid, String username, Integer userage) { this.userid = userid; this.username = username; this.userage = userage; } }
|
创建启动类
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| package com.caicai.springbootviewfreemarker;
import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication public class Application {
public static void main(String[] args) { SpringApplication.run(Application.class, args); }
}
|
thymeleaf基本语法:
变量输出与字符串操作
th:text
在页面中输出值
th:value
可以将一个值放入到 input 标签的 value 中
判断字符串是否为空
Thymeleaf 内置对象
注意语法:
1,调用内置对象一定要用#
2,大部分的内置对象都以 s 结尾 strings、numbers、dates
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| ${#strings.isEmpty(key)} 判断字符串是否为空,如果为空返回 true,否则返回 false ${#strings.contains(msg,'T')} 判断字符串是否包含指定的子串,如果包含返回 true,否则返回 false ${#strings.startsWith(msg,'a')} 判断当前字符串是否以子串开头,如果是返回 true,否则返回 false ${#strings.endsWith(msg,'a')} 判断当前字符串是否以子串结尾,如果是返回 true,否则返回 false ${#strings.length(msg)} 返回字符串的长度 ${#strings.indexOf(msg,'h')} 查找子串的位置,并返回该子串的下标,如果没找到则返回-1 ${#strings.substring(msg,13)} ${#strings.substring(msg,13,15)} 截取子串,用户与 jdk String 类下 SubString 方法相同 ${#strings.toUpperCase(msg)} ${#strings.toLowerCase(msg)} 字符串转大小写。
|
日期格式化处理
1 2 3 4 5 6 7 8 9 10 11
| ${#dates.format(key)} 格式化日期,默认的以浏览器默认语言为格式化标准 ${#dates.format(key,'yyy/MM/dd')} 按照自定义的格式做日期转换 ${#dates.year(key)} ${#dates.month(key)} ${#dates.day(key)} year:取年 Month:取月 Day:取日
|
条件判断
th:if
1 2 3 4 5 6
| <span th:if="${sex} == '男'"> 性别男 </span> <span th:if="${sex} == '女'"> 性别女 </span>
|
th:switch
1 2 3 4 5
| <span th:switch="${id}"> <span th:case="1">ID 为1</span> <span th:case="2">ID 为2</span> <span th:case="2">ID 为3</span> </span>
|
迭代遍历
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <table border="1" align="center" width="50%"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr>
<tr th:each="user:${list}"> <td th:text="${user.userid}"></td> <td th:text="${user.username}"></td> <td th:text="${user.userage}"></td> </tr>
</table>
|
1 2 3 4 5 6 7 8 9 10
| @RequestMapping("/index") public String index(Model model){ List<Users> list = new ArrayList<>(); list.add(new Users(1,"caicai",21)); list.add(new Users(2,"honghong",32)); list.add(new Users(3,"mingming",43)); model.addAttribute("list",list); return "index";
}
|
状态变量属性
1,index:当前迭代器的索引 从 0 开始
2,count:当前迭代对象的计数 从 1 开始
3,size:被迭代对象的长度
4,even/odd:布尔值,当前循环是否是偶数/奇数 从 0 开始
5,first:布尔值,当前循环的是否是第一条,如果是返回 true 否则返回 false
6,last:布尔值,当前循环的是否是最后一条,如果是则返回 true 否则返回 false
th:each 迭代Map
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr th:each="maps : ${map}"> <td th:text="${maps}"></td> </tr> </table> <th/> <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr th:each="maps : ${map}"> <td th:each="entry:${maps}" th:text="${entry.value.id}" ></td> <td th:each="entry:${maps}" th:text="${entry.value.name}"></td> <td th:each="entry:${maps}" th:text="${entry.value.age}"></td> </tr> </table>
|
1 2 3 4 5 6 7 8 9 10
| @RequestMapping("/index3") public String index3(Model model){ Map<String, User> map = new HashMap<>(); map.put("u1", new User(1,"张三",20)); map.put("u2", new User(2,"李四",22)); map.put("u3", new User(3,"王五",24)); model.addAttribute("map", map); return "index3" ; }
|
域对象操作
1 2 3 4 5 6 7
| @RequestMapping("/index4") public String index4(HttpServletRequest httpServletRequest, Model model){ httpServletRequest.setAttribute("req","HttpServletRequest"); httpServletRequest.getSession().setAttribute("sess","HttpSession"); httpServletRequest.getSession().getServletContext().setAttribute("app","Application"); return "index4" ; }
|
1 2 3 4 5
| <body> <span th:text="${#httpServletRequest.getAttribute('req')}"></span><br> <span th:text="${session.sess}"></span><br> <span th:text="${application.app}"></span><br> </body>
|
URL表达式
th:href
th:src
URL表达式语法
基本语法:@{}
URL类型
绝对路径
1
| <a th:href="@{http://www.baidu.com}">绝对路径</a><br/>
|
相对路径
1)相对于当前项目的根
相对于项目的上下文的相对路径
1
| <a th:href="@{/show}">相对路径</a>
|
- 相对于服务器路径的根
1
| <a th:href="@{~/project2/resourcename}">相对于服务器的根</a>
|
在 url 中实现参数传递
1
| <a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>
|
在 url 中通过 restful 风格进行参数传递
1 2
| <a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相 对 路 径 - 传 参 -restful</a>
|