如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
以下是我學(xué)習(xí)中的粗淺理解，如有錯(cuò)誤請(qǐng)多多包涵
1.Vue
在Vue一端我們使用axios來(lái)向后端發(fā)出請(qǐng)求
安裝axios
npm install axios
在自己需要向后端發(fā)從請(qǐng)求的組件上引入axios
在script標(biāo)簽里復(fù)制
import axios from "axios"
2.Springboot
前端項(xiàng)目默認(rèn)運(yùn)行在8080端口，防止前后端運(yùn)行沖突
我們配置后端運(yùn)行在8081端口：
在application.yml中粘貼
server: port: 8081
server要頂格寫(xiě)
在項(xiàng)目中創(chuàng)建一個(gè)controller包，并寫(xiě)一個(gè)類取名為MemController（叫啥無(wú)所謂）
目錄如下：
接下來(lái)看圖抄就行了
在MemController類上寫(xiě)上注解
@CrossOrigin
@RestController
@RequestMapping("/mem")
其中第一個(gè)注解是為了解決跨域問(wèn)題
第三個(gè)注釋括號(hào)里面寫(xiě)啥都行（我是MemController所以寫(xiě)成了mem）
譬如我們要寫(xiě)一個(gè)根據(jù)學(xué)號(hào)查詢成員的方法，如圖所示
其中return后面的代碼如果不理解可以去看看mybatis的知識(shí)
其中@GetMapping注釋里面的 findbyid 隨便寫(xiě)無(wú)所謂，見(jiàn)名知意就行了
后面的{sno} 要和 方法里的形參的sno保持一致
如此一來(lái)我們后端就搞定了
在回頭來(lái)看前端的知識(shí)
在script里寫(xiě)上
axios.get("http://localhost:8081/mem/findbyid/" + this.sno).then((resp) => {
console.log(resp);
}我們調(diào)用axios中的get方法，因?yàn)槲覀兒蠖苏{(diào)用的是@GetMapping的注解
"http://localhost:8081/mem/findbyid/"，因?yàn)楹蠖诉\(yùn)行在本機(jī)的8081端口，@RequestMapping里寫(xiě)的是mem，@GetMapping里寫(xiě)的是findbyid
其中this.sno是前端的學(xué)號(hào)數(shù)據(jù)用來(lái)動(dòng)態(tài)查詢
.then方法有一個(gè)resp參數(shù)，它的data屬性接收的是后端return后的數(shù)據(jù)（也即resp.data，可以打印resp來(lái)看看里面有什么），如此我們就得到了來(lái)自后端的數(shù)據(jù)了
總結(jié)
到此這篇關(guān)于如何在Vue和Spring boot之間實(shí)現(xiàn)前后端連接的文章就介紹到這了,更多相關(guān)Vue和Spring boot前后端連接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue動(dòng)態(tài)組件與異步組件超詳細(xì)講解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件，動(dòng)態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時(shí)切換不同的組件，比如咱們現(xiàn)在要展示一個(gè)文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框2023-03-03
vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vite+vue3中require?is?not?defined問(wèn)題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)釘釘?shù)目记谌諝v，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家介紹了Vue3源碼解析watch函數(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue如何導(dǎo)出頁(yè)面為word格式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用詳解
這篇文章主要介紹了Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08