前端请求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