vue连接本地服务器

vue 连接本地服务器做后端。

后端服务

使用springboot新建一个基于restful的接口,访问如下的地址,返回值。

vue构建

新建一个vue项目,安装访问服务器的插件。

npm install axios vue-axios --save

修改main.js使用axios,最终结果如下

js 复制代码
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如下

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工程,打开项目。如下就是已经连接上了本地的后端的服务器。打印出如下的信息。

相关推荐
不如喫茶去1 分钟前
VUE查询-历史记录功能
前端·javascript·vue.js
养海绵宝宝的小蜗2 分钟前
Linux 例行性工作任务(定时任务)知识点总结
linux·运维·服务器
持梦远方5 分钟前
重生之我拿捏Linux——《三、shell脚本使用》
前端·chrome
行走在顶尖13 分钟前
代码截断运行逻辑
前端
武天20 分钟前
说说你对slot的理解?slot使用场景有哪些?
vue.js
一枚前端小能手20 分钟前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
乌萨奇也要立志学C++20 分钟前
【Linux】基础IO(二)深入理解“一切皆文件” 与缓冲区机制:从原理到简易 libc 实现
linux·运维·服务器
草莓熊Lotso21 分钟前
《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》
前端·c++·python·dubbo
武天24 分钟前
vue中,key的原理
vue.js
武天28 分钟前
如何打破scope对样式隔离的限制?
vue.js