网络基础核心笔记（HTTP、TCP、前后端通信）
一、HTTP 请求/响应完整流程（登录案例）
假设用户在登录页面输入：
手机号：13800138000 密码：123456点击登录按钮。
前端 JavaScript 代码：
fetch("/login",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({telephone:"13800138000",password:"123456"})})浏览器会自动构造 HTTP 请求：
POST /login HTTP/1.1 Host: localhost:8000 Content-Type: application/json { "telephone":"13800138000", "password":"123456" }后端 Gin 路由：
GE.POST("/login",Login)收到请求后：
funcLogin(c*gin.Context){varreq LoginReq c.ShouldBindJSON(&req)}Gin 内部流程：
读取 Body ↓ 解析 JSON ↓ 根据 json 标签匹配字段 ↓ 填充结构体 ↓ 执行参数校验得到：
req.Telephone req.Password随后：
查询数据库 ↓ 验证账号密码 ↓ 生成 JWT ↓ 返回结果返回：
c.JSON(200,gin.H{"token":token,"msg":"登录成功",})响应：
{"token":"xxxxx","msg":"登录成功"}前端收到响应：
constres=awaitfetch(...)constdata=awaitres.json()localStorage.setItem("token",data.token)至此登录完成。
完整链路：
用户点击登录 ↓ 前端 fetch ↓ HTTP 请求 ↓ Gin 路由 ↓ ShouldBindJSON ↓ 数据库查询 ↓ 生成 JWT ↓ c.JSON 返回 ↓ 前端接收 JSON ↓ 保存 Token ↓ 页面跳转二、HTTP 请求由什么组成
一个完整请求：
POST /login HTTP/1.1 Host: localhost:8000 Content-Type: application/json { "telephone":"13800138000", "password":"123456" }分为四部分。
1. 请求方法（Method）
GET POST PUT DELETE表示客户端想干什么。
例如：
GET 查询 POST 新增 PUT 修改 DELETE 删除2. 请求路径（Path）
/login /user/info /todo/list决定执行哪个接口。
例如：
r.POST("/login",Login)请求：
/login执行：
Login()3. 请求头（Header）
例如：
Content-Type: application/json Authorization: Bearer xxxxx作用：
说明数据格式 携带 Token 携带 Cookie 携带浏览器信息4. 请求体（Body）
真正的数据。
{"telephone":"13800138000","password":"123456"}Gin：
c.ShouldBindJSON(&req)就是读取这里的数据。
三、HTTP 响应由什么组成
后端返回：
HTTP/1.1 200 OK Content-Type: application/json { "msg":"success" }包含三部分。
1. 状态码
200 成功 400 参数错误 401 未登录 403 无权限 404 找不到资源 500 服务器异常2. 响应头
Content-Type: application/json告诉浏览器：
返回的是 JSON 数据3. 响应体
{"msg":"success"}真正返回的数据。
四、TCP 三次握手
HTTP 请求发送之前。
必须先建立 TCP 连接。
第一次握手
客户端发送：
SYN意思：
我要建立连接第二次握手
服务器回复：
SYN + ACK意思：
我收到了 我也准备好了第三次握手
客户端回复：
ACK意思：
收到 开始通信过程：
客户端 服务器 SYN ------------------> <-------------- SYN + ACK ACK ------------------>连接建立成功。
为什么必须三次？
目的：
客户端确认： 服务器能收 服务器能发 服务器确认： 客户端能收 客户端能发三次刚好。
两次不够。
四次浪费。
五、TCP 四次挥手
关闭连接时：
第一次挥手
客户端：
FIN意思：
我没数据发了第二次挥手
服务器：
ACK意思：
收到 但我还有数据没发完第三次挥手
服务器：
FIN意思：
我也发完了第四次挥手
客户端：
ACK意思：
收到 连接关闭过程：
客户端 服务器 FIN ------------------> <-------------- ACK <-------------- FIN ACK ------------------>六、TCP 和 UDP 的区别
TCP
特点：
面向连接 可靠传输 保证顺序 保证不丢包应用：
HTTP HTTPS MySQL Redis WebSocketUDP
特点：
无连接 不保证到达 不保证顺序 速度快应用：
视频直播 语音通话 在线游戏 实时音视频对比：
| 特性 | TCP | UDP |
|---|---|---|
| 是否连接 | 需要 | 不需要 |
| 是否可靠 | 是 | 否 |
| 是否有序 | 是 | 否 |
| 速度 | 较慢 | 较快 |
| 应用 | HTTP、数据库 | 直播、游戏 |
七、HTTP、TCP、IP 三者关系
很多人学到这里容易混。
实际上：
HTTP ↓ TCP ↓ IPHTTP
负责：
规定数据格式例如：
POST /login HTTP/1.1属于 HTTP 协议。
TCP
负责：
可靠传输数据保证：
不丢包 不重复 不乱序IP
负责：
找到目标机器例如：
192.168.1.100 8.8.8.8这些都是 IP 地址。
快递类比
HTTP = 信件内容格式 TCP = 快递运输规则 IP = 收件地址八、真实项目中的完整链路
以 Gin 项目为例：
用户 ↓ Vue 页面 ↓ Axios / Fetch ↓ HTTP 请求 ↓ TCP 三次握手 ↓ Gin 路由 ↓ ShouldBindJSON ↓ Service 业务层 ↓ GORM ↓ MySQL ↓ 返回 JSON ↓ 前端渲染页面九、一句话总结
前端负责页面，后端负责数据。
用户点击按钮后，前端通过 HTTP 发送 JSON 数据，HTTP 底层通过 TCP 三次握手建立连接，再通过 IP 找到服务器。Gin 接收请求后解析 JSON、处理业务并返回响应，前端收到 JSON 后更新页面，这样就完成了一次完整的前后端通信。
前端 ↓ HTTP ↓ TCP ↓ Gin ↓ MySQL ↓ Gin ↓ HTTP ↓ 前端