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

话不多说,直接上教程

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类

然后循环输出一下:

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐