Vue向后台传数组数据,springboot接收vue传的数组数据实例

Vue向后台传数组数据

在Vue中，我们可以使用axios库向后台传递数组数据。以下是一个简单的示例：

axios.post('/api/save', {
  data: [1, 2, 3, 4, 5]
})

在上面的示例中，我们使用axios.post方法向/api/save端点发送一个POST请求，并将数组数据作为请求体发送。在后台，我们需要使用Spring Boot来接收这个数组数据。

Spring Boot接收Vue传的数组数据

在Spring Boot中，我们可以使用@RequestBody注解来接收Vue传递的数组数据。以下是一个简单的示例：

@PostMapping("/api/save")
public void saveData(@RequestBody List<Integer> data) {
  // 处理数据
}

在上面的示例中，我们使用@PostMapping注解来定义一个POST请求的端点/api/save。我们使用@RequestBody注解来接收请求体中的数据，并将其转换为一个整数类型的列表。在这个方法中，我们可以对这个列表进行任何处理。

示例1：Vue向后台传递数组数据

在Vue中，我们可以使用以下代码向后台传递数组数据：

axios.post('/api/save', {
  data: [1, 2, 3, 4, 5]
})

在后台，我们可以使用以下代码来接收这个数组数据：

@PostMapping("/api/save")
public void saveData(@RequestBody List<Integer> data) {
  // 处理数据
}

示例2：Vue向后台传递复杂对象数组数据

在Vue中，我们可以使用以下代码向后台传递复杂对象数组数据：

axios.post('/api/save', {
  data: [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ]
})

在后台，我们可以使用以下代码来接收这个复杂对象数组数据：

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

  // getters and setters
}

@PostMapping("/api/save")
public void saveData(@RequestBody List<User> data) {
  // 处理数据
}

在上面的示例中，我们定义了一个User类来表示复杂对象。在saveData方法中，我们使用@RequestBody注解来接收请求体中的数据，并将其转换为一个User类型的列表。在这个方法中，我们可以对这个列表进行任何处理。