如何在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-route的使用,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue全局组件与局部组件的区别，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
使用ElementUI中el-upload上传文件转base64格式
这篇文章主要介绍了使用ElementUI中el-upload上传文件转base64格式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了vue常用的数字孪生可视化的自适应方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了详解vue 自定义组件使用v-model 及探究其中原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue2响应式的缺点影响，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要为大家介绍了Vue2中的组件通信方式，文中通过示例进行了详细的介绍，对我们学习Vue有一定的帮助，感兴趣的小伙伴可以了解一下2022-07-07
最新评论