springboot 集成thymeleaf实战

最新推荐文章于 2024-10-19 23:05:30 发布

虾米大王

最新推荐文章于 2024-10-19 23:05:30 发布

阅读量380

点赞数 12

分类专栏： springboot 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/modern358/article/details/135454556

版权

springboot 专栏收录该内容

127 篇文章 0 订阅

订阅专栏

新建Spring Boot项目

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.shrimpking</groupId>
    <artifactId>demo1</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo1</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

package com.shrimpking.Test1;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2024/1/8 12:15
 */
public class Person
{
    private String name;

    private Integer age;

    public Person()
    {
        super();
    }

    public Person(String name, Integer age)
    {
        this.name = name;
        this.age = 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;
    }
}

根据默认原则，脚本样式、图片等静态文件应放置在src/main/resources/static下，这里引入了Bootstrap和jQuery，结构如图

根据默认原则，页面应放置在src/main/resources/templates下。在src/main/resources/templates下新建index.html，如图

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{bootstrap-3.4.1/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{bootstrap-3.4.1/css/bootstrap-theme.min.css}"/>
</head>
<body>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">访问model</h3>
        </div>
        <div class="panel-body">
            <span th:text="${singlePerson.name}"></span>
        </div>
    </div>
    <div th:if="${not#lists.isEmpty(people)}">
        <div class="panel panel-heading">
            <h3 class="panel-title">列表</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="person: ${people}">
                    <span th:text="${person.name}"></span>
                    <span th:text="${person.age}"></span>
                    <button class="btn" th:onclick=" 'getName(\'' + ${person.name} + '\');'">获得名字</button>
                </li>
            </ul>
        </div>
    </div>
    <script th:src="@{jQuery-3.4.1/jQuery-3.4.1.js}" type="text/javascript"></script>
    <script th:src="@{bootstrap-3.4.1/js/bootstrap.min.js}"></script>
    <script th:inline="javascript">
        var single = [[${singlePerson}]];
        console.log(single.name + " " + single.age)

        function getName(name) {
            console.log(name);
        }
    </script>
</body>
</html>

package com.shrimpking.Test1;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2024/1/8 12:32
 */
@Controller
public class Test1Controller
{
    @RequestMapping(value = "/index",method = RequestMethod.GET)
    public String index(Model model){
        Person single = new Person("aa",11);

        List<Person> people = new ArrayList<>();
        Person person1 = new Person("xx",11);
        Person person2 = new Person("yy",22);
        Person person3 = new Person("zz",33);
        people.add(person1);
        people.add(person2);
        people.add(person3);

        model.addAttribute("singlePerson",single);
        model.addAttribute("people",people);
        return "index";
    }


}