技術標籤：vuejavajavavue.js

之前使用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補充在這裡。