记录一个一直比较模糊vue与springboot传值问题

本文记录了一位开发者在Vue.js前端与SpringBoot后端交互时,从使用Jpa的@Param注解逐个字段传递,转向尝试以form形式整体传值的经历。在过程中遇到的问题和解决方案,包括使用qs库进行数组序列化,axios发送请求,以及后台如何接收和处理这些数据。文章旨在加深对这种传值方式的理解。
摘要由CSDN通过智能技术生成

之前使用vue与后台交互一直使用Jpa的@Param注解,每个字段都需要表示,虽然直观但某种情况比较费事,想要使用form形式传值却总是出些问题,今天跑通了特地来记录一下以加深记忆。

先记录一下一直用的传值方式。使用npm提供的qs库中的stringify将要传递的数组序列化,并通过axios将序列化后的数组发送到后端,使用@Param接收数组中的每一个参数,这里举一个简单的例子加以说明。

第一部分  vue代码部分 使用了封装的axios传输被qs序列化后的数组

addToken() {
      add(qs.stringify({
        tokenName: this.list.tokenName,
        introduction: this.list.introduction
      })).then(resp => {
        console.log(resp.data)
      })
    }

export function add(data) {
  return request({
    url: '/token/add',
    method: 'post',
    data
  })
}

第二部分 后台接收序列化后的数组内容

    @PostMapping("/add")
    public Result add(@Param("tokenName") String tokenName,
                      @Param("introduction") String introduction) {
        Token token = new Token(tokenName, introductio
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值