vue連接本地服務器的實現(xiàn)示例
更新時間：2024年01月03日 08:26:00 作者：我的天才女友
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
后端服務
使用springboot新建一個基于restful的接口，訪問如下的地址，返回值。
vue構建
新建一個vue項目，安裝訪問服務器的插件。
npm install axios vue-axios --save
修改main.js使用axios，最終結果如下
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)連接上了本地的后端的服務器。打印出如下的信息。
到此這篇關于vue連接本地服務器的實現(xiàn)示例的文章就介紹到這了,更多相關vue連接本地服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-09-09
這篇文章主要為大家詳細介紹了vue.js路由跳轉的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Vue3?響應式系統(tǒng)實現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應式系統(tǒng)實現(xiàn)?computed，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06
Vue.js提供了簡潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內輕松學習Vue.js，感興趣的小伙伴們可以參考一下2016-11-11
Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue3+ElementUI 多選框中復選框和名字點擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復選框和名字點擊方法效果分離方法,文中補充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本篇文章主要介紹了vue路由懶加載的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue3輸入無效路由跳轉到指定error頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue通過URL傳參如何控制全局console.log的開關詳解
這篇文章主要給大家介紹了關于Vue根據(jù)URL傳參如何控制全局console.log開關的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-12-12