如何在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动态组件与异步组件，动态组件是根据数据的变化，可以随时切换不同的组件，比如咱们现在要展示一个文本框和输入框，我们想要根据我们data中定义的值去决定是显示文本框还是输入框2023-03-03
这篇文章主要介绍了vue中计算属性和方法的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vite+vue3中require is not defined问题及解决
这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue实现钉钉的考勤日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家介绍了Vue3源码解析watch函数实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了Vue如何导出页面为word格式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue3生成二维码的方式有很多种,下面这篇文章主要给大家介绍了关于如何基于Vue3实现扫码枪扫码并生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue中动态渲染数据时使用$refs无效的解决方案，具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Vue过滤器与内置指令和自定义指令及组件使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
最新评论