java接收前端传过来的数组

原创

mob64ca12e8a030 2024-12-21 06:49:13 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e8a030的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java 接收前端传来的数组

在现代Web开发中，前端与后端之间的交互变得愈加频繁。前端应用通常需要与后端服务器进行数据交互，这其中包括数组等多种数据类型的传递。本文将探讨如何在Java后端接收前端传来的数组，并生成相关代码示例。同时，我们还会采用状态图和饼状图来辅助理解这一过程。

1. 前端数据传输

在前端（如使用React、Vue或原生JavaScript）中，我们可以使用HTTP请求将数据发送到后端。以下是一个简单的JavaScript示例，展示如何通过fetch API将数组发送到Java后端。

const dataArray = [1, 2, 3, 4, 5];

fetch('http://localhost:8080/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataArray),
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Error:', error);
});

在这个例子中，我们定义了一个数组dataArray，然后使用fetch函数向后端发送POST请求。我们将数组转换为JSON字符串，并设置请求头的Content-Type为application/json。

2. Java后端接收数组

现在，前端数据已经发送到后端。接下来，我们需要在Java中接受这个数组。在Spring Boot框架中，我们可以使用@RequestBody注解直接接收请求体中的JSON数据。

以下是Java后端的示例代码：

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api")
public class DataController {

    @PostMapping("/data")
    public ResponseEntity<String> receiveData(@RequestBody List<Integer> data) {
        // 处理接收到的数据
        System.out.println("Received array: " + data.toString());
        
        // 返回成功响应
        return ResponseEntity.ok("Data received successfully");
    }
}

在上面的代码中，我们创建了一个REST控制器DataController，并定义了一个处理POST请求的receiveData方法。我们使用@RequestBody注解将请求体映射到Java的List<Integer>类型，这样一来，前端发送的JSON数组就可以自动转换为Java的列表类型。

3. 状态图示例

为了更好地展示前后端交互的状态，可以使用状态图来表示请求的生命周期。请参考以下状态图：

stateDiagram
    [*] --> 请求发送
    请求发送 --> 等待响应
    等待响应 --> 响应成功 : 收到200
    等待响应 --> 响应失败 : 收到错误
    响应成功 --> [*]
    响应失败 --> [*]

在状态图中，状态从请求发送到等待响应，再到响应成功或失败。这种状态管理对于理解异步请求的生命周期十分重要。

4. 饼状图示例

我们可以使用饼状图来统计成功与失败响应的比例。以下是一个饼状图示例，反映请求结果的分布：

pie
    title 请求响应结果分布
    "成功响应": 70
    "失败响应": 30

通过这个饼状图，我们可以直观地看到成功与失败响应的比例，从而更好地评估我们的后端接口稳定性和可靠性。

5. 完整的代码示例

结合上述内容，我们可以提供一个完整的例子，以帮助读者更好地理解整个流程。

前端代码

const dataArray = [1, 2, 3, 4, 5];

fetch('http://localhost:8080/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataArray),
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('Error:', error);
});

后端代码

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api")
public class DataController {

    @PostMapping("/data")
    public ResponseEntity<String> receiveData(@RequestBody List<Integer> data) {
        // 处理接收到的数据
        System.out.println("Received array: " + data.toString());
        
        // 返回成功响应
        return ResponseEntity.ok("Data received successfully");
    }
}