如何在Vue和Spring?boot之間實現(xiàn)前后端連接
以下是我學(xué)習(xí)中的粗淺理解，如有錯誤請多多包涵
1.Vue
在Vue一端我們使用axios來向后端發(fā)出請求
安裝axios
npm install axios
在自己需要向后端發(fā)從請求的組件上引入axios
在script標(biāo)簽里復(fù)制
import axios from "axios"
2.Springboot
前端項目默認(rèn)運行在8080端口，防止前后端運行沖突
我們配置后端運行在8081端口：
在application.yml中粘貼
server: port: 8081
server要頂格寫
在項目中創(chuàng)建一個controller包，并寫一個類取名為MemController（叫啥無所謂）
目錄如下：
接下來看圖抄就行了
在MemController類上寫上注解
@CrossOrigin
@RestController
@RequestMapping("/mem")
其中第一個注解是為了解決跨域問題
第三個注釋括號里面寫啥都行（我是MemController所以寫成了mem）
譬如我們要寫一個根據(jù)學(xué)號查詢成員的方法，如圖所示
其中return后面的代碼如果不理解可以去看看mybatis的知識
其中@GetMapping注釋里面的 findbyid 隨便寫無所謂，見名知意就行了
后面的{sno} 要和 方法里的形參的sno保持一致
如此一來我們后端就搞定了
在回頭來看前端的知識
在script里寫上
axios.get("http://localhost:8081/mem/findbyid/" + this.sno).then((resp) => {
console.log(resp);
}我們調(diào)用axios中的get方法，因為我們后端調(diào)用的是@GetMapping的注解
"http://localhost:8081/mem/findbyid/"，因為后端運行在本機(jī)的8081端口，@RequestMapping里寫的是mem，@GetMapping里寫的是findbyid
其中this.sno是前端的學(xué)號數(shù)據(jù)用來動態(tài)查詢
.then方法有一個resp參數(shù)，它的data屬性接收的是后端return后的數(shù)據(jù)（也即resp.data，可以打印resp來看看里面有什么），如此我們就得到了來自后端的數(shù)據(jù)了
總結(jié)
到此這篇關(guān)于如何在Vue和Spring boot之間實現(xiàn)前后端連接的文章就介紹到這了,更多相關(guān)Vue和Spring boot前后端連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中el-tree動態(tài)初始默認(rèn)選中和全選實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動態(tài)初始默認(rèn)選中和全選實現(xiàn)的相關(guān)資料,eltree默認(rèn)選中eltree是一種常用的樹形控件,通常用于在網(wǎng)頁上呈現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09
vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)實例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中的vendor.js文件過大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue組件父與子通信詳解，實現(xiàn)登錄窗口，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)九宮格圖片展示模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue如何監(jiān)聽頁面緩存事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例
本文主要介紹了Vue簡易注冊頁面+發(fā)送驗證碼功能的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
自從入了 Vue 之后，一直在用 axios 這個庫來做一些異步請求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
文章介紹了如何在Vue中設(shè)置頁面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時,還分享了在若依框架中實現(xiàn)主頁面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進(jìn)行設(shè)置2025-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)倒計時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03