SpringBoot使用thymeleaf

﹏ヽ暗。殇╰゛Y 2023-10-17 22:20 41阅读 0赞

thymeleaf音译：塞姆理符

#### 1.新建SpringBoot项目，选择thymeleaf依赖，会自动导入 ####

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

*  1
 *  2
 *  3
 *  4

#### 2.创建POJO ####

package com.cvsea;
    
    public class Person {
        private String name;
        private Integer age;
    
        public Person(String P_Name,Integer P_Age)
        {
            this.name=P_Name;
            this.age=P_Age;
        }
    
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public Integer getAge() {
            return age;
        }
        public void setAge(Integer age) {
            this.age = age;
        }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26

#### 3.创建演示页面，thymeleaf模板引擎页面放在src/main/resources/templates下。 ####

index.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"/>
    <title>Insert title here</title>
    </head>
    <body>
    
    <div>
        <h3>访问model</h3>
        <span th:text="${singlePeson.name}"></span>
    </div>
    
    <div th:if="${not #lists.isEmpty(people)}">
        <h3>访问列表</h3>
        <ul>
            <li th:each="person:${people}">
                <span th:text="${person.name}"></span>
                <span th:text="${person.age}"></span>
                <button th:onclick="'getName(\''+${person.name}+'\')'">获取名字</button>
            </li>
        </ul>
    </div>
    <script th:inline="javascript">
    var single=[[${singlePeson}]]
    console.log(single.name+"/"+single.age);
    function getName(name)
    {
         
        console.log(name);
    }
    </script>
    </body>
    </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33

#### 4.注入数据 ####

package com.cvsea;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    @SpringBootApplication
    public class Learning1Application {
    
        @RequestMapping("/")
        public String hello(Model model)
        {
            Person person=new Person("pxs",26);
            model.addAttribute("singlePeson",person);
    
            List<Person> people=new ArrayList<Person>();
            people.add(new Person("pxs",26));
            people.add(new Person("nxy",26));
            people.add(new Person("lgp",26));
            model.addAttribute("people",people);
    
            return "index"; 
        }
    
        public static void main(String[] args) {
            SpringApplication.run(Learning1Application.class, args);
        }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34

#### 5.运行效果 ####

![这里写图片描述][SouthEast]

转载自：https://blog.csdn.net/JHYPXS/article/details/78080231

[SouthEast]: https://img-blog.csdn.net/20170924215400535?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSkhZUFhT/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast