前端怎么传list给java

原创

mob649e8164659f 2024-12-25 05:49:36 ©著作权

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

前端如何传递 List 到 Java 后端的项目方案

在现代 web 开发中，前端与后端之间的数据交互是至关重要的。而在某些情况下，前端需要将一个列表（List）传递给 Java 后端进行处理。本文将详细介绍一种可行的方案，包括核心代码示例和类图、流程图。

系统架构概述

在本方案中，前端使用 JavaScript（结合框架如 React、Vue 或者原生 JavaScript）来构建用户界面，而后端则使用 Spring Boot 提供 RESTful API 接口以接收数据。在前后端之间传递数据的主要格式为 JSON，这让结构化数据的交互变得得心应手。

前端实现

下面是一个简单的前端实现示例，使用原生 JavaScript 发送一个包含多个用户信息的 List 到后端：

// 假设这里是用户输入的列表
const userList = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 35 }
];

// 将 List 发送到 Java 后端
fetch('http://localhost:8080/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(userList)
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

后端实现

接下来，后端使用 Spring Boot 创建一个 RESTful API 来接收前端发送的 List 数据。下面是一个简单的 Controller 类示例：

package com.example.demo.controller;

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

import java.util.List;

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

    @PostMapping("/users")
    public ResponseEntity<String> receiveUserList(@RequestBody List<User> userList) {
        // 处理接收到的用户列表
        for (User user : userList) {
            System.out.println("Received user: " + user.getName() + ", age: " + user.getAge());
        }
        return ResponseEntity.ok("User list received successfully!");
    }
}

class User {
    private String name;
    private int age;

    // Getters and Setters
    public String getName() {
        return name;
    }
    
    public void setName(String name) {
        this.name = name;
    }
    
    public int getAge() {
        return age;
    }
    
    public void setAge(int age) {
        this.age = age;
    }
}

类图

为了更好地理解系统结构，我们可以用类图表达出前端与后端的数据传递。以下为类图：

classDiagram
    class User {
        +String name
        +int age
        +getName(): String
        +setName(String name)
        +getAge(): int
        +setAge(int age)
    }
    
    class UserController {
        +ResponseEntity<String> receiveUserList(List<User> userList)
    }

数据传递流程

数据的传递涉及多个过程，包括用户输入、数据格式化、数据发送及接收处理。以下是数据流转的示例流程图：

flowchart TD
    A[用户输入用户信息] --> B[构建用户列表]
    B --> C[将用户列表转换为 JSON]
    C --> D[通过 HTTP POST 请求传递数据]
    D --> E[后端接收数据]
    E --> F[打印用户信息]
    F --> G[返回成功消息]

详细步骤说明

用户输入: 用户在前端页面输入信息，本例中为用户的姓名和年龄。
构建用户列表: 将用户输入的信息组合成一个 JavaScript 对象数组。
数据格式化: 使用 JSON.stringify 方法将 JavaScript 对象数组转换为 JSON 格式的字符串，以便通过 HTTP POST 请求发送。
发送数据: 使用 fetch API 发送 HTTP POST 请求，将 JSON 数据发送到特定的 API 端点。
后端接收数据: Java 后端使用 Spring Boot 处理 HTTP 请求，解析请求体中的 JSON 数据并转换为 Java 对象 List。
处理数据: 可以对接收到的用户列表进行各类操作，例如存储到数据库、进一步计算等。
返回响应: 处理完毕后，后端返回一个响应消息，以告知前端操作的结果。