1.新建springboot项目
2.勾选thymeleaf依赖
3.我们来编写配置文件，这里可以是yaml、yml或properties配置文件，我们以yml文件为例。
4.我们在classpath目录下新建一个web目录，然后再web目录下建立student.html文件
5.新建controller，我们进行测试
StudentController.java
package com.wangs.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.wangs.bean.Student;
@Controller
@RequestMapping("/student/")
public class StudentController {
@RequestMapping("show")
public String show(Model model) {
//添加字符串
model.addAttribute("hello", "hello spring boot thymeleaf!");
model.addAttribute("img", "http://img.xiuren.com/upload/image/201904/02/17/1554197531769682.jpg");
//添加实体类
Student stu=new Student();
stu.setAge(18);
stu.setGender("女");
stu.setName("杨秀芹");
model.addAttribute("stu",stu);
//添加list或map
List<Map<String,String>>list=new ArrayList<Map<String,String>>();
for(int i=0;i<10;i++) {
Map<String,String>map =new HashMap<String,String>();
map.put("name", "杨秀芹"+i);
if(i==9) {
map.put("name", "杨秀芹");
}
list.add(map);
}
model.addAttribute("list", list);
//return的字符串与模板的html名字一致，此处对应“student.html”
return "student";
}
}
Student.java
package com.wangs.bean;
public class Student {
String name;
int age;
String gender;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + age;
result = prime * result + ((gender == null) ? 0 : gender.hashCode());
result = prime * result + ((name == null) ? 0 : name.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Student other = (Student) obj;
if (age != other.age)
return false;
if (gender == null) {
if (other.gender != null)
return false;
} else if (!gender.equals(other.gender))
return false;
if (name == null) {
if (other.name != null)
return false;
} else if (!name.equals(other.name))
return false;
return true;
}
}
6.这时候我们打开浏览器输入“http://localhost:8081/student/show”,看到如下页面，说明thymeleaf配置成功
7.我们来获取model中的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>student</title>
</head>
<body>
<h3>thymeleaf</h3>
<!-- span标签中的“th:text”元素中的th是thymeleaf的简写，text表示span的text属性，此行代码表示使用thymeleaf的hello变量的值来替换span标签中的text值 -->
<span th:text="${hello}">span</span><br>
<h2>学生信息</h2>
name:<input th:text="${stu.name}" /><br>
age:<input th:text="${stu.age}"/><br><br>
<h3>input框</h3>
<!-- 使用input的value属性对input框的value进行赋值 -->
name:<input th:value="${stu.name}" /><br>
age:<input th:value="${stu.age}"/>
<h3>超链接</h3>
<!-- 超链接的写法比较奇怪，记住就可以了，不会了，再来查 -->
<a href="http://www.baidu.com" th:href="@{http://www.souhu.com(id=${stu.name})}">超链接</a>
<h3>循环</h3>
<h3>UL列表</h3>
<ul>
<li th:each="s:${list}" th:text="${s.name}"></li>
</ul>
<h3>table</h3>
<table>
<tr th:each="l:${list}">
<td th:text="${l.name}"></td>
<td>女</td>
</tr>
</table>
<h3>select框</h3>
<!-- th:selected="${l.name==stu.name}表示如果l.name和stu.name相等的话，就会返回true，name这条option就会被选中 -->
<select>
<option th:each="l:${list}" th:text="${l.name}" th:value="${l.name}" th:selected="${l.name==stu.name}"></option>
</select>
<h3>图片</h3>
<img th:src="${img}"/>
</body>
</html>显示结果如下：
附目录结构
【总结】
thymeleaf虽然用上去看着比freemarker复杂，但这个模板可以是前后端完全分离开，同样的html，前端工程师看到的是前端的原型，后端工程师看到的是渲染了页面的数据之后的动态页面。这就是thymeleaf的优势。
注意：
Controller中一定要使用@Controller注解，不要使用@RestController注解，否则会直接返回json数据，不会跳转页面
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
