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