如何在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前后端连接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中的vendor.js文件过大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue组件父与子通信详解，实现登录窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了Vue.js实现九宫格图片展示模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要介绍了Vue简易注册页面+发送验证码功能的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。2017-12-12
文章介绍了如何在Vue中设置页面全屏,包括下载插件、全屏、退出全屏、全屏切换等操作,同时,还分享了在若依框架中实现主页面内容全屏的方法,包括配置全局变量和在布局文件中进行设置2025-02-02
这篇文章主要为大家详细介绍了vue实现倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论