SpringBoot使用Thymeleaf

睿虎

已于 2024-01-29 18:45:38 修改

阅读量899

点赞数 23

分类专栏： SpringBoot系列基础教程文章标签： spring boot 后端 java

于 2024-01-23 11:38:15 首次发布

本文链接：https://blog.youkuaiyun.com/laisc7301/article/details/135767661

版权

SpringBoot系列基础教程专栏收录该内容

15 篇文章

订阅专栏

[!NOTE]

本教程是《SpringBoot系列基础教程》之一，教程目录：https://blog.youkuaiyun.com/laisc7301/article/details/135918617

首先按照图示新建项目：

添加以下依赖：

找到application.properties文件，并写入下面内容：

server.port=8001
spring.thymeleaf.prefix=classpath:/templates/

如果不加spring.thymeleaf.prefix这一行，等一下会报404错误。

整个项目的文件结构如下图所示：

先把TestController的代码放出来：

TestController.java

package com.laisc.example2.controller;

import com.laisc.example2.entity.MyData1;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

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

@Controller
@RequestMapping("/test")
public class TestController {

    @RequestMapping("/test1")
    public String test1(){
        return "test1";
    }

    @RequestMapping("/test2")
    public String test2(Model model){
        String name = "laisc";
        model.addAttribute("name", name);
        return "test2";
    }

    @RequestMapping("/test3")
    public String test3(Model model){
        List<MyData1> myList = new ArrayList<>();
        myList.add(new MyData1(1,"laisc","1234"));
        myList.add(new MyData1(2,"admin","qwer"));
        myList.add(new MyData1(3,"root","root"));
        model.addAttribute("list123", myList);

        return "test3";
    }
    @RequestMapping("/test4")
    public String test4(Model model){
        MyData1 mydata1 = new MyData1(1,"laisc","1234");
        model.addAttribute("data123", mydata1);
        return "test4";
    }
    @RequestMapping("/test5")
    public String test5(HttpServletRequest request){
        String name = "laisc";
        request.setAttribute("name", name);
        return "test2";
    }
}

看这一段：

@RequestMapping("/test1")
public String test1(){
    return "test1";
}

再看test1.html中的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello, world!
</body>
</html>

这里由于return “test1”;，所以显示了test1.html的内容。

再看这一段：

@RequestMapping("/test2")
public String test2(Model model){
    String name = "laisc";
    model.addAttribute("name", name);
    return "test2";
}

看test2.html中的内容：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'">3333</p>
</body>
</html>

此时如果访问http://localhost:8001/test/test2 ，会看到 Hello, laisc! 文字。

注意，不要漏了<html xmlns:th="http://www.thymeleaf.org">这一行。

看这一段：

@RequestMapping("/test3")
public String test3(Model model){
    List<MyData1> myList = new ArrayList<>();
    myList.add(new MyData1(1,"laisc","1234"));
    myList.add(new MyData1(2,"admin","qwer"));
    myList.add(new MyData1(3,"root","root"));
    model.addAttribute("list123", myList);

    return "test3";
}

再看看MyData1的代码：

MyData1.java

package com.laisc.example2.entity;

public class MyData1 {
    private int id = 0;
    private String username="";
    private String password="";

    public MyData1() {
    }

    public MyData1(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "MyData1{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

看看test3.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>ID</th>
        <th>username</th>
        <th>password</th>
    </tr>
    <tr th:each="data123 : ${list123}">
        <td th:text="${data123.id}">-1</td>
        <td th:text="${data123.username}">abc</td>
        <td th:text="${data123.password}">555</td>
    </tr>
</table>
</body>
</html>

此时访问http://localhost:8001/test/test3 ，会看到下面文字。

ID	username	password
1	laisc	1234
2	admin	qwer
3	root	root

再看这一段：

@RequestMapping("/test4")
public String test4(Model model){
    MyData1 mydata1 = new MyData1(1,"laisc","1234");
    model.addAttribute("data123", mydata1);
    return "test4";
}

看看test4.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${data123.username})}">链接1</a>

<a href="details.html" th:href="@{/order/details(orderId=${data123.username})}">链接2</a>

<a href="abc.html" th:href="'order/'+${data123.id}+'/details?orderId='+${data123.username} ">链接3</a>

<a href="abc.html" th:href="@{'/details/'+${data123.id}(orderId=${data123.username})}">链接4</a>

<a href="abc.html" th:href="@{'/details/'+${data123.id}+'/aaa'(orderId=${data123.username})}">链接5</a>
</body>
</html>

此时访问http://localhost:8001/test/test4 ，会看到下面几个链接。

链接1 链接2 链接3 链接4 链接5

最后看这一段：

@RequestMapping("/test5")
public String test5(HttpServletRequest request){
    String name = "laisc";
    request.setAttribute("name", name);
    return "test2";
}