Thymeleaf学习笔记

Thymeleaf学习笔记

模板引擎Thymeleaf快速入门

一、Thymeleaf前言

Thymeleaf是动静分离的，页面中的动态标签是需要传递参数的时候才会渲染，不然就是原本默认的静态的样子。

<!DOCTYPE html>
<html>
	<head>
		
		<title th:text="${title}">默认的标题</title>
        // 这里的标签（标题）是一个动态的标签，当传递了title数据，页面就会渲染这个标签；不然按默认显示
	</head>
	<body>
	</body>
</html>

二、Thymeleaf基础使用

在application.yml文件中

sever:
	port:0001
spring:
	thymeleaf:
		cache:false
		// 开发过程中关闭，上线时打开

thymeleaf模板

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
    
</html>

单例：前端（index.html）

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    
	<title th:text="${title}">默认的title</title>
    
    
</head>
</html>

单例：后端 （IndexController.java）. 控制器（spring MVC）

@Controller
public class IndexController{
    @GetMapping("/index")
    public Stirng index(Model model){
        				// model 用来给页面追加数据
        model.addAttribute("title","传递的title");
        				// 参数 + 参数值
        model.addAttribute("description","传递的description");
        model.addAttribute("keywords","传递的keywords");
        return "index";
    }
}

补充*1：如果我想在传递的值上加上一定的字符串，应该怎么做呢？

	<title th:text="'某某字符串-' + ${title}">默认的title</title>
or
	<title th:text="|某某字符串 - ${title}|">默认的title</title>

三、Thymeleaf常用方法

给页面看的对象

UserVO.java

@Data
public class UserVO{
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVIP;
    private Date createTime;
    private List<String> tags;
}

IndexController.java

@Controller
public class IndexController{
    @GetMapping("/index")
    public Stirng index(Model model){
        				// model 用来给页面追加数据
        model.addAttribute("title","传递的title");
        				// 参数 + 参数值
        return "index";
    }
    
    @GetMapping("/basicTrain")
    public Stirng basicTrain(Model model){
        UserVO userVO = new UserVO();
        
        userVO.setUsername("lookroot");
        userVO.setAge(22);
        userVO.setIsVIP(true);
        userVO.setCreateTime(new Date());
        userVO.setSex(1);
        userVO.setTags(Arrays.asList("PHP","Node","Java"));
        
        model.addAttribute("user",userVO());
        
        return "basic";
    }
    
}

basic.html

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
    
<body>
    <div>
       	<p th:text="${user.username}"></p>
    	<p th:text="${user.age}"></p> 
    </div>
    
    <div th:object="${user}">
        <p th:text="*{username}"></p>
    	<p th:text="*{age}"></p>
    </div>
    
	<!--th:if-->
    <!--通过布尔值决定元素是否要渲染出来-->
    <p th:if="${user.isVIP}">会员</p>
    <p th:if="${!user.isVIP}">会员</p>
    
    <!--th:each-->
    <!--迭代数据-->
    <ul>
        <li th:each="tag:${user.tags}" th:text="${user.tag}"></li> <!--开始循环-->
    </ul>
    
    <!--th:switch-->
    <!--选择语句-->
    <div th:switch="${user.sex}">
        <p th:case="1">男</p>
        <p th:case="2">女</p>
        <p th:case="*">默认</p> <!--defalut-->
    </div>
    
</body>

</html>

四、Thymeleaf中JavaScript、css的使用

五、Thymeleaf组件的使用

六、Thymeleaf中使用工具类

七、组件拓展和组件传值

posted @ 2021-08-10 22:15  草系编程苦手  阅读(74)  评论(0)    收藏  举报