小伙伴會(huì)不會(huì)有疑問：“前端怎么給后端傳數(shù)據(jù)呀？比如我想根據(jù)用戶 ID 查對(duì)應(yīng)的用戶信息，該怎么寫？” 今天這篇就聚焦 “接收前端參數(shù)” 這個(gè)核心需求，用 3 個(gè)最常用的場(chǎng)景 + 具體案例，手把手教你搞定，看完就能直接用在項(xiàng)目里！

一、先搞懂：前端會(huì)怎么傳參數(shù)

在寫代碼前，我們先花 2 分鐘搞清楚前端給后端傳參數(shù)的 3 種常見方式，因?yàn)椴煌膫鲄⒎绞?，后端接收的寫法不一樣?/p>

1. 路徑傳參（比如http://localhost:8080/user/1）

參數(shù)直接拼在 URL 路徑里，像上面的 “1” 就是用戶 ID，這種方式適合傳單個(gè)、簡(jiǎn)單的參數(shù)（比如 ID、編號(hào)），URL 看起來很簡(jiǎn)潔。

2. 問號(hào)傳參（比如http://localhost:8080/product?name=手機(jī)&price=3000）

參數(shù)用 “?” 開頭，多個(gè)參數(shù)用 “&” 分隔，這種方式適合傳多個(gè)可選參數(shù)（比如商品搜索時(shí)的名稱、價(jià)格范圍）。

3. 請(qǐng)求體傳參（JSON 格式）

參數(shù)放在請(qǐng)求的 “body” 里，不是拼在 URL 上，格式是 JSON，這種方式適合傳復(fù)雜、多字段的參數(shù)（比如用戶注冊(cè)時(shí)的姓名、手機(jī)號(hào)、密碼，或者提交訂單時(shí)的多個(gè)商品信息），安全性更高，參數(shù)也更靈活。

這 3 種方式覆蓋了 90% 以上的開發(fā)場(chǎng)景，接下來我們逐個(gè)講解后端怎么接收～

二、準(zhǔn)備工作：復(fù)用之前的項(xiàng)目和實(shí)體類

我們還是在之前的「first-springboot-project」項(xiàng)目里操作，不用新建項(xiàng)目，直接復(fù)用已經(jīng)創(chuàng)建好的：

• 實(shí)體類：User（用戶 ID、姓名、年齡、手機(jī)號(hào)）、Product（商品 ID、名稱、價(jià)格、庫存）；
• 控制器：可以在之前的JsonController里加方法，也可以新建ParamController（推薦新建，分類更清晰），這里我們選擇新建。

先確認(rèn)項(xiàng)目能正常運(yùn)行，沒有報(bào)錯(cuò)～

三、場(chǎng)景 1：路徑傳參（接收單個(gè)參數(shù)，如用戶 ID）

最常見的需求：前端傳用戶 ID（比如 “1”），后端根據(jù) ID 查詢對(duì)應(yīng)的用戶信息并返回。

1. 寫接口：用@PathVariable接收路徑參數(shù)

新建ParamController，在里面寫一個(gè)根據(jù)用戶 ID 查用戶的接口：

package com.example.firstspringbootproject.controller;

import com.example.firstspringbootproject.entity.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ParamController {

    /*
     接口1：路徑傳參——根據(jù)用戶ID查詢用戶
     訪問路徑：/user/{userId}，其中{userId}是占位符，表示這里要傳用戶ID
     @PathVariable("userId")：把路徑里{userId}的值，賦值給方法參數(shù)Integer userId
     */
    @GetMapping("/user/{userId}")
    public User getUserById(@PathVariable("userId") Integer userId) {

        // 注意：這里只是模擬查詢（實(shí)際項(xiàng)目會(huì)從數(shù)據(jù)庫查），根據(jù)傳的userId返回不同用戶
        if (userId == 1) {
            // 返回ID為1的用戶
            return new User(1, "小明", 20, "13800138000");
        } else if (userId == 2) {
            // 返回ID為2的用戶
            return new User(2, "小紅", 19, "13900139000");
        } else {
            // 沒有匹配的用戶，返回null（實(shí)際項(xiàng)目會(huì)返回“用戶不存在”的提示）
            return null;
        }
    }
}

2. 關(guān)鍵說明（重點(diǎn)看這 2 處）

• 路徑占位符：@GetMapping("/user/{userId}") 里的 {userId} 是 “占位符”，表示這個(gè)位置要傳參數(shù)，參數(shù)名可以自己定（比如{id}也可以）；
• @PathVariable 注解：@PathVariable("userId") 用來 “提取” 路徑里占位符的值，括號(hào)里的 “userId” 要和路徑里{userId}的名稱完全一致，然后賦值給后面的Integer userId參數(shù)。

3. 測(cè)試接口（用瀏覽器或 Apifox）

測(cè)試 1：查詢 ID 為 1 的用戶

• 瀏覽器地址欄輸入：http://localhost:8080/user/1；
• 返回結(jié)果（JSON）：{"id":1,"name":"小明","age":20,"phone":"13800138000"}，正確！

測(cè)試 2：查詢 ID 為 2 的用戶

• 輸入：http://localhost:8080/user/2；
• 返回：{"id":2,"name":"小紅","age":19,"phone":"13900139000"}，正確！

測(cè)試 3：查詢不存在的 ID（比如 3）

• 輸入：http://localhost:8080/user/3；
• 返回：null（符合我們代碼里的邏輯）。

四、場(chǎng)景 2：?jiǎn)柼?hào)傳參（接收多個(gè)可選參數(shù)，如商品搜索）

需求：前端傳商品名稱（可選）和價(jià)格上限（可選），后端根據(jù)參數(shù)篩選商品列表（比如只傳名稱 “手機(jī)”，就返回所有手機(jī)；只傳價(jià)格上限 3000，就返回所有低于 3000 的商品；兩個(gè)都傳，就返回符合條件的手機(jī)）。

1. 寫接口：用@RequestParam接收問號(hào)參數(shù)

在ParamController里加一個(gè)商品搜索接口：

package com.example.firstspringbootproject.controller;

import com.example.firstspringbootproject.entity.Product;
import com.example.firstspringbootproject.entity.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class ParamController {
    /*
     接口2：?jiǎn)柼?hào)傳參——商品搜索（名稱和價(jià)格上限都是可選參數(shù)）
     訪問路徑示例：/product/search?name=手機(jī)&maxPrice=3000
     @RequestParam(required = false)：表示這個(gè)參數(shù)是可選的，不傳也不會(huì)報(bào)錯(cuò)
     defaultValue = "": 表示如果參數(shù)沒傳，默認(rèn)值是空字符串（針對(duì)String類型）
     */
    @GetMapping("/product/search")
    public List<Product> searchProduct(@RequestParam(required = false, defaultValue = "") String name, @RequestParam(required = false) Double maxPrice) {

        //1.創(chuàng)建商品數(shù)據(jù)庫
        List<Product> productDB = new ArrayList<>();
        productDB.add(new Product(101, "華為手機(jī)", 3999.0, 100));
        productDB.add(new Product(102, "蘋果平板", 5999.0, 50));
        productDB.add(new Product(103, "小米耳機(jī)", 299.0, 200));
        productDB.add(new Product(104, "OPPO手機(jī)", 2999.0, 80));

        // 2. 創(chuàng)建一個(gè)空列表，用來裝篩選后的商品
        List<Product> result = new ArrayList<>();

        // 3. 遍歷“商品數(shù)據(jù)庫”，根據(jù)參數(shù)篩選
        for (Product product : productDB) {
            // 條件1：商品名稱包含傳入的name（如果name不為空）
            boolean matchName = product.getProductName().contains(name);
            // 條件2：商品價(jià)格小于等于傳入的maxPrice（如果maxPrice不為空）
            boolean matchPrice = (maxPrice == null) || (product.getPrice() <= maxPrice);
            // 兩個(gè)條件都滿足，就加入結(jié)果列表
            if (matchName && matchPrice) {
                result.add(product);
            }
        }

        // 4. 返回篩選后的商品列表（Spring Boot自動(dòng)轉(zhuǎn)JSON）
        return result;

    }
}

2. 關(guān)鍵說明（重點(diǎn)看@RequestParam）

• required = false：表示這個(gè)參數(shù)是 “可選的”，前端可以不傳（如果不寫這個(gè)屬性，默認(rèn)是required = true，前端不傳就會(huì)報(bào)錯(cuò)）；
• defaultValue = ""：給參數(shù)設(shè)置 “默認(rèn)值”，比如 name 的默認(rèn)值是空字符串，這樣即使前端不傳 name，也不會(huì)是 null，避免后續(xù)代碼報(bào)錯(cuò)；
• 參數(shù)名對(duì)應(yīng)：@RequestParam 括號(hào)里可以寫參數(shù)名（比如@RequestParam("productName")），如果括號(hào)里不寫，默認(rèn)會(huì)找和方法參數(shù)名（比如name）一致的前端參數(shù)。

3. 測(cè)試接口（多場(chǎng)景測(cè)試，更能理解）

測(cè)試 1：只傳 “商品名稱”（搜索 “手機(jī)”）

• 訪問路徑：http://localhost:8080/product/search?name=手機(jī)；
• 篩選邏輯：名稱包含 “手機(jī)”，價(jià)格不限制；
• 返回結(jié)果：華為手機(jī)（3999）和 OPPO 手機(jī)（2999），正確！

測(cè)試 2：只傳 “價(jià)格上限”（maxPrice=3000）

• 訪問路徑：http://localhost:8080/product/search?maxPrice=3000；
• 篩選邏輯：價(jià)格≤3000，名稱不限制；
• 返回結(jié)果：小米耳機(jī)（299）和 OPPO 手機(jī)（2999），正確！

測(cè)試 3：兩個(gè)參數(shù)都傳（name = 手機(jī) & maxPrice=3000）

• 訪問路徑：http://localhost:8080/product/search?name=手機(jī)&maxPrice=3000；
• 篩選邏輯：名稱包含 “手機(jī)” 且價(jià)格≤3000；
• 返回結(jié)果：只有 OPPO 手機(jī)（2999），正確！

測(cè)試 4：兩個(gè)參數(shù)都不傳

• 訪問路徑：http://localhost:8080/product/search；
• 篩選邏輯：所有商品都符合條件；
• 返回結(jié)果：所有 4 個(gè)商品，正確！

五、場(chǎng)景 3：請(qǐng)求體傳參（接收復(fù)雜 JSON 參數(shù)，如用戶注冊(cè)）

需求：用戶注冊(cè)時(shí)，前端傳一個(gè) JSON 格式的用戶信息（包含姓名、年齡、手機(jī)號(hào)），后端接收這些參數(shù)，模擬 “保存用戶”，然后返回 “注冊(cè)成功” 的提示和保存后的用戶信息（包含自動(dòng)生成的用戶 ID）。

1. 寫接口：用 “實(shí)體類” 接收請(qǐng)求體參數(shù)

在ParamController里加一個(gè)用戶注冊(cè)接口：

package com.example.firstspringbootproject.controller;

import com.example.firstspringbootproject.entity.Product;
import com.example.firstspringbootproject.entity.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
public class ParamController {

    // 模擬“用戶數(shù)據(jù)庫”：存注冊(cè)后的用戶
    private List<User>userDB =new ArrayList<>();

    // 模擬自增ID：每次注冊(cè)新用戶，ID+1
    private Integer nextUserId = 3; // 之前已有ID=1、2的用戶，所以從3開始

    /*
     * 接口3：請(qǐng)求體傳參——用戶注冊(cè)（接收J(rèn)SON格式的用戶信息）
     *  @PostMapping：表示這個(gè)接口用POST請(qǐng)求（前端傳請(qǐng)求體一般用POST，不用GET）
     *  @RequestBody：表示把請(qǐng)求體里的JSON數(shù)據(jù)，轉(zhuǎn)換成User對(duì)象
     */
    @PostMapping("/user/register")
    public String registerUser(@RequestBody User user) {

        // 1. 給新用戶設(shè)置自增ID（前端沒傳，后端自動(dòng)生成）
        user.setId(nextUserId);
        nextUserId++; // 下次注冊(cè)ID+1
        // 2. 模擬“保存用戶”：把用戶添加到“用戶數(shù)據(jù)庫”
        userDB.add(user);
        // 3. 返回注冊(cè)成功的提示（包含用戶信息）
        return "注冊(cè)成功！你的用戶信息：" +

                "ID=" + user.getId() +

                "，姓名=" + user.getName() +

                "，年齡=" + user.getAge() +

                "，手機(jī)號(hào)=" + user.getPhone();

    }
}

2. 關(guān)鍵說明（重點(diǎn)看這 2 個(gè)注解）

• @PostMapping：接收前端的 POST 請(qǐng)求（GET 請(qǐng)求一般用來 “查詢” 數(shù)據(jù)，POST 請(qǐng)求用來 “提交” 數(shù)據(jù)，比如注冊(cè)、提交訂單，這是開發(fā)中的規(guī)范）；
• @RequestBody：把前端請(qǐng)求體里的 JSON 數(shù)據(jù)，自動(dòng)轉(zhuǎn)換成User實(shí)體類對(duì)象 —— 這里的關(guān)鍵是：JSON 里的字段名要和User類的屬性名完全一致（比如 JSON 里的 “name” 對(duì)應(yīng) User 類的private String name），否則無法正確賦值。

3. 測(cè)試接口（必須用 Apifox，瀏覽器沒法傳請(qǐng)求體）

測(cè)試步驟：

打開 Apifox，點(diǎn)擊左上角「+」新建快捷請(qǐng)求；

「Method」選擇「POST」，「URL」輸入：http://localhost:8080/user/register；

點(diǎn)擊「Body」→ 選擇「json」→ 右側(cè)下拉框選擇「JSON」，在輸入框里寫前端要傳的 JSON 數(shù)據(jù)：

{
    "name": "小李",
    "age": 22,
    "phone": "13700137000"
}

點(diǎn)擊右上角「Send」，查看返回結(jié)果：

• 「Response Body」里會(huì)顯示：注冊(cè)成功！你的用戶信息：ID=3，姓名=小李，年齡=22，手機(jī)號(hào)=13700137000；
• 狀態(tài)碼是 200，表示請(qǐng)求成功。

再測(cè)試一次：

再傳一個(gè) JSON：

{
    "name": "小李",
    "age": 21,
    "phone": "13600136000"
}

返回結(jié)果：注冊(cè)成功！你的用戶信息：ID=4，姓名=小張，年齡=21，手機(jī)號(hào)=13600136000，ID 自動(dòng)增長(zhǎng)，正確！

六、常見問題：接收參數(shù)時(shí)的小坑和解決方案

1. 路徑傳參時(shí)，參數(shù)名和占位符不一致，導(dǎo)致接收不到值？

• 比如路徑是/user/{id}，但注解寫的是@PathVariable("userId")，這樣就會(huì)匹配失?。?/li>
• 解決方案：確保@PathVariable括號(hào)里的名稱，和路徑里{}的名稱完全一致（比如@PathVariable("id")）。

2. 問號(hào)傳參時(shí)，前端傳了參數(shù)，但后端接收的是 null？

原因 ：前端傳的參數(shù)名和后端@RequestParam里的參數(shù)名不一致（比如前端傳product_name，后端用name）；

3. 請(qǐng)求體傳參時(shí)，實(shí)體類屬性值是 null？

原因 ：JSON 里的字段名和實(shí)體類屬性名不一致（比如 JSON 里是 “userName”，實(shí)體類是 “name”）；

七、總結(jié)：3 種傳參方式怎么選

今天我們學(xué)完了接收前端參數(shù)的 3 種核心方式，最后用一張表幫你快速判斷該用哪種：

到此這篇關(guān)于SpringBoot接收前端參數(shù)的最常用的場(chǎng)景和具體案例的文章就介紹到這了,更多相關(guān)SpringBoot接收前端參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論