利用Spring Boot与前端交互数据

摘要：本文将介绍如何利用Spring Boot搭建后端服务，并与前端进行数据交互。我们将通过一个简单的例子来展示整个过程，包括创建Spring Boot项目、定义API接口、处理HTTP请求以及返回数据给前端。

1. 创建Spring Boot项目

首先，我们需要创建一个Spring Boot项目。你可以使用Spring Initializr（start.spring.io/）来快速生成项目骨架。在项目创建过程中，记得添加Web依赖。

2. 定义API接口

在项目中，我们创建一个名为UserController的控制器类，用于处理前端发来的HTTP请求。在这个例子中，我们定义一个获取用户列表的API接口。

java 复制代码

package com.example.demo.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
@RestController
public class UserController {
    @GetMapping("/users")
    public List<String> getUserList() {
        return Arrays.asList("张三", "李四", "王五");
    }
}

3. 处理HTTP请求

在上面的代码中，我们使用了@RestController注解来创建一个RESTful控制器。@GetMapping注解用于指定处理HTTP GET请求的路径。当前端发送GET请求到/users路径时，getUserList方法会被调用，并返回一个用户列表。

4. 运行Spring Boot应用

将编写好的代码打包成JAR或WAR文件，然后运行应用。在成功启动应用后，你可以在浏览器中访问http://localhost:8080/users来获取用户列表。

5. 前端代码

为了测试我们的API接口，我们可以使用HTML和JavaScript编写一个简单的前端页面。以下是一个简单的例子：

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
    <h1>用户列表</h1>
    <div id="userList"></div>
    <script>
        // 发送GET请求
        fetch('http://localhost:8080/users')
            .then(response => response.json())
            .then(data => {
                // 处理返回的数据
                const userList = document.getElementById('userList');
                data.forEach(user => {
                    const p = document.createElement('p');
                    p.textContent = user;
                    userList.appendChild(p);
                });
            });
    </script>
</body>
</html>

在上面的HTML代码中，我们使用JavaScript的fetch API发送GET请求到我们的Spring Boot应用。请求成功后，我们将返回的数据渲染到页面上。总结：通过本文，我们了解了如何利用Spring Boot搭建后端服务，并与前端进行数据交互。通过定义API接口、处理HTTP请求以及返回数据给前端，我们可以轻松实现前后端分离的开发模式。希望这个例子能帮助你更好地理解这个过程。