如何在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前后端连接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！