快捷導(dǎo)航

vue2向springboot傳值接收不到的解決方法

更新時(shí)間：2023年07月09日 16:20:43 作者：蘇禾呀

本文主要介紹了vue2向springboot傳值接收不到的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們?cè)陂_(kāi)發(fā)項(xiàng)目時(shí)，經(jīng)常會(huì)前后端分離，這樣方便開(kāi)發(fā)和測(cè)試。但是前后端分離也會(huì)導(dǎo)致許多的BUG出現(xiàn)。

這是一段vue2代碼：

let url = this.urls.search + "/" + this.currentPage + "/" + this.pageSize;
axios({
    method: "POST",
    url: url,
    data: this.searchForm
}).then((res) => {
    if (res.status === 200) {
      this.loading = false;
      this.menuList = res.data.data;
    } else {
        this.$message({
        type: 'error',
        message: res.data.msg
      });
    }
}).catch((error) => {
    console.log(error);
    this.loading = false;
    this.$message.error("服務(wù)器異常，請(qǐng)稍后再試");
});

這是一個(gè)常見(jiàn)的axios方法，其作用是進(jìn)行分頁(yè)+條件查詢。在這個(gè)方法中，我們需要向后端傳的值有currentPage（當(dāng)前頁(yè)碼）、pageSize（一頁(yè)數(shù)據(jù)條數(shù)）和查詢的對(duì)象。我們?cè)賮?lái)看后端代碼：

    @PostMapping("/list")
    public Result<List<BusinessVO>> list(Integer pageIndex, Integer pageSize, BusinessDTO businessDTO) {
        return Result.getSuccessResult(businessService.list(pageIndex, pageSize, businessDTO));
    }

這是后端controller層的方法，通過(guò)url來(lái)實(shí)現(xiàn)方法的調(diào)用。

但是這樣寫的話，會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：前端的參數(shù)后端（controller）接收不到。

原因是在接收前端的參數(shù)時(shí)需要在后端參數(shù)前加注解。正確代碼如下：

    @PostMapping("/list/{pageIndex}/{pageSize}")
    public Result<List<BusinessVO>> list(@PathVariable Integer pageIndex, @PathVariable Integer pageSize, @RequestBody BusinessDTO businessDTO) {
        return Result.getSuccessResult(businessService.list(pageIndex, pageSize, businessDTO));
    }

一般傳參數(shù)時(shí)，頁(yè)數(shù)，頁(yè)面大小等和數(shù)據(jù)庫(kù)無(wú)關(guān)的字段會(huì)直接加在url上，@PostMapping("/list/{pageIndex}/{pageSize}") 在這里加上這兩個(gè)參數(shù)，在參數(shù)前面加上@PathVariable注解；前端直接把這兩個(gè)參數(shù)加在url后面即可this.urls.search + "/" + this.currentPage + "/" + this.pageSize。

而條件查詢的參數(shù)一般不外顯，直接使用@RequestBody會(huì)更方便，前端數(shù)據(jù)放在data里面。

注意：在使用@RequestBody注解時(shí)，方法必須使用@PostMapping（POST請(qǐng)求）！??！如使用@GetMapping（Get請(qǐng)求）則會(huì)報(bào)錯(cuò)！??！

到此這篇關(guān)于vue2向springboot傳值接收不到的解決方法的文章就介紹到這了,更多相關(guān)vue2 springboot傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: