springboot整合thymeleaf初级用法

悠悠 2022-04-03 14:44 252阅读 0赞

thymeleaf作为页面静态化，作用：  
1、减少服务器压力  
2、提供更好的服务体验

![1][]

1、创建controller返回视图hello

/** * @auther SyntacticSugar * @data 2018/12/22 0022下午 10:46 */
    @Controller
    public class HelloController { 
    
        @GetMapping("hello")
        public String hello(Model model) { 
            model.addAttribute("name", "world");
            return "hello";
        }
    
        @GetMapping("hello1")
        public String hello1(Model map) { 
    
            User user = new User();
            user.setAge(21);
            user.setName("Jack Chen");
            user.setFriend(new User("李小龙", 30));
    
            map.addAttribute("user", user);
    
            return "hello";
        }
    }

2、在templates下建新hello.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <p th:text="${name}"></p>
    <hr>
    <p th:text="${user.name}">小花</p>
    <p th:text="${user.age}">18</p>
    <p th:text="${user.friend.name}">小舞</p>
    <hr>
    
    <div th:object="${user}">
        <p th:text="*{name}"></p>
        <p th:text="*{age}"></p>
        <p th:text="*{friend.name}"></p>
    </div>
    <hr>
    <div th:object="${user}">
        <p th:text="*{name.split(' ')[0]}"></p>
        <p th:text="*{name.split('')[1]}"></p>
        <p th:text="*{name.split(' ')[1]}"></p>
    </div>
    <hr>
    <p>
        今天：<span th:text="${#dates.format(today,'yyyy-MM-dd')}"></span>
    </p>
    <hr>
    
    <script th:inline="javascript"> const name =/*[[${user}]]*/{ }; const age =/*[[${user.age}]]*/20; console.log(name); console.log(age); </script>
    </body>
    </html>

》

> 请求 [http://localhost:8080/hello1][http_localhost_8080_hello1]

![1][1 1]

3、添加视图hello2

@GetMapping("hello2")
        public String hello3(Model model) { 
            model.addAttribute("today", new Date());
            return "hello2";
        }

4、做运算

[1]: /images/20220403/98276baee438448582e29d7882660ffc.png
[http_localhost_8080_hello1]: http://localhost:8080/hello1
[1 1]: /images/20220403/6537ea878ff442cd97ca7d5d8c54cdb2.png