thymeleaf 简单应用
服务端数据
- 服务端保存了一个list对象，一个user对象,一个日期对象，一个布尔值，一个字符串
@GetMapping("show1")
public String show2(Model model){
User user = new User();
user.setAge(21);
user.setName("Jack Chen");
user.setFriend(new User("李小龙", 30));
User user1 = new User("李连杰",50);
List<User> users = new ArrayList<User>();
users.add(user);
users.add(user1);
model.addAttribute("users", users);
model.addAttribute("msg", "Hello, Thymeleaf!");
model.addAttribute("user", user);
model.addAttribute("today", new Date());
model.addAttribute("true", true);
return "hello";
}
客户端展示
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script th:inline="javascript">
//js中收集域中的信息
const user = /*[[${user}]]*/ {};//没有使用{}作为默认值
let age = /*[[${user.age}]]*/ 0;//没有使用0作为默认值
age+=100;
user.age = age;
console.log(user);
console.log(age)
</script>
</head>
<body>
<!-- 最基础的取值方式 -->
<h1 th:text="${msg}">大家好</h1>
<!-- 对象的基本取值 -->
<div>
<p>Name: <span th:text="${user.name}">Jack</span>.</p>
<p>Age: <span th:text="${user.age}">21</span>.</p>
<p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</div>
<!-- 对象取值
当数据量比较多的时候，频繁的写user.就会非常麻烦
-->
<div th:object="${user}">
<p>Name: <span th:text="*{name}">Jack</span>.</p>
<p>Age: <span th:text="*{age}">21</span>.</p>
<p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</div>
<!-- 对象取值调用切分函数 -->
<div th:object="${user}">
<p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
<p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</div>
<!-- 日期类型处理函数 -->
<p>
今天是: <span th:text="${#dates.format(today,'yyyy-MM-dd')}">2018-04-25</span>
</p>
<!-- 字符串字面量 -->
<p>
你正在观看 <span th:text="'thymeleaf'">template</span> 的字符串常量值.
</p>
<!-- 数字字面量 -->
<p>今年是 <span th:text="2018">1900</span>.</p>
<p>两年后将会是 <span th:text="2018 + 2">1902</span>.</p>
<!-- 条件判断控制页面元素的显示 -->
<div th:if="!true">
你填的是true
</div>
<!-- 字面量值得拼接 -->
<span th:text="'欢迎您:' + ${user.name} + '!'"></span><br>
<span th:text="|欢迎您:${user.friend.name}|"></span>
<hr>
<span th:text="${user.age}"></span><br>
<span th:text="${user.age}%2 == 0"></span>
<!-- 三元运算符 -->
<span th:text="${user.sex} ? '男':'女'"></span>
<!--便利list-->
<table>
<tr th:each="user : ${users}">
<td th:text="${user.name}">Onions</td>
<td th:text="${user.age}">2.41</td>
</tr>
</table>
<table>
<tr th:each="user,stat : ${users}">
<td th:text="${user.name}" th:if="${stat.index} == 0">Onions</td>
<td th:text="${user.age}">2.41</td>
</tr>
</table>
<div th:switch="${user.name}">
<p th:case="'李连杰'">用户是管理员</p>
<p th:case="'Jack Chen'">用户是经理</p>
<p th:case="*">用户是别的玩意</p>
</div>
</body>
</html>
thymeleaf 在collection取值
服务器端
@RequestMapping("/hello1")
public String hello(Model map){
Map head = new HashMap();
// 将要遍历的list
head.put("name","姓名");
head.put("age","年龄");
head.put("sex","性别");
head.put("birthday","生日");
head.put("phone","手机");
map.addAttribute("heads", head);
// 将要遍历的list<map>
List outerList=new ArrayList<>();
for (int i = 0; i < 10; i++) {
Map user= new HashMap();
user.put("name", "欧阳锋"+i);
user.put("age", "50");
user.put("sex", "女");
user.put("birthday", "1985");
user.put("phone", "19850014665");
outerList.add(user);
i++;
}
map.addAttribute("users", outerList);
return "hello1";
}
客户端展示
<table class="table">
<thead>
<tr>
<th th:each="head : ${heads}" th:text="${head.value}"></th>
</tr>
</thead>
<tbody>
<tr th:each="user:${users}">
<td th:each="u:${user}" th:text="${u.value}"></td>
</tr>
</tbody>
</table>
thymeleaf的模板化技术
服务端
@Autowired
private TemplateEngine templateEngine;
@GetMapping("show2")
@ResponseBody
public String show2() throws FileNotFoundException {
HashMap<String, Object> map = new HashMap<>();
map.put("msg","我是我模板我怕谁？");
Context c = new Context();
c.setVariables(map);
String filename = "E:/tmp/thy/hello2.html";
PrintWriter printWriter = new PrintWriter(new File(filename));
templateEngine.process("hello2",c,printWriter);
return filename;
}
客户端
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${msg}">我不知道是谁？</h1>
</body>
</html>
效果：
版权声明：本文为xingxing12323原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。