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

之前使用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, introduction);
        tokenService.save(token);
        return ResultFactory.buildSuccessResult("添加权限成功");
    }

然后是使用整个数组向后台传值。

第一部分 vue

addUser() {
      console.log(this.list)
      add(this.list).then(resp => {
        // init new battery code
        this.dialogFormVisible = false
        this.$emit('onSubmit')
        console.log(resp.data)
      })
    }

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

第二部分 后台接收数组

@PostMapping(value = "/register")
    public Result register(@RequestBody User user){
        // 部分代码省略
        userService.save(user);
        msg = "用户注册成功！";
        return ResultFactory.buildSuccessResult(msg);
    }

再次遇到问题会把具体bug补充在这里。