认识前后端之间的交流过程（新手必备）

之前对前后端分离的项目接触的比较少，没有比较清晰的理解两者之间是如何相互作用的，今天向学长要来了一个基于Java+vite的简单的前后端分离的小项目（附上链接：xiaofei030/student-project (github.com)），比较适合新手理解两者之间的交流。下面给大家请听我娓娓道来：

首先，大家请看这张图有前后端有个大体的了解，例如一个登录的流程：前端发送请求+登录提交的用户名、密码、验证码，后端接收请求和参数并且执行内部程序来查找数据库里的用户表，如果在数据库里找到对应的用户，那么就返回一个正确的信号返回给后端，后端的正确结果返回给前端，前端发现结果正确之后才进行跳转到首页，否则不进行跳转。

下面，我以上面说到的项目为例，来具体说说这个流程：

首先，就是vite里面的 vite.config.ts文件里面的proxy里面的target是唯一要保持前后端一致的地方，这也是前后端传值的关键所在，

然后，在http文件夹里面的config.ts文件中把“/api”设置成基本路径

在http文件夹里面的index.ts文件里引入config.ts文件，拿到里面的基本路径 ，创建axios实例，通过这个实例去封装get、post、put、delete方法（主要是完成常见的增删改查的功能），把这些配置文件理解清楚之后，我们把目光看向具体的功能上，还是以登录功能为例：

我们填写完账户密码，执行登录函数，执行里面的login()方法，login()方法再调用之前封装好的request.post()请求，把账户、密码 、验证码这些数据都通过请求的方式传给后端

后端在控制层执行login方法，

执行服务层里的实现类里实现接口的login()方法,

这里的调用映射层的selectOne()方法（这里是使用的mubatisplus里面自带的方法，不用在mapper文件里写对应的sql语句）实现查找功能，最后层层返回给前端

通过最后返回的res结果，来判断是否登录成功来进行页面跳转的操作，否则不进行跳转。

这个就是前后端交流的整个过程啦，希望这些对你有所帮助，如果对你有用的话，可以点赞收藏起来呦，方便下次查阅。