vue開發中使用axios的post、get方法傳遞參數

問題

• 前端在使用 axios.post()攜帶參數強求后端Controller接口時，不使用實體類接收，導致接收的參數為 null 。為了搞清楚有哪些用法，也是研究了一下。

GET請求

• 方式一：參數格式：{params:{key1:val1, key2:val2}}

    //前端
    this.$axios.get("http://localhost:8080/api/function/login/loginget", 
	{params:{name:"carlget1", password:"password"}})

    // 后端代碼
    @RequestMapping("loginget")
    public Map<String, Object> login(String name, String password){}

• 方式二：RestFul風格

    //前端
    axios.get("/checkitem/getItemIdByGroupId/"+row.id)

    //后端
    @GetMapping("/getItemIdByGroupId/{id}")
    public List<Integer> getItemIdByGroupId(@PathVariable("id") Integer id){}

POST請求

• 方式一：實體類接收

    //前端
    var param = {
        currentPage: this.pagination.currentPage, //頁碼
        pageSize: this.pagination.pageSize,  //每頁顯示的記錄數
        queryString: this.pagination.queryString  //查詢條件
    };
    axios.post("/checkitem/groupPageQuery",param)

    //后端
    @PostMapping("/groupPageQuery")
    public PageResult groupPageQuery(@RequestBody QueryPageBean queryPageBean){}

• 方式二：實體類+RestFul風格接收

    //前端
    axios.post("/checkitem/addGroup/"+this.checkitemIds,this.formData)

    //后端
    @PostMapping("/updateGroup/{checkitemIds}")
    public Result updateGroup(@PathVariable("checkitemIds") Integer[] checkitemIds, @RequestBody CheckGroup checkGroup){

總結下來，最好還是使用 實體類 接收參數