快捷導(dǎo)航

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

更新時(shí)間：2022年10月10日 11:30:32 作者：架構(gòu)師全棧之路

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

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

1、未進(jìn)行二次封裝之前的操作

1.1 前端調(diào)用接口設(shè)計(jì)

（傳遞的參數(shù)使用拼接的形式）：

showAllUserInfo(currentPage, pageSize) {
      //異步請(qǐng)求顯示所有數(shù)據(jù)
      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 后端接口設(shè)計(jì)

    @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后的設(shè)計(jì)

2.1 封裝的接口類(lèi)型（只展示關(guān)鍵的接口調(diào)用部分）

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

2.2 前端調(diào)用接口設(shè)計(jì)

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

    showAllUserInfo(currentPage, pageSize) {
      //異步請(qǐng)求顯示所有數(shù)據(jù)
      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 后端接口設(shè)計(jì)

   @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);
    }

3、友情提示

這個(gè)真的是巨坑、總是報(bào)轉(zhuǎn)換不對(duì)、通過(guò)以下方式可以將stirng類(lèi)型的轉(zhuǎn)換為int類(lèi)型

Integer currentPage = Integer.parseInt(maps.get(“page”).toString());

使用Map接收參數(shù)，必須使用@RequestParam修飾。
使用data傳遞參數(shù)，必須使用一個(gè)實(shí)體類(lèi)接收參數(shù)，而且需要添加注解@RequestBody進(jìn)行修飾

4、效果展示

在這里插入圖片描述

到此這篇關(guān)于Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)的文章就介紹到這了,更多相關(guān)Vue傳遞參數(shù)給后端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: