vue-springboot 前后端分离 参数对应转化时出现Java的反序列化异常,我所遇到的坑

本文解决Vue前端与SpringBoot后端在图片上传过程中遇到的反序列化异常,通过调整Vue中c_photo字段类型,避免Java实体类解析错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-springboot 前后端分离 参数对应转化时出现Java的反序列化异常,我所遇到的坑

不废话 亮代码

vue定义的用来装数据的容器ruleForm

// An highlighted block
      ruleForm: {
        c_name: "",
        c_card_id: "",
        c_group_id: "",
        c_group_name: "",
        c_station: "",
        c_qualification: "",
        c_worktype_id: "",
        c_worktype_name: "",
        c_mobile: "",
        c_photo: [],
    //    c_certificate_path: "",
        c_base64: ""
      },

上传标签(doUpload)

// An highlighted block
          <el-upload
            :file-list="fileList"
            ref="upload"
            style="position:absolute"
            :limit="1"
            :auto-upload="false"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
            :multiple="false"
            :with-credentials="true"
            :action="url"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :on-error="handleError"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus">照片</i>
          </el-upload>

触发事件( this.ruleForm.c_photo = res.data;)拿取图片把名字给c_photo=[]

// An highlighted block
    //选择图片成功执行的方法
    handleSuccess(res, file, fileList) {
     // alert(res)
      this.isSubmit = true;
      if (res.code == 200) {
      //看这里--------------//看这里----------------//看这里-----------//看这里
        this.ruleForm.c_photo = res.data;
        console.log(res.data);
        api.addSomeThingInsertTable(this.ruleForm).then(response => {
          if (response.code == 200) {
            this.$notify.success(response.data);
            location.reload();
          } else {
            this.$notify.error(response.msg);
          }
        });
      }
      console.log(this.isSubmit);
    },
    //选取失败执行
    handleError(error, file, fileList) {
      this.isSubmit = true;
      this.$notify.error(response.msg);
    },
    //删除时执行
    handleRemove(file, fileList) {},
  //选取图片时触发(fileList 装则是el-upload 里面装的所有文件)
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

Java实体类

public class Entity {

    private Integer c_id;
    /**
     * id card
     */
    private String c_card_id;
    /**
     * username
     */
    private String c_name;
    /**
     * 单位id
     */
    private Integer c_group_id;
    /**
     * 单位名称
     */
    private String c_group_name;
    /**
     * 岗位
     */
    private String c_station;
    /**
     * 工种id
     */
    private String c_worktype_id;
    /**
     * 工种name
     */
    private String c_worktype_name;
    /**
     * 工种name
     */
    private String c_qualification;
    /**
     * 联系方式
     */
    private String c_mobile;
    /**
     * 照片
     */
    private String c_photo;

    /**
     * 照片base64
     */
    private String c_base64;
    private Integer user_id;

    public Integer getUser_id() {
        return user_id;
    }

    public void setUser_id(Integer user_id) {
        this.user_id = user_id;
    }

    public String getC_photo() {
        return c_photo;
    }

    public void setC_photo(String c_photo) {
        this.c_photo = c_photo;
    }

    public String getC_base64() {
        return c_base64;
    }

    public void setC_base64(String c_base64) {
        this.c_base64 = c_base64;
    }

    public Integer getC_id() {
        return c_id;
    }

    public void setC_id(Integer c_id) {
        this.c_id = c_id;
    }

    public String getC_card_id() {
        return c_card_id;
    }

    public void setC_card_id(String c_card_id) {
        this.c_card_id = c_card_id;
    }

    public String getC_name() {
        return c_name;
    }

    public void setC_name(String c_name) {
        this.c_name = c_name;
    }

    public Integer getC_group_id() {
        return c_group_id;
    }

    public void setC_group_id(Integer c_group_id) {
        this.c_group_id = c_group_id;
    }

    public String getC_group_name() {
        return c_group_name;
    }

    public void setC_group_name(String c_group_name) {
        this.c_group_name = c_group_name;
    }

    public String getC_station() {
        return c_station;
    }

    public void setC_station(String c_station) {
        this.c_station = c_station;
    }


    public String getC_mobile() {
        return c_mobile;
    }

    public void setC_mobile(String c_mobile) {
        this.c_mobile = c_mobile;
    }

    public String getC_worktype_id() {
        return c_worktype_id;
    }

    public void setC_worktype_id(String c_worktype_id) {
        this.c_worktype_id = c_worktype_id;
    }

    public String getC_worktype_name() {
        return c_worktype_name;
    }

    public void setC_worktype_name(String c_worktype_name) {
        this.c_worktype_name = c_worktype_name;
    }

    public String getC_qualification() {
        return c_qualification;
    }

    public void setC_qualification(String c_qualification) {
        this.c_qualification = c_qualification;
    }

    @Override
    public String toString() {
        return "SourceUser{" +
                "c_id=" + c_id +
                ", c_card_id='" + c_card_id + '\'' +
                ", c_name='" + c_name + '\'' +
                ", c_group_id=" + c_group_id +
                ", c_group_name='" + c_group_name + '\'' +
                ", c_station='" + c_station + '\'' +
                ", c_worktype_id='" + c_worktype_id + '\'' +
                ", c_worktype_name='" + c_worktype_name + '\'' +
                ", c_qualification='" + c_qualification + '\'' +
                ", c_mobile='" + c_mobile + '\'' +
                ", c_photo='" + c_photo + '\'' +
                ", c_base64='" + c_base64 + '\'' +
                ", user_id=" + user_id +
                '}';
    }
}

###指向后端(马上就要出问题了)

// An highlighted block
  mounted() {
        this.uploadData = {
      meet_id: this.meet_id
    };
    this.doUpload =
      G.BASE_URL +
      "/zf/uploadFileWithForm?access_token=" +
      sessionStorage.getItem("token");
  },

此时在表单中新增各种数据 不提交上传图片 连debugger都没进 就

Java控制台报错

// An highlighted block
annot deserialize instance of `java.lang.String` out of START_ARRAY token
(through reference chain: com.demo1.demo11.entity.Entity ["c_photo"])]

找了半天原来是 参数c_photo=[] 在接收时不能被String接收,与其定义 c_photo: [],还不如不定义,修改后的容器

// An highlighted block
     ruleForm: {

     },

是不是很简单!

### 创建和配置Spring Boot与Vue集成的全栈项目 #### 后端部分:Spring Boot项目的创建与配置 为了快速启动并运行一个Spring Boot应用程序,可以利用Spring Initializr在线工具或IDE插件自动生成基础结构。选择所需的依赖项如`Spring Web`, `Thymeleaf`(如果计划用于服务端渲染),以及其他任何必要的库。 一旦生成了初始代码库,则需关注几个关键方面: - **主类定义**:确保存在标注有@SpringBootApplication的应用入口点[^1]。 ```java @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` - **RESTful API接口实现**:根据业务需求编写控制器(Controller), 定义HTTP请求映射路径及其对应的处理器方法[^2]. 对于前后端分离架构而言,通常会暴露一组API供前端调用而不是直接返回HTML页面给浏览器客户端。 #### 前端部分:Vue.js项目的设置 采用官方推荐的方式——vue-cli脚手架来建立新工程最为便捷有效。安装完成后执行命令行指令即可完成环境搭建工作。 ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app ``` 上述操作之后便获得了一个预设好最佳实践规范的基础模板目录树形结构。 #### 集成方案概述 为了让两个独立运作的部分协同合作起来形成完整的Web应用体验,主要考虑以下几个要点: - **静态资源托管**: 将编译后的前端产物放置于Spring Boot内置Tomcat服务器可访问的位置下(比如src/main/resources/static/)以便能被正确加载显示出来. - **CORS(Cross-Origin Resource Sharing)**: 解决跨域资源共享问题至关重要。可以通过在Spring Security配置中添加相应规则或者单独注册全局过滤器的方式来允许特定域名下的请求到达后端API. - **JSON数据交换格式**: 双方通信过程中遵循统一的数据序列化标准有助于提高互操作性和维护性。建议使用Jackson作为默认的消息转换器处理Java对象同Json字符串间的相互转化过程. 最后值得注意的是,在真实生产环境中还需要考虑到安全性加固措施(例如HTTPS加密)、性能优化策略(压缩合并JS/CSS文件)等问题以保障系统的健壮可靠程度达到预期目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值