苍穹外卖：深度剖析前后端数据交互与Nginx代理实战

如果本篇文章对你有帮助，请点赞，关注，收藏，你的支持就是我最大的动力！

前言：上一章我们通过了前后端联调来测试登录界面，之后通过断点debug的方式跟踪了程序的运行，这一章我们主要讲解前端是如何将数据返回给后端的，以及代理相关知识。

前端如何将数据返回给后端？

关于前端请求地址 是否等于 后端接口地址，

1. 理想情况：完全一致

在开发初期或简单的个人项目中，前端代码和后端代码可能运行在同一台机器的不同端口上，前端直接请求后端的完整地址。

2. 实际情况一：部署后的分离

当项目上线后，前端代码（HTML、CSS、JS）和后端代码通常不会部署在同一个服务上。

• 前端域名：https://www.myapp.com （用户访问的网站）

• 后端域名：https://api.myapp.com （后端提供的服务地址）

这时，如果前端代码里请求的地址仍然是 http://localhost:3000/api/users，那显然是不对的，因为用户手机上并没有一个叫 localhost 的后端。

解决方案： 前端必须请求线上的后端地址。

• 后端接口地址：https://api.myapp.com/api/users

• 前端请求地址：https://api.myapp.com/api/users

这时，前端请求地址 仍然等于 后端接口地址，只是从本地变为了线上域名。

3. 核心痛点：跨域问题

当域名不同（www.myapp.com 请求 api.myapp.com）时，浏览器的同源策略会触发跨域问题，阻止请求。

为了解决这个问题，在实际开发中引入了一个非常重要的概念：代理（Proxy）。

4. 实际情况二：使用代理（开发中最常见）

为了让开发过程更顺畅，避免被跨域问题困扰，前端项目（特别是使用Vue/React脚手架创建的项目）通常会配置一个代理。

• 前端代码中的请求：前端代码中不再写完整的后端地址，而是写一个相对路径。

  • 前端代码中的请求地址：/api/users

• 代理配置：在项目的配置文件中（如 vue.config.js 或 vite.config.js），告诉开发服务器：“凡是遇到 /api 开头的请求，都自动转发到 https://api.myapp.com 去。”

• 最终效果：

• 浏览器向开发服务器（http://localhost:8080）请求 /api/users。

• 开发服务器收到后，替浏览器去请求 https://api.myapp.com/api/users。

• 后端返回数据给开发服务器。

• 开发服务器再把数据返回给浏览器。

• 因为浏览器始终在和同源的 localhost:8080 通信，所以没有跨域问题。

在这种模式下，两者的关系是：

前端请求地址（相对路径） + 代理配置（转发规则） = 后端接口地址（完整路径）

nginx反向代理，就是将前端发送的动态请求由nginx转发到后端服务器

反向代理就是：

用户（前端） -> 请求 -> Nginx（接线员/保安） -> 转发 -> 真正的后端服务器（干活的）

反向代理（Nginx 干的活）

核心特点：代理的是服务器。 你知道一个固定的电话（域名），但电话那头是一个总机（Nginx），总机根据你拨的分机号，把电话转接到真正接电话的人（后端服务器）。

• 场景：你访问 www.baidu.com。

• 流程：

  你在浏览器输入 www.baidu.com，你的电脑向这个地址发起请求。

• 这个地址实际上指向的是百度的一台 Nginx 服务器（反向代理服务器）。
• Nginx 看了你的请求（比如你想搜图片），心里想：“搜图片的请求应该交给 图片服务器群 去处理。”
• Nginx 内部把请求转发给真正的图片服务器。图片服务器把图片结果返回给 Nginx。
• Nginx 再把结果返回给你的浏览器。

• 比喻：你给一个大公司打电话。

  • 你拨了总机号码（Nginx 地址）。

  • 你说：“我找销售部。”（你的请求内容）。

  • 总机接线员（Nginx）把电话转接到内部分机销售部（具体的后端服务器）。

  • 销售部的人（后端程序）回答你的问题。

  • 你（客户端）只知道总机的号码，并不知道背后是哪个分机（哪台服务器）在给你服务。

好处

Nginx反向代理的配置：

在Nginx的配置文件中配置：

server
listen 80;
server_name localhost;
location /api/{
proxy_pass http://localhost:8080/admin/;#反向代理
nginx.conf

nginx负载均衡的配置方式:

upstream webservers{
server 192.168.100.128:8080;server 192.168.100.129:8080;
server{
listen 80;
server name localhost;
location /api/{proxy_pass http://webservers/admin/;#负载均衡
nginx.conf

这里转发的地址，webservers，里面配置的是后端服务的ip地址，端口号，前端发过来的请求如果能匹配上，就会经过负载均衡，平均的进行分配。

nginx负载均衡策略:

完善登录功能–密码存储

使用   password= DigestUtils.md5DigestAsHex(password.getBytes());  MD5

接口文档导入：

这里我们选择在yapi中导入接口文档。

Swagger

Swagger（现在叫 OpenAPI）是一套编写接口文档的规则，就像写菜谱必须按照“菜名、食材、步骤”来写一样。

• 后端在代码里加一些特殊的注解

• 启动项目后，自动生成一个在线文档地址（比如 http://localhost:8080/swagger-ui.html）

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息，就可以做到生成接口文档，以及在线接口调试页面。官网: https://swagger.io/
Knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。

后端代码 -> Swagger 自动生成 -> 导入 YApi -> YApi 导出 Postman 格式 -> 导入 Postman

使用方式：

1.导入knife4j的maven坐标
2.在配置类中加入knife4j相关配置

3.设置静态资源映射，否则接口文档页面无法访问，

静态资源映射就是：告诉服务器"当用户访问某个网址时，直接返回硬盘上的某个文件，不要经过后端代码处理"。

比喻：快递柜和人工服务

• 没有映射：每个快递都要快递员亲自打电话给你（就像每个请求都要经过后端代码）

• 有映射：快递直接放快递柜，你自己去取（服务器直接返回文件，不用经过代码）

1、Yapi是设计阶段使用的工具，管理和维护接口
2、Swagger在开发阶段使用的框架，帮助后端开发人员做后端的接口测试

Swagger注解：

如果本篇文章对你有帮助，请点赞，关注，收藏，你的支持就是我最大的动力！