在Vue和Spring boot之间如何实现前后端连接-Toy模板网

这篇具有很好参考价值的文章主要介绍了在Vue和Spring boot之间如何实现前后端连接。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下是我学习中的粗浅理解，如有错误请多多包涵

在Vue一端我们使用axios来向后端发出请求

安装axios

npm install axios

在自己需要向后端发从请求的组件上引入axios

在script标签里复制

import axios from "axios"

在Vue和Spring boot之间如何实现前后端连接

前端项目默认运行在8080端口，防止前后端运行冲突

我们配置后端运行在8081端口：

在application.yml中粘贴

server:
  port: 8081

server要顶格写

在项目中创建一个controller包，并写一个类取名为MemController（叫啥无所谓）

目录如下：

在Vue和Spring boot之间如何实现前后端连接

接下来看图抄就行了

在MemController类上写上注解

@CrossOrigin
@RestController
@RequestMapping("/mem")

在Vue和Spring boot之间如何实现前后端连接

其中第一个注解是为了解决跨域问题

第三个注释括号里面写啥都行（我是MemController所以写成了mem）

譬如我们要写一个根据学号查询成员的方法，如图所示

在Vue和Spring boot之间如何实现前后端连接

其中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来看看里面有什么），如此我们就得到了来自后端的数据了文章来源地址https://www.toymoban.com/news/detail-430316.html

到了这里，关于在Vue和Spring boot之间如何实现前后端连接的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！