用全栈项目解析OSI七层模型：Vue前端 + SpringBoot后端的请求全流程
场景描述
用户在前端点击「查询订单」按钮 → Vue发起HTTP请求 → SpringBoot后端处理并返回数据 → 前端渲染结果
OSI各层在项目中的具体实现
1. 应用层：定义业务规则
- 前端：
axios.get('/api/orders')发起HTTP GET请求 - 后端：
@GetMapping("/api/orders")声明接口路由 - 核心作用：约定数据语义（HTTP协议定义请求/响应格式）
2. 表示层：数据格式翻译
- 前端：JS对象 → JSON字符串（
JSON.stringify()） - 后端：Java对象 → JSON（
@RestController自动序列化） - 核心作用：跨语言数据兼容（统一使用JSON作为中间格式）
3. 会话层：维持交互状态
- 前端：请求头自动携带
Cookie: session_id=xxx - 后端：通过Session ID验证用户权限
- 核心作用：保持连续对话（类似通话保持不中断）
4. 传输层：端到端可靠传输
-
协议：TCP（axios默认协议）
-
端口：Tomcat监听8080端口
-
关键能力：
- 三次握手建立连接
- 丢包重传机制（确保订单数据完整）
5. 网络层：跨网络路由寻址
-
寻址依据：目标服务器IP（如
192.168.1.100） -
核心设备：路由器
-
关键能力：
- 选择最优网络路径（如电信/联通线路）
- IP协议封装数据包（贴目的地标签）
6. 数据链路层：局域网精准投递
- 寻址依据：MAC地址（物理设备标识）
- 核心设备：交换机
- 工作示例：
前端MAC: AA:BB:CC:11:22:33 → 后端MAC: AA:BB:CC:99:88:77 - 关键能力：同网络设备直连通信（类似快递员精准配送至小区楼栋）
7. 物理层：比特流传输
- 载体：网线/光纤
- 转换过程： 网卡将二进制数据 → 电信号/光信号
- 核心作用：物理介质传输（承载所有数据的公路系统）
数据流全景图
[应用层] Vue点击按钮 →
[表示层] 请求转JSON →
[会话层] 携带Session ID →
[传输层] TCP封装发往8080端口 →
[网络层] IP协议路由寻址 →
[数据链路层] 交换机MAC寻址 →
[物理层] 网卡发送比特流
为什么需要分层？
在Vue中调用 axios.get() 时，就不用关心以下问题：
1.数据如何被路由器跨城传输（网络层）
2.交换机如何通过MAC地址找到服务器（数据链路层）
3.网线如何传输电信号（物理层）
