如何在Vue和Spring boot之间实现前后端连接
以下是我学习中的粗浅理解，如有错误请多多包涵
1.Vue
在Vue一端我们使用axios来向后端发出请求
安装axios
npm install axios
在自己需要向后端发从请求的组件上引入axios
在script标签里复制
import axios from "axios"
2.Springboot
前端项目默认运行在8080端口，防止前后端运行冲突
我们配置后端运行在8081端口：
在application.yml中粘贴
server: port: 8081
server要顶格写
在项目中创建一个controller包，并写一个类取名为MemController（叫啥无所谓）
目录如下：
接下来看图抄就行了
在MemController类上写上注解
@CrossOrigin
@RestController
@RequestMapping("/mem")
其中第一个注解是为了解决跨域问题
第三个注释括号里面写啥都行（我是MemController所以写成了mem）
譬如我们要写一个根据学号查询成员的方法，如图所示
其中return后面的代码如果不理解可以去看看mybatis的知识
其中@GetMapping注释里面的 findbyid 随便写无所谓，见名知意就行了
后面的{sno} 要和 方法里的形参的sno保持一致
如此一来我们后端就搞定了
在回头来看前端的知识
在script里写上
axios.get("http://localhost:8081/mem/findbyid/" + this.sno).then((resp) => {
console.log(resp);
}我们调用axios中的get方法，因为我们后端调用的是@GetMapping的注解
"http://localhost:8081/mem/findbyid/"，因为后端运行在本机的8081端口，@RequestMapping里写的是mem，@GetMapping里写的是findbyid
其中this.sno是前端的学号数据用来动态查询
.then方法有一个resp参数，它的data属性接收的是后端return后的数据（也即resp.data，可以打印resp来看看里面有什么），如此我们就得到了来自后端的数据了
总结
到此这篇关于如何在Vue和Spring boot之间实现前后端连接的文章就介绍到这了,更多相关Vue和Spring boot前后端连接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3-print-nb实现页面打印(含分页打印)示例代码
大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下2024-01-01
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，如果是大型项目，很多时候都需要在子组件之间传递数据，使用vue的状态管理工具vuex很好的解决2018-08-08
这篇文章主要介绍了使用Vue-cli 3.0搭建Vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue store之状态管理模式的详细介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果2022-08-08
这篇文章主要介绍了Vue生成动态表单功能，这是小编第一次接这个需求，作为前端开发的我真的不知如何下手，今天小编通过一段代码给大家分享vue生成动态表单效果,需要的朋友可以参考下2019-11-11
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍一下vue实现在页面上添加水印的实例,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧2023-12-12
vite打包出现"default" is not exported by "no
这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vuejs中父子组件之间通信方法,结合实例形式详细分析了vue.js父组件向子组件传递消息以及子组件向父组件传递消息具体操作实现技巧,需要的朋友可以参考下2020-01-01
最新评论