vue連接本地服務器的實現(xiàn)示例
更新時間：2024年01月03日 08:26:00 作者：我的天才女友
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
后端服務
使用springboot新建一個基于restful的接口，訪問如下的地址，返回值。
vue構(gòu)建
新建一個vue項目，安裝訪問服務器的插件。
npm install axios vue-axios --save
修改main.js使用axios，最終結(jié)果如下
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App);
app.use(VueAxios, axios)
app.mount('#app')
在新建的vue工程中，HelloWorld.vue中新建訪問的方法。添加mounted方法。完整的js如下
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
let api = "/test/searchByConditon";
this.axios.get("/myapi"+api)
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
})
}
}
</script>
檢驗
運行vue工程，打開項目。如下就是已經(jīng)連接上了本地的后端的服務器。打印出如下的信息。
到此這篇關(guān)于vue連接本地服務器的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue連接本地服務器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細介紹了Vue2和Vue3的nextTick實現(xiàn)原理，感興趣的同學可以參考一下2023-04-04
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
vue3上線已經(jīng)很久了,許多小伙伴應該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關(guān)于vue3更新的setup語法糖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
訂閱發(fā)布模式定義了一種一對多的依賴關(guān)系，讓多個訂閱者對象同時監(jiān)聽某一個主題對象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實際運用,需要的朋友可以參考下2019-06-06
下面小編就為大家分享一篇vue 路由頁面之間實現(xiàn)用手指進行滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨跟隨小編過來看看吧2018-02-02
虛擬列表對于大部分一線開發(fā)同學來說是一點都不陌生的東西了,這篇文章主要來教大家如何在2分鐘內(nèi)實現(xiàn)一個定高的虛擬列表,感興趣的可以了解下2024-12-12
本文主要介紹了Vue實現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
在vue.js項目中，經(jīng)常需要對數(shù)據(jù)實時更新——每隔xx秒需要刷新一次接口——即需要用到定時器相關(guān)原理。這篇文章主要介紹了vue項目每30秒刷新1次接口的實現(xiàn)方法,需要的朋友可以參考下2018-12-12
vue實現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細教程
在微信小程序中,可以很簡單的分享一個頁面,比微信H5簡單多了,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細教程,需要的朋友可以參考下2023-02-02
現(xiàn)在的手機五花八門,造就了移動端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問題,下面這篇文章主要給大家介紹了vue實現(xiàn)移動端適方案的相關(guān)資料,需要的朋友可以參考下2022-10-10