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 按鈕，結果如下圖所示。
