Vue中傳遞自定義參數到后端、后端獲取數據并使用Map接收參數

更新時間：2022年10月10日 11:30:32 作者：架構師全棧之路

有些傳遞的參數是直接拼接到URL地址欄中的、但是為了統一管理、不能將傳遞的參數直接拼接到地址欄中，接下來通過本文給大家介紹Vue中傳遞自定義參數到后端、后端獲取數據并使用Map接收參數，感興趣的朋友一起看看吧

在對axios進行二次封裝的時候、為了統一接口的設計。有些傳遞的參數是直接拼接到URL地址欄中的、但是為了統一管理、不能將傳遞的參數直接拼接到地址欄中。
如何自定義傳遞的參數到后端，后端如何獲取到這些自定義的參數？如果解決這一問題，我就能隨便傳遞參數，不在局限于將參數拼接到URL中，不局限只能后端的javaBean對象傳遞表單的形式

1、未進行二次封裝之前的操作

1.1 前端調用接口設計

（傳遞的參數使用拼接的形式）：

showAllUserInfo(currentPage, pageSize) {
      //異步請求顯示所有數據
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      axios
        .get("user/findAllUser/" + currentPage + "/" + pageSize)
        .then((res) => {
          if (res.code === 200) {
              this.tableDatas = res.data.result.userList;
              this.total = res.data.result.totals;
         } else {
              _this.$message.error(resp.data.errMessage);
        }
        });
    },

1.2 后端接口設計

    @RequestMapping(
        value = {"/user/findAllUser/{page}/{size}"},
        method = {RequestMethod.GET}
    )
    public Result findAllUser(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
        int currentPage = page;
        int pageSize = size;
        Map<String, Integer> map = new HashMap();
        map.put("startIndex", (currentPage - 1) * pageSize);
        map.put("pageSize", pageSize);
        List<User> userList = this.userService.findAllUser(map);
        Long totals = this.userService.findUserTotals();
        HashMap<String, Object> result = new HashMap();
        result.put("userList", userList);
        result.put("totals", totals);
        return Result.ok().data("result", result);
    }

2、使用二次封裝axios后的設計

2.1 封裝的接口類型（只展示關鍵的接口調用部分）

   findAllUser: (params) => {
        return Get('http://localhost:8282/user/findAllUser', params)
    }

2.2 前端調用接口設計

將要傳遞的參數放入這里： const params = { page: currentPage, size: pageSize };

    showAllUserInfo(currentPage, pageSize) {
      //異步請求顯示所有數據
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      const params = {
        page: currentPage,
        size: pageSize,
      };
      this.$axios.findAllUser(params).then((res) => {
        if (res.code === 200) {
          this.tableDatas = res.data.result.userList;
          this.total = res.data.result.totals;
        } else {
          _this.$message.error(resp.data.errMessage);
        }
      });
    },

2.3 后端接口設計

   @RequestMapping(
        value = {"/user/findAllUser"},
        method = {RequestMethod.GET}
    )
    public Result findAllUser(@RequestParam Map<String, Object> maps) {
        System.out.println(maps.get("page"));
        System.out.println(maps.get("size"));
        Integer currentPage = Integer.parseInt(maps.get("page").toString());
        Integer pageSize = Integer.parseInt(maps.get("size").toString());
        Map<String, Integer> map = new HashMap();
        map.put("startIndex", (currentPage - 1) * pageSize);
        map.put("pageSize", pageSize);
        List<User> userList = this.userService.findAllUser(map);
        Long totals = this.userService.findUserTotals();
        HashMap<String, Object> result = new HashMap();
        result.put("userList", userList);
        result.put("totals", totals);
        return Result.ok().data("result", result);
    }