在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来看看里面有什么），如此我们就得到了来自后端的数据了