快捷導(dǎo)航

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器

相關(guān)文章

Vue生命周期與setup深入詳解
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過(guò)程,也就是new Vue() 開(kāi)始就是vue生命周期的開(kāi)始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期
2022-09-09
vue.js路由跳轉(zhuǎn)詳解
這篇文章主要為大家詳細(xì)介紹了vue.js路由跳轉(zhuǎn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-06-06
Vue.js 60分鐘輕松入門
Vue.js提供了簡(jiǎn)潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js，感興趣的小伙伴們可以參考一下
2016-11-11
Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下
2024-01-01
Vue表單類的父子組件數(shù)據(jù)傳遞示例
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue路由懶加載的實(shí)現(xiàn)方法
本篇文章主要介紹了vue路由懶加載的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題
這篇文章主要介紹了vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue通過(guò)URL傳參如何控制全局console.log的開(kāi)關(guān)詳解
這篇文章主要給大家介紹了關(guān)于Vue根據(jù)URL傳參如何控制全局console.log開(kāi)關(guān)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-12-12