前端传输数组类型到后端（附代码）_业界新闻

发布时间:2024-07-13 19:49

阅读量:2

文章目录

前言
1. 问题所示
2. 普通数组
3. JSON格式
4. 彩蛋

前言

通过问题Bug指引代码实战，结合实战问题，相应查漏补缺

1. 问题所示

前端传输数组给后端的时候，出现如下问题：

前端log请求如下：

且请求后端你的时候出现了服务器500error：

2. 普通数组

如果不使用 JSON 格式传输数据，而是使用普通的数组，可以考虑通过 POST 请求的 body 直接传输数组的形式

前端，可以将数组直接作为请求的 body
后端，可以直接接收请求的 body 作为数组进行处理

前端数据：

<template>   <div>     <!-- 按钮触发事件 -->     <button @click="sendArrayToBackend">发送数组到后端</button>   </div> </template>  <script> export default {   methods: {     sendArrayToBackend() {       const array = ['a', 'b', 'c'];        // 发送数组到后端       fetch('http://localhost:8080/processArray', {         method: 'POST',         body: array.join(',') // 将数组转换成逗号分隔的字符串作为请求的 body       })       .then(response => response.text())       .then(result => console.log(result))       .catch(error => console.error('Error:', error));     }   } } </script>

后端代码：

import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController;  @SpringBootApplication @RestController public class BackendApplication {      public static void main(String[] args) {         SpringApplication.run(BackendApplication.class, args);     }      @PostMapping("/processArray")     public String processArray(@RequestBody String[] array) {         // 处理收到的数组         for (String element : array) {             System.out.println(element);         }         return "Array processed successfully";     } }

在这个示例中，前端使用 array.join(',') 将数组转换成逗号分隔的字符串，然后作为请求的 body 直接发送到后端的 /processArray 接口。后端接收到字符串后，根据逗号分隔拆分成数组进行处理

3. JSON格式

前端通过点击按钮触发sendArrayToBackend方法，该方法使用Fetch API将数组发送到后端的/processArray接口。后端接收到数组后进行处理，并返回响应。

前端代码：

<template>   <div>     <!-- 按钮触发事件 -->     <button @click="sendArrayToBackend">发送数组到后端</button>   </div> </template>  <script> export default {   methods: {     sendArrayToBackend() {       const array = ['a', 'b', 'c'];        // 发送数组到后端       fetch('http://localhost:8080/processArray', {         method: 'POST',         headers: {           'Content-Type': 'application/json'         },         body: JSON.stringify(array)       })       .then(response => response.text())       .then(result => console.log(result))       .catch(error => console.error('Error:', error));     }   } } </script>

后端代码：

import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController;  @SpringBootApplication @RestController public class BackendApplication {      public static void main(String[] args) {         SpringApplication.run(BackendApplication.class, args);     }      @PostMapping("/processArray")     public String processArray(@RequestBody String[] array) {         // 处理收到的数组         for (String element : array) {             System.out.println(element);         }         return "Array processed successfully";     } }

如果是python代码，也大同小异：

from flask import Flask, request, jsonify  app = Flask(__name__)  @app.route('/receiveArray', methods=['POST']) def receive_array():     received_array = request.json # 这里假设前端发送的是 JSON 数组     print(received_array) # 在后端打印接收到的数组      # 进行后续处理      return 'Array received successfully'  if __name__ == '__main__':     app.run(debug=True)