Web周报01

【百丈之台，其始则一石耳，由是而二石焉，由是而三石，四石以至于千万石焉。领悟亦然。今日记一事，明日悟一理，积久而成学。——毛泽东】

1.前置任务进度

所需工具，插件，环境等已全部部署
计算机网络的学习进度：

已学习 网络协议，计算机网络结构，Internet结构，电路交换，多路复用……等内容

相关学习笔记发布在本人博客：

https://www.czxh.top/2025/02/28/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/
Linux基础学习进度：

已掌握基本的操作。

2.网站学习日志

目标：从一个网站入手，了解用户看到的前端页面是怎么组成的，再到是如何去和服务器后端进行连接和交互（发包的那些内容都去了哪，为什么会返回不同的响应）

构成前端的基础（三件套）：

HTML（结构层）

作用：定义页面的内容和结构（如标题、段落、按钮等）。

示例：

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World</h1>
    <button>点击我</button>
  </body>
</html>

运行 HTML

CSS（样式层）

作用：控制页面的外观（颜色、布局、动画等）。

示例：

1 2	h1 { color: blue; } button { background: orange; }

JavaScript（行为层）

作用：实现动态交互（如点击事件、数据加载、动画逻辑）。

示例：

1
2
3

document.querySelector('button').addEventListener('click', () => {
  alert('按钮被点击了！');
});

如何去和服务器后端进行连接和交互——HTTP 请求

一、HTTP 请求的核心组成

1. 请求方法（HTTP Methods）

定义客户端希望执行的操作类型：

GET：获取资源（如加载网页、查询数据）。
POST：提交数据（如表单提交、创建资源）。
PUT：更新整个资源。
PATCH：部分更新资源。
DELETE：删除资源。
HEAD：获取资源的元信息（不返回内容）。
OPTIONS：查询服务器支持的请求方法（常用于 CORS 预检）。

2. 请求头（Request Headers）

携带请求的元信息，常见字段：

请求头字段	作用
`Host`	目标服务器的域名（必填）。
`User-Agent`	客户端标识（如浏览器类型）。
`Accept`	声明客户端可接收的响应格式（如 `application/json`）。
`Content-Type`	请求体的数据类型（如 `application/json`、`multipart/form-data`）。
`Authorization`	身份凭证（如 `Bearer token`）。
`Cookie`	客户端存储的会话信息。
`Referer`	当前请求的来源页面 URL。
`Cache-Control`	缓存策略（如 `no-cache`）。

3. 请求体（Request Body）

用于 POST、PUT、PATCH 等方法的附加数据。
常见格式：

JSON：{ "name": "Alice", "age": 25 }
表单数据：name=Alice&age=25
文件上传：multipart/form-data

二、HTTP 响应的核心组成

1. 状态码（Status Codes）

表示请求处理结果的三位数字代码：

状态码	类别	常见示例
1xx	信息响应	100（继续）、101（切换协议）
2xx	成功响应	200（OK）、201（已创建）、204（无内容）
3xx	重定向	301（永久重定向）、302（临时重定向）、304（缓存未修改）
4xx	客户端错误	400（请求错误）、401（未授权）、403（禁止访问）、404（未找到资源）
5xx	服务器错误	500（内部错误）、502（网关错误）、503（服务不可用）

2. 响应头（Response Headers）

服务器返回的元信息，常见字段：

响应头字段	作用
`Content-Type`	响应体的数据类型（如 `text/html`、`application/json`）。
`Content-Length`	响应体的字节长度。
`Cache-Control`	缓存策略（如 `max-age=3600`）。
`Set-Cookie`	服务器设置客户端的 Cookie。
`Access-Control-Allow-Origin`	允许跨域请求的域名（CORS 相关）。
`Location`	重定向的目标 URL（用于 3xx 状态码）。

3. 响应体（Response Body）

服务器返回的实际内容，格式由 Content-Type 决定：

HTML：<html>...</html>
JSON：{ "data": [...] }
二进制文件：如图片、PDF。

三、HTTP 请求完整流程示例

1. GET 请求（浏览器地址栏输入 URL）

GET /api/user?id=123 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json

响应示例：

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 27

{ "name": "Alice", "age": 25 }

2. POST 请求（提交表单数据）

POST /api/login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

username=alice&password=123456

响应示例：

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Path=/; HttpOnly
Content-Type: application/json

{ "success": true }

关于发包（学习笔记）：

一、数据包的生命周期

1. 客户端生成请求

输入：用户在浏览器输入 URL 或触发交互（如点击按钮）。
构建请求：
- 浏览器根据操作生成 HTTP 请求（包括方法、URL、Headers、Body）。
- 若使用 HTTPS，请求会被加密（TLS/SSL）。

2. DNS 解析

目的：将域名（如 www.example.com）转换为服务器的 IP 地址（如 93.184.216.34）。
过程：
1. 浏览器缓存 → 本地 Hosts 文件 → 本地 DNS 服务器 → 根 DNS 服务器 → 权威 DNS 服务器。
2. 最终获取目标服务器的 IP 地址。

3. 建立 TCP 连接（三次握手）

目的：确保客户端和服务器之间的可靠通信通道。
步骤：
1. 客户端发送 SYN 包（同步请求）。
2. 服务器回复 SYN-ACK 包（确认同步）。
3. 客户端发送 ACK 包（最终确认）。

4. 发送 HTTP 请求

数据包被拆分为多个 TCP 报文段，通过物理网络（网线、Wi-Fi、4G/5G）传输。
路径：客户端 → 路由器 → 运营商网络 → 互联网骨干网 → 目标服务器。

5. 经过网络中间节点

路由器和交换机：根据 IP 地址逐跳转发数据包。
防火墙和代理：
- 企业防火墙可能过滤非法请求。
- CDN 节点可能缓存响应内容。
- 反向代理（如 Nginx）将请求转发给后端服务器。

6. 服务器处理请求

Web 服务器（如 Apache、Nginx）：接收请求并解析。
应用服务器（如 Node.js、Java Spring）：执行业务逻辑（查询数据库、调用其他服务）。
数据库：处理数据读写操作。

7. 返回 HTTP 响应

服务器生成响应（状态码、Headers、Body），通过相同路径返回客户端。

示例：

HTTP/1.1 200 OK
Content-Type: application/json

{ "message": "Success" }

8. 客户端接收响应

浏览器解析响应内容：
- 若返回 HTML/CSS/JS，渲染页面。
- 若返回 JSON 数据，更新前端状态（如 React/Vue 组件）。

9. 关闭 TCP 连接（四次挥手）

目的：释放连接资源。
步骤：
1. 客户端发送 FIN 包。
2. 服务器回复 ACK 包。
3. 服务器发送 FIN 包。
4. 客户端回复 ACK 包。

二、数据包传输的物理路径

1. 本地网络

客户端设备 → 家庭/公司路由器 → 调制解调器（光猫）。

2. 运营商网络

通过光纤、基站等进入 ISP（如电信、移动）的核心网络。

3. 互联网骨干网

跨城市、跨国的光纤链路，可能经过多个自治系统（AS）。

4. 目标服务器网络

服务器所在机房的路由器 → 负载均衡器 → 具体服务器。

三、数据包可能遇到的“关卡”

1. 防火墙

过滤非法请求（如恶意攻击、非白名单 IP）。

2. CDN（内容分发网络）

缓存静态资源（如图片、JS 文件），减少服务器压力。

3. 反向代理

将请求分发到多台后端服务器（负载均衡）。
处理 SSL 终止、请求重写。

4. 网关（API Gateway）

统一鉴权、限流、日志记录。

四、数据包可能丢失的场景

网络拥堵：路由器丢弃无法处理的数据包。
传输错误：信号干扰导致数据损坏（通过 TCP 重传解决）。
防火墙拦截：违反安全策略的请求被丢弃。
服务器宕机：无法响应请求（返回 5xx 错误）。

3.前端学习日志

本周学习了HTML的基础……

由于篇幅较大，转移至我的博客：

https://www.czxh.top/2025/02/28/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/

4.后端学习日志

（暂无，准备先学习完前端知识）

https://www.czxh.top/2025/02/28/%E5%90%8E%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/

5. NewStar2024 刷题记录

题目：headach3

打开题目，F12查看响应头，得到 flag：

题目：会赢吗

第一步，F12，在查看器中拿到第一部分的flag和下一关的路径

第二步：查看源代码：

<script>
    async function revealFlag(className) {
        try {
            const response = await fetch(`/api/flag/${className}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            if (response.ok) {
                const data = await response.json();
                console.log(`恭喜你！你获得了第二部分的 flag: ${data.flag}\n……\n时光荏苒，你成长了很多，也发生了一些事情。去看看吧：/${data.nextLevel}`);
            } else {
                console.error('请求失败，请检查输入或服务器响应。');
            }
        } catch (error) {
            console.error('请求过程中出现错误:', error);
        }
    }
 
    // 控制台提示
    console.log("你似乎对这门叫做4cqu1siti0n的课很好奇？那就来看看控制台吧！");
</script>