前端对应后端注解完整传参示例
后端统一实体类参考
java
运行
@Data
public class User {
private Long id;
private String username;
private Integer age;
}
一、@PathVariable 路径变量
后端接口
java
运行
@GetMapping("/user/{id}")
public R<User> get(@PathVariable Long id) {
}
1. Axios / Fetch
js
运行
// axios
axios.get('/user/1001')
// fetch
fetch('/user/1001')
2. 原生表单 / 链接
html
预览
<a href="/user/1001">查看用户</a>
地址格式：/user/{变量}，参数拼在 URL 路径里，不能放问号后
二、@RequestParam Query 参数（?key=value）
后端接口
java
运行
@GetMapping("/user/list")
public R list(
@RequestParam String username,
@RequestParam(defaultValue = "1") Integer page
) {
}
请求地址：/user/list?username=张三&page=2
1. Axios GET
js
运行
axios.get('/user/list', {
params: {
username: '张三',
page: 2
}
})
2. 原生 Form GET
html
预览
<form action="/user/list" method="get">
<input name="username">
<input name="page">
<button type="submit">查询</button>
</form>
3. 拼接 URL
js
运行
axios.get(`/user/list?username=${name}&page=${page}`)
三、表单提交 x-www-form-urlencoded（@ModelAttribute / 无注解实体）
后端
java
运行
@PostMapping("/user/form")
public R form(User user) {
}
// 等价
// public R form(@ModelAttribute User user) {}
1. 原生 form 表单（默认编码）
html
预览
<form action="/user/form" method="post">
<input name="username">
<input name="age">
<button>提交</button>
</form>
2. Axios post 表单格式
js
运行
// 方式1：URLSearchParams
let params = new URLSearchParams()
params.append('username', '张三')
params.append('age', 18)
axios.post('/user/form', params)
// 方式2：qs序列化
import qs from 'qs'
axios.post('/user/form', qs.stringify({username:'张三',age:18}))
请求头自动：Content-Type: application/x-www-form-urlencoded
四、@RequestBody JSON 传参（前后端分离最常用）
后端
java
运行
@PostMapping("/user/save")
public R save(@RequestBody User user) {
}
必须设置请求头 Content-Type: application/json
Axios 示例
js
运行
axios.post('/user/save', {
username: "李四",
age: 22
})
Fetch 原生
js
运行
fetch('/user/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: "李四",
age: 22
})
})
注意：GET 请求不能使用 @RequestBody，无请求体
五、@RequestHeader 请求头传参
后端
java
运行
@GetMapping("/user/info")
public R info(@RequestHeader("token") String token) {
}
Axios
js
运行
axios.get('/user/info', {
headers: {
token: 'abc123xyz'
}
})
六、@CookieValue Cookie 取值
前端无需额外操作，浏览器自动携带 Cookie，后端直接读取
java
运行
@GetMapping("/session")
public R session(@CookieValue("SESSIONID") String sessionId) {
}
七、@RequestPart 文件上传 multipart/form-data
后端
java
运行
@PostMapping("/upload")
public R upload(
@RequestPart MultipartFile file,
@RequestPart User user
) {
}
Axios 上传
js
运行
let formData = new FormData()
// 文件
formData.append('file', file)
// JSON参数转字符串
formData.append('user', JSON.stringify({username:'张三',age:18}))
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
