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实现动态监测元素高度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
今天小编就为大家分享一篇基于element-ui的rules中正则表达式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。这篇文章主要介绍了vue项目前端错误收集之sentry,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。2020-01-01
这篇文章主要Vue 处理表单input单行文本框的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue和thymeleaf相结合的注意事项详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了vue单页面应用部署配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论