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

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

话不多说,直接上教程

1.前端数组处理

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

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

关于前端数组对象传输给后端的最全解决方法_第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


            com.alibaba
            fastjson
            1.2.75
        

然后使用fastJson处理

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

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

然后循环输出一下:

关于前端数组对象传输给后端的最全解决方法_第2张图片

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

你可能感兴趣的:(json,java,vue.js,elementui,spring,boot)