首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue连接本地服务器

vue连接本地服务器的实现示例

2024-01-03 08:22:59 作者：我的天才女友

本文主要介绍了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连接本地服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

elementui+vue+axios实现文件上传本地服务器