Spring Boot+Vue｜axios非同步請求資料的12種操作

Spring Boot + Vue 前後端分離最核心的操作就是通過非同步請求完成資料同步，這其中又可以分為很多種不同的情況，比如是 GET 請求還是 POST 請求？引數是普通變數還是 JSON？基於 RESTful 架構如何操作等等，今天楠哥就把這些不同的請求方式做了一個彙總，一次性寫清楚，以後需要用的時候直接來查這篇文章即可。

前後端分離非同步請求共包含以下 12 種情況：

1、GET 請求 + 普遍變數傳參

2、GET 請求 + JSON 傳參

3、PSOT 請求 + 普遍變數傳參

4、POST 請求 + JSON 傳參

5、基於 RESTful 的 GET 請求 + 普遍變數傳參

6、基於 RESTful 的 GET 請求 + JSON 傳參

7、基於 RESTful 的 PSOT 請求 + 普遍變數傳參

8、基於 RESTful 的 POST 請求 + JSON 傳參

9、基於 RESTful 的 PUT 請求 + 普遍變數傳參

10、基於 RESTful 的 PUT 請求 + JSON 傳參

11、基於 RESTful 的 DELETE 請求 + 普遍變數傳參

12、基於 RESTful 的 DELETE 請求 + JSON 傳參

Vue 中非同步請求使用 axios 元件來完成，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，可以用在瀏覽器和 node.js 中。Vue 工程中使用 axios，首先要安裝 axios，命令如下所示。

•  

npm install axios

然後建立 Vue 工程，手動匯入 axios 元件，命令如下所示。

•  

vue add axios

Vue 環境搭建好之後，建立 Spring Boot 工程，之後就可以分別完成前後端程式碼的開發。

1、GET 請求 + 普遍變數傳參

axios 非同步 GET 請求的方法為 axios.get(url,params).then()

url：請求的 URL。

params：引數，格式為 {params:{name:value,name:value}}

then()：請求成功的回撥函式。

Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="getData()">getData</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 getData(){
 const _this = this
 axios.get('http://localhost:8181/getData',{params:{id:1,name:'張三'}}).then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@RestController
public class DataHandler {
 @GetMapping("/getData")
 public String getData(Integer id,String name){
 System.out.println(id);
 System.out.println(name);
 return id+name;
 }
}

分別啟動 Vue 和 Spring Boot，點選 getData 按鈕，結果如下圖所示。

 

 

這是前後端分離開發最常見的錯誤：跨域。當請求不在同一域名下的資原始檔時，瀏覽器限制了此類請求，導致報錯，這就是跨域問題，如何解決呢？可以在前端應用中處理，也可以在後端應用中進行處理，這裡我們選擇在 Spring Boot 中處理，方法非常簡單，只需要新增一個 Configuration 即可，具體程式碼如下所示。

•  

@Configurationpublic class CorsConfig implements WebMvcConfigurer {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
 registry.addMapping("/**")
 .allowedOrigins("*")
 .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
 .allowCredentials(true)
 .maxAge(3600)
 .allowedHeaders("*");
 }
}

再次啟動 Spring Boot，點選 getData 按鈕，結果如下圖所示。

 

 

 

 

點選 getData 按鈕之後，客戶端輸出了後端服務返回的資料，axios 請求呼叫成功。

2、GET 請求 + JSON 傳參

Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="getJSON()">getJSON</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 getJSON(){
 const _this = this
 var user = {
 id:1,
 name:'張三'
 }
 axios.get('http://localhost:8181/getJSON',{params:user}).then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@Data
public class User {
 private Integer id;
 private String name;
}

•  

@GetMapping("/getJSON")
public User getJSON(User user){
 System.out.println(user);
 return user;
}

分別啟動 Vue 和 Spring Boot，點選 getJSON 按鈕，結果如下圖所示。

 

 

 

 

3、PSOT 請求 + 普遍變數傳參

axios 非同步 POST 請求的方法為 axios.post(url,params).then()

url：請求的 URL

params：引數，POST 請求中，引數格式不再是 {params:{name:value,name:value}} ，而需要將引數封裝到 URLSearchParams 物件中。

then()：請求成功的回撥函式。

Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="postData()">postData</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 postData(){
 const _this = this
 var params = new URLSearchParams()
 params.append('id', '1')
 params.append('name', '張三')
 axios.post('http://localhost:8181/postData',params).then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@PostMapping("/postData")
public User postData(Integer id,String name){
 System.out.println(id);
 System.out.println(name);
 return new User(id,name);
}

分別啟動 Vue 和 Spring Boot，點選 postData 按鈕，結果如下圖所示。

 

 

 

 

4、PSOT 請求 + JSON 傳參

params 同樣需要將 JSON 物件封裝到 URLSearchParams 中，Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="postJSON()">postJSON</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 postJSON(){
 const _this = this
 var params = new URLSearchParams()
 params.append('id', '1')
 params.append('name', '張三')
 axios.post('http://localhost:8181/postJSON',params).then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@PostMapping("/postJSON")
public User postJSON(User user){
 System.out.println(user);
 return new User(1,"張三");
}

分別啟動 Vue 和 Spring Boot，點選 postJSON 按鈕，結果如下圖所示。

 

 

 

 

5、基於 RESTful GET 請求 + 普遍變數傳參

基於 RESTful 的 axios 非同步 GET 請求的方法為 axios.gett(url).then()

url：請求的 URL，直接追加引數。

then()：請求成功的回撥函式。

Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="restGetData()">restGetData</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 restGetData(){
 const _this = this
 axios.get('http://localhost:8181/restGetData/1').then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@GetMapping("/restGetData/{id}")
public User restGetData(@PathVariable("id") Integer id){
 System.out.println(id);
 return new User(1,"張三");
}

分別啟動 Vue 和 Spring Boot，點選 restGetData 按鈕，結果如下圖所示。

 

 

 

 

6、基於 RESTful GET 請求 + JSON 傳參

基於 RESTful 的 axios 非同步 GET 請求的方法為 axios.get(url,params).then()

url：請求的 URL。

params：引數，格式為 {params:{name:value,name:value}} 。

then()：請求成功的回撥函式。

Vue 程式碼如下所示。

•  

<template>
 <div>
 <button type="button" @click="restGetJSON()">restGetJSON</button><br/>
 </div>
</template>
<script>
 export default {
 methods: {
 restGetJSON(){
 const _this = this
 axios.get('http://localhost:8181/restGetJSON',{params:{id:1,name:'張三'}}).then(function (resp) {
 console.log(resp.data)
 })
 }
 }
 }
</script>

Spring Boot 程式碼如下所示。

•  

@GetMapping("/restGetJSON")
public User restGetJSON(User user){
 System.out.println(user);
 return new User(1,"張三");
}

分別啟動 Vue 和 Spring Boot，點選 restGetJSON 按鈕，結果如下圖所示。