Java自带前端框架：Spring Boot与Thymeleaf

在现代Web开发中，前后端分离已成为一种常见的架构模式。然而，对于许多Java开发者来说，使用Java作为后端语言的同时，还希望在同一技术栈中实现前端功能。本文将介绍Java自带的前端框架，特别是通过Spring Boot与Thymeleaf的结合，帮助开发者快速建立一个功能齐全的网站。

1. Spring Boot简介

Spring Boot是一个基于Spring框架的开发框架，它简化了Spring应用程序的配置和部署。它提供了一种快速开发的方法，尤其适合微服务架构。使用Spring Boot，我们可以快速创建一个Web应用程序，并且集成前端模板引擎。

2. Thymeleaf简介

Thymeleaf是一个现代的服务器端Java模板引擎，可以用于Web和独立环境。它可以用来生成HTML、XML、JavaScript等内容，尤其适合与Spring Boot配合使用。Thymeleaf的设计旨在提供易于理解和维护的模板，同时兼具灵活性和强大功能。

3. Spring Boot与Thymeleaf的搭建步骤

3.1 创建一个Spring Boot项目

首先，你需要创建一个Spring Boot项目。我们可以使用Spring Initializr来自动生成项目结构。在浏览器中访问 [Spring Initializr](

  • Project: Maven Project
  • Language: Java
  • Spring Boot: 2.x.x
  • Dependencies: Spring Web, Thymeleaf

点击“Generate”按钮，下载生成的项目包，解压后进入项目目录。

3.2 编写基本的文件结构

在src/main/resources/templates目录下，创建一个名为index.html的文件，这是我们的网站首页。

<!DOCTYPE html>
<html xmlns:th="
<head>
    <title>欢迎使用Spring Boot与Thymeleaf</title>
</head>
<body>
    欢迎，<span th:text="${user}">用户</span>!
</body>
</html>

3.3 创建Controller

在src/main/java/com/example/demo（具体路径可能因项目名称不同而有所不同）下，创建一个名为WelcomeController.java的文件，代码如下：

package com.example.demo;

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

@Controller
public class WelcomeController {
    
    @GetMapping("/")
    public String welcome(Model model) {
        model.addAttribute("user", "张三");
        return "index";
    }
}

在上面的代码中，我们定义了一个控制器WelcomeController，当访问根路径时，Thymeleaf模板引擎将渲染index.html页面，并将“用户”动态地替换为“张三”。

3.4 运行应用程序

确保你的项目结构正确，使用以下命令在项目根目录下运行应用：

./mvnw spring-boot:run

在浏览器中访问http://localhost:8080，你应该能够看到如下结果：

欢迎，张三!

4. 数据交互与渲染

通过Thymeleaf，用户可以轻松地与后端数据进行交互。在实际项目中，通常需要从数据库中获取数据并渲染到前端。这里我们将介绍如何将列表数据传递给前端。

4.1 创建数据模型

首先，我们需要定义一个简单的数据模型，例如用户（User）类：

public class User {
    private String name;
    private int age;

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public int getAge() {
        return age;
    }
}

4.2 更新Controller

更新WelcomeController以传递用户列表：

@GetMapping("/users")
public String userList(Model model) {
    List<User> users = Arrays.asList(
        new User("张三", 25),
        new User("李四", 30),
        new User("王五", 28)
    );
    model.addAttribute("users", users);
    return "userList";
}

4.3 创建用户列表模板

在src/main/resources/templates目录下创建userList.html模板：

<!DOCTYPE html>
<html xmlns:th="
<head>
    <title>用户列表</title>
</head>
<body>
    用户列表
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
</body>
</html>

4.4 访问用户列表

重新启动应用程序后，访问http://localhost:8080/users，你应该能看到用户列表以表格形式呈现。

| 姓名 | 年龄 |
|------|------|
| 张三 | 25   |
| 李四 | 30   |
| 王五 | 28   |

5. 流程图展示

以下是应用程序的基本流程图，描述请求如何流转到Controller，并最终返回一个Thymeleaf模板：

flowchart TD
    A[用户请求] --> B{路由匹配}
    B -->|根路径| C[WelcomeController]
    C --> D[返回index模板]
    B -->|用户列表| E[WelcomeController]
    E --> F[返回userList模板]

6. 结尾

通过本文的介绍，我们了解了Java自带的前端框架，尤其是如何利用Spring Boot和Thymeleaf构建一个简单的Web应用程序。Spring Boot为Java开发者提供了一种简便、高效的创建RESTful服务和Web应用的方式，而Thymeleaf则使得动态网页的渲染更加简单直观。掌握这些技能后，你将能够在项目中灵活运用Java开发前后端一体的Web应用。希望这篇文章能为你的学习和开发提供帮助！