springboot项目开发,使用thymeleaf前端框架的简单案例

news2025/1/19 17:05:15

springboot项目开发,使用thymeleaf前端框架的简单案例！我们看一下，如何在springboot项目里面简单的构建一个thymeleaf的前端页面。来完成动态数据的渲染效果。

第一步，我们在上一小节，已经提前预下载了对应的组件了。

如图，springboot的强大之处就在于，它有一套完整的版本依赖关系。管理很方便。插件彼此之间的依赖，不需要我们再去思考了。它自己会下载所需的依赖包。

在依赖项里面可以看见这个选项，就是下载成功了。

第二步，我们设计一下自己的前端页面的存档路径。

如图，我们在templates文件夹下面新建了一个index的文件夹，里面新建立一个index.html文件。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
    <p>
        <span>用户名字:张三</span>
        <span>用户年龄:21</span>
        <span>用户爱好:骑车，爬山，健身</span>
    </p>

</div>
</body>
</html>

暂时是静态的内容。等会我们会把它改成动态熏染的。

第三步，我们配置一下，thymeleaf基础的参数信息。告诉我们的springboot去哪里渲染我们的内容。

server.port= 8080

#Thymeleaf 基础配置参数
spring.thymeleaf.cache = false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

如上内容，这个就是基础的。application.properties里面的thymeleaf参数配置。我们选择了不开启缓存。

第四步，我们提前准备好一个user实体类，存储我们的动态数据，

package com.example.demo.bean;

import java.util.ArrayList;

public class User {
    private String id;
    private String name;
    private String age;
    private ArrayList<String> hobby;

    public String getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public ArrayList<String> getHobby() {
        return hobby;
    }

    public void setHobby(ArrayList<String> hobby) {
        this.hobby = hobby;
    }

    @Override
    public String toString() {
        return "User{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", age='" + age + '\'' +
                ", hobby=" + hobby +
                '}';
    }
}

第五步，我们新增了一个UserController控制器。还是一个简单的get请求路径。

测试一下。我们的内容能不能渲染到前端页面内。

package com.example.demo.controller;

import com.example.demo.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

@Controller
@RequestMapping("/user")
public class UserController {
    @GetMapping("/index")
    public String  index(ModelMap model){
        User user = new User();
        user.setId("201212001");
        user.setAge("24");
        user.setName("老刘");
        ArrayList<String> hobbyList = new ArrayList();
        hobbyList.add("瑜伽");
        hobbyList.add("骑马");
        hobbyList.add("看电影");
        user.setHobby(hobbyList);
        model.addAttribute("user",user);
        //输入对应的前端页面的名字index
        return "/index/index";
    }
}

借助于官方提供的ui.modelMap插件可以完成数据的绑定。在前端页面就可以拿到这个数据来渲染了。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
    <p>
        <span th:text="${user.name}"></span>
        <span th:text="${user.age}"></span>
        <span th:text="${user.hobby}"></span>
    </p>

</div>
</body>
</html>

如图，我们已经采取了动态渲染的方式。

看看能不能正常获取到数据。