vue连接本地服务器的实现示例
更新时间：2024年01月03日 08:26:00 作者：我的天才女友
本文主要介绍了vue连接本地服务器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
后端服务
使用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工程，打开项目。如下就是已经连接上了本地的后端的服务器。打印出如下的信息。
到此这篇关于vue连接本地服务器的实现示例的文章就介绍到这了,更多相关vue连接本地服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Vue 中的数据绑定和模板渲染都是异步的，那么如何在更新完成后执行回调函数呢？这就需要用到 Vue 的 nextTick 方法了，本文详细介绍了Vue2和Vue3的nextTick实现原理，感兴趣的同学可以参考一下2023-04-04
ResizeObserver loop limit exceeded报错原因及解决方案
这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下2023-09-09
vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了,下面这篇文章主要给大家介绍了关于vue3更新的setup语法糖的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这篇文章主要介绍了发布订阅模式在vue中的实际运用,需要的朋友可以参考下2019-06-06
下面小编就为大家分享一篇vue 路由页面之间实现用手指进行滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随跟随小编过来看看吧2018-02-02
虚拟列表对于大部分一线开发同学来说是一点都不陌生的东西了,这篇文章主要来教大家如何在2分钟内实现一个定高的虚拟列表,感兴趣的可以了解下2024-12-12
本文主要介绍了Vue实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理。这篇文章主要介绍了vue项目每30秒刷新1次接口的实现方法,需要的朋友可以参考下2018-12-12
vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程
在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,下面这篇文章主要给大家介绍了关于vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程,需要的朋友可以参考下2023-02-02
现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下2022-10-10
最新评论