Springboot 整合 Thymeleaf

Springboot 整合 Thymeleaf

1.什么是Thymeleaf

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎。相较与其他的模板引擎,它有一个最大的特点是,它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服 务器查看带数据的动态页面效果。 这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板 +数据的展示方式。

<a th:text="${url}">百度</a> 

浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以 静态地运行; 当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

2.快速开始

1)引入依赖
<dependency> 
		<groupId>org.springframework.boot</groupId> 
		<artifactId>spring-boot-starter-thymeleaf</artifactId> 
</dependency>

2)配置Thymeleaf模版参数
spring: 
  thymeleaf: 
    cache: false

3)创建模版文件 hello.html

文件存放的位置:resource/templates

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
   <head> 
      <meta charset="UTF-8"></meta> 
      <title>Insert title here</title> 
   </head> 
   <body>Welcome <span th:text="${uname}">Admin</span>! </body> 
</html>

接口设置

@Controller
public class UserController {


    @RequestMapping("/userlist")
    public String userList(Model model){

        User user1 = new User();
        user1.setUname("小李");
        user1.setUid(1L);
        user1.setAge(20);
        user1.setEntryDate(new Date());

        User user2 = new User();
        user2.setUname("小王");
        user2.setUid(2L);
        user2.setAge(21);
        user2.setEntryDate(new Date());

        User user3 = new User();
        user3.setUname("小赵");
        user3.setUid(3L);
        user3.setAge(22);
        user3.setEntryDate(new Date());

        List<User> users = new ArrayList<>();
        users.add(user1);
        users.add(user2);
        users.add(user3);

        model.addAttribute("users",users);
//        model.addAttribute("user",user);
        return "userlist";
    }



    @RequestMapping("/hello")
    public String hello(Model model){
        model.addAttribute("uname","小明");
        return "hello";
    }

}

3.Thymeleaf中的小技巧

1)字符串
欢迎:<span th:text="${username}"></span><br/> 
欢迎:<span th:text="超级VIP+${username}"></span><br/> 
欢迎:<span th:text="|超级VIP,${username}|"></span><br/>

2)条件判断
# 条件为真,则显示所处的年龄段 
<span th:if="${age > 18}">老腊肉</span>
<span th:if="${age <= 18}">小鲜肉</span>

# 条件不为真,则显示
<span th:unless="${age>18}" th:text="未超过18岁"></span>

3)三元运算符
<span th:text="${age>18 ? '不年轻了':'too yong'}"></span>

4)循环
<table>
   <tr>
      <td>id</td> 
      <td>姓名</td> 
   </tr> 
   <tr th:each="stu : ${stus}"> 
      <td th:text="${stu.id}">id</td> 
      <td th:text="${stu.name}">姓名</td> 
   </tr>
</table>

5)日期格式化
<input th:value="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"/>

posted @ 2021-07-21 14:21  牛奶配苦瓜  阅读(64)  评论(0编辑  收藏  举报