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

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

话不多说，直接上教程

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类

然后循环输出一下：

 好了，我们可以看到数据已经可以成功输出了