前端请求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 页面显示：

 

get.png

二、获取前端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 页面显示：

 

post.png

三、获取前端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 页面显示：

 

delete.png

四、获取前端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页面展示：

 

put.png