前端请求RestController发送数据方法汇总
一、获取前端GET请求数据
1、 数据在URL路径上
后端代码
@RequestMapping("/api/data")
public class DataController {
@GetMapping("/{id}")
public Student getData(@PathVariable("id") int id ){}
}
前端代码
export function query(id) {
return request({
url: `api/data/${id}`,
method: 'get'
})
}
注意:URL的填写要用`(飘号)不是单引号
2、传输使用query String Parametters
后端代码
@GetMapping("/all")
public ResponseEntity<Object> queryData(@RequestParam String name) {
return new ResponseEntity<>(dataService.queryByName(name), HttpStatus.OK);
}
注意:@RequestParam 不加也可以请求到数据,但是多个参数要加注解
前端代码
export function queryName(name) {
return request({
url: 'api/data/all',
method: 'get',
params: {
name: name
}
})
注意:如果方法上的name与参数名一样可以直接写
params: {
name
}
F12 页面显示:
二、获取前端POST请求数据
1、使用post请求传输数据
后端代码
@PostMapping
public ResponseEntity<Object> create(@Validated @RequestBody Data data{
return new ResponseEntity<>(dataService.create(data), HttpStatus.CREATED);
}
前端代码
export function add(data) {
return request({
url: 'api/data',
method: 'post',
data
})
}
F12 页面显示:
三、获取前端DELETE请求数据
1、使用delete请求传输数据
后端代码
@DeleteMapping
public ResponseEntity<Object> delete(@RequestBody Integer[] ids) {
dataService.deleteAll(ids);
return new ResponseEntity<>(HttpStatus.OK);
}
前端代码
export function del(ids) {
return request({
url: 'api/data/',
method: 'delete',
data: ids
})
}
F12 页面显示:
四、获取前端PUT请求数据
1、使用put请求传输数据
后端代码
@PutMapping
public ResponseEntity<Object> update(@Validated @RequestBody Data data{
dataService.update(data);
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}
前端代码
export function edit(data) {
return request({
url: 'api/data',
method: 'put',
data
})
}
F12页面展示: