关于前端数组对象传输给后端的最全解决方法

最新推荐文章于 2024-07-07 10:25:24 发布

依晴无旧

最新推荐文章于 2024-07-07 10:25:24 发布

阅读量9.8k

点赞数 6

文章标签： json java vue.js elementui spring boot

本文链接：https://blog.csdn.net/zuodingquan666/article/details/118692159

版权

本文介绍了在前后端分离中如何处理数据传输的问题，特别是数组对象的转换。前端通过JSON.stringify()将数组对象转为字符串，然后使用axios和qs库发送给后端。后端接收到字符串后，利用fastjson将其解析为List对象。教程详细展示了前后端的代码实现，确保数据能够正确传输和解析。

摘要由CSDN通过智能技术生成

话说啥是前后端分离中最容易出现问题的，莫过于两端之间的数据传输了（个人观点）

话不多说，直接上教程

1.前端数组处理

在这里我们需要先将前端数组对象字符串化

先来看看目前的数组对象的格式

接下来将数组对象字符串化

let pv=JSON.stringify(this.$refs.pv.pvImage)

this.$refs.pv.pvImage就是我们这里说的数组对象

字符串话后的值如下图所示：

接下来使用axios通信组件，向后端发送数据

这里需要注意的是，不能够直接使用变量传值，因为注意我们目前的值不是一个对象了，他就是一个简单的字符串，所以需要使用键值对赋值传输：

const res=await this.axios.post('http://localhost:8086/啦啦啦',this.$qs.stringify({
        pv:pv
      }))

2.后端

前端的值准备好了，我们后端需要写相应的API进行接收，如下图所示

@RequestMapping("/getUserConfirmPV")
    JsonObject getUserConfirmPV(String pv){}

我们先输出一下pv，pv值是可以接收到值得，但是输出确实一个字符串，而我们需要的是一个List列表，所以我们需要对pv字符串进行相关编译,很简单，根据字符串中得“ {} ，来进行正则切割，可以自己写个工具类来处理。

在这里直接使用fastjson

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

然后使用fastJson处理

List<phimgPojo> parse =JSON.parseArray(pv,phimgPojo.class);
        for (phimgPojo phimgPojo : parse) {
            System.out.println(phimgPojo.toString());
        }

注意这里得phimgPojo是你对应得javabean类

然后循环输出一下：