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