前后端交互，传递多个对象的解决方案之一

一级新生

已于 2023-05-10 09:55:50 修改

阅读量1.1k

点赞数 2

分类专栏：前端VUE SpringBoot 文章标签： javascript vue.js spring boot json axios

于 2023-05-08 17:38:07 首次发布

本文链接：https://blog.csdn.net/weixin_45928161/article/details/130563849

版权

前端VUE 同时被 2 个专栏收录

20 篇文章 11 订阅

订阅专栏

SpringBoot

7 篇文章 0 订阅

订阅专栏

在Web开发中，使用Vue和Axios向SpringBoot后端传递参数时，应注意前端发送的对象不应包含其他对象，否则可能导致错误。文章提供了一个示例，展示了如何序列化对象以进行安全传输，并在后端如何接收和处理这些参数。

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

系统环境

Web项目，VUE前端，Axios方法，SpringBoot+Mybatis后端，MySQL数据库

前端部分

// 处理参数(采用了深度复制)
var userInfoDto = JSON.parse(JSON.stringify(this.userInfo));
var ldcdto = JSON.parse(JSON.stringify(this.userInfo.ldcdto));
var articleDto = JSON.parse(JSON.stringify(this.article));
// 访问后端
await this.$axios.post('http://localhost:xxxx/oa/LDC/updateLDC', {
    userInfoDto: userInfoDto,
    ldcdto: ldcdto,
    articleDto: articleDto,
})
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

后端部分

接收参数的类

package com.sdcw.program.controller.param;

import com.sdcw.program.dto.ArticleDto;
import com.sdcw.program.dto.LikesDislikesCollectionsDto;
import com.sdcw.program.dto.UserInfoDto;

public class UpdateLDCParams {
    private UserInfoDto userInfoDto;
    private LikesDislikesCollectionsDto ldcdto;
    private ArticleDto articleDto;

    public UserInfoDto getUserInfoDto() {
        return userInfoDto;
    }

    public void setUserInfoDto(UserInfoDto userInfoDto) {
        this.userInfoDto = userInfoDto;
    }

    public LikesDislikesCollectionsDto getLDCDto() {
        return ldcdto;
    }

    public void setLDCDto(LikesDislikesCollectionsDto LDCDto) {
        this.ldcdto = LDCDto;
    }

    public ArticleDto getArticleDto() {
        return articleDto;
    }

    public void setArticleDto(ArticleDto articleDto) {
        this.articleDto = articleDto;
    }
}

controller

package com.sdcw.program.controller;

import com.sdcw.program.controller.param.UpdateLDCParams;
import com.sdcw.program.dto.ArticleDto;
import com.sdcw.program.dto.LikesDislikesCollectionsDto;
import com.sdcw.program.dto.UserInfoDto;
import com.sdcw.program.service.LikeDislikeCollectionService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import javax.naming.ldap.LdapContext;

@RestController
@RequestMapping("/LDC")
public class LikeDislikeCollectionController {
    @Resource
    private LikeDislikeCollectionService LDCService;

    // 更新点赞、点踩、收藏
    @RequestMapping("/updateLDC")
    public int updateLDC(@RequestBody UpdateLDCParams params) {
        // 提取参数
        UserInfoDto userInfoDto = params.getUserInfoDto();
        LikesDislikesCollectionsDto LDCDto = params.getLDCDto();
        ArticleDto articleDto = params.getArticleDto();
        // 设置参数
        userInfoDto.setLDCDto(LDCDto);
        userInfoDto.setArticleDto(articleDto);
        int rst = LDCService.updateLDC(userInfoDto);
        return rst;
    }
}