Web 开发基础与计算机网络
Web 开发基础与网络架构详解
本文梳理 Web 开发的基础理论计网知识，包括前后端交互流程、HTTP 状态码排查方法、TCP/IP 网络架构原理，以及 URL 结构与资源定位机制。
一、Web 应用的三层架构
一个典型的 Web 应用由以下三部分构成：
| 层次 | 技术栈 | 职责 |
|---|---|---|
| 前端 | HTML / CSS / JavaScript | 负责页面展示与用户交互 |
| 后端 | Java / Servlet | 处理业务逻辑，响应前端请求 |
| 数据层 | MySQL 等关系型数据库 | 持久化存储数据 |
1.1 前后端交互流程
- 前端 → 后端：浏览器通过 AJAX 发起 HTTP 请求，携带参数，后端接收并处理。
- 后端 → 数据库：后端通过 JDBC（Java Database Connectivity）执行 SQL，完成增删改查操作。
- 后端 → 前端：后端将处理结果以 JSON 格式返回给前端，前端动态渲染页面。
1.2 开发环境 vs 生产环境
| 环境 | 特点 |
|---|---|
| 开发环境 | 本机同时充当服务器和客户端，访问localhost即可调试 |
| 生产环境 | 代码需部署到云服务器，用户通过公网 IP 或域名访问 |
理解两者差异对排查"本地好使、上线出错"类问题至关重要。
二、HTTP 状态码与错误排查
HTTP 状态码是服务器对请求的"应答标签"，掌握常见状态码是 Web 开发调试的基本功。
2.1 404 — 资源未找到
含义：客户端请求的资源在服务器上不存在。
常见触发场景：
直接访问不存在的静态资源
浏览器地址栏输入了错误的 URL，页面直接显示 404。AJAX 请求路径写错
前端代码中的请求路径与后端 Servlet 映射路径不匹配，控制台报 404。
排查思路：
- 检查 URL 路径是否拼写正确，注意大小写；
- 对比前端请求路径与后端
@WebServlet或路由配置是否一致； - 确认项目是否已正确部署（文件是否存在于服务器对应目录）。
2.2 500 — 服务器内部错误
含义：服务器在处理请求时发生了未捕获的异常。
常见触发场景：
- 后端代码出现空指针异常（NullPointerException）；
- 数据库连接失败或 SQL 语句执行出错；
- 配置文件读取异常等。
排查思路：
- 优先查看服务器日志（如 Tomcat 的
catalina.out）； - 定位异常堆栈，找到报错的具体代码行；
- 对 JDBC 操作加 try-catch，打印详细异常信息。
小结：404 看路径，500 看日志。
三、网络架构与通信原理
3.1 网络拓扑的演进
网络并非一蹴而就，而是从简单到复杂逐步演进的：
点对点直连（两台电脑用网线相连） ↓ 星型结构（多台电脑通过交换机连接，构成局域网） ↓ 层级化广域网（家庭 → 楼栋 → 小区 → 城市骨干网 → 省级骨干网 → 国家/国际出口）民用互联网接入通常由电信运营商提供，运营商之间的骨干线路可能存在物理复用，以降低基础设施成本。
3.2 IP 地址 vs MAC 地址
这是理解网络通信的核心概念，二者分工明确、缺一不可。
| 维度 | MAC 地址 | IP 地址 |
|---|---|---|
| 全称 | 媒体访问控制地址 | 网际协议地址 |
| 长度 | 48 位（6 字节） | IPv4：32 位 |
| 分配方式 | 硬件出厂时写入，全球唯一 | 按网络规划动态或静态分配 |
| 作用范围 | 局域网内（同一网段） | 跨网段、跨运营商的全球寻址 |
| 对应层次 | 数据链路层 | 网络层 |
为什么不能只用 MAC 地址？
如果在广域网中用 MAC 地址寻址，路由器就需要向全网广播"谁有这个 MAC 地址"——这会引发路由风暴（广播风暴），网络瞬间瘫痪。因此，跨网段通信必须依赖具有层次结构的 IP 地址。
3.3 数据包传输：IP 不变，MAC 逐跳更换
| 角色 | 类比 |
|---|---|
| 源 IP / 目标 IP | 寄件人地址 / 收件人地址，全程不变 |
| 源 MAC / 目标 MAC | 每段运输的"当前司机"和"下一站仓库"，每跳都换 |
你的电脑 ──→ 家用路由器 ──→ 运营商路由器 ──→ 目标服务器 src_IP = 你的IP (全程不变) dst_IP = 服务器IP (全程不变) src_MAC = 你的MAC → 路由器MAC → ... (每跳更新)结论：
- IP 地址负责宏观寻址，全程不变；
- MAC 地址负责微观跳转，逐跳更新。
四、URL 结构与资源定位
4.1 URL 是什么？
URL（Uniform Resource Locator，统一资源定位符）是互联网上资源的地址。
4.2 URL 的组成结构
以本地开发环境为例：
http://localhost:8080/myproject/index.html ① ② ③ ④ ⑤| 编号 | 部分 | 说明 |
|---|---|---|
| ① | http:// | 协议，规定通信规则 |
| ② | localhost | 主机地址（等价于127.0.0.1，表示本机） |
| ③ | 8080 | 端口号，定位主机上的具体应用 |
| ④ | myproject | 项目名（对应服务器上的部署目录） |
| ⑤ | index.html | 具体资源名（文件路径） |
访问逻辑：通过 IP 找到目标电脑 → 通过端口找到对应软件（如 Tomcat）→ 通过项目名找到部署目录 → 通过资源名找到具体文件。
4.3 常见端口号约定
| 应用 | 默认端口 |
|---|---|
| Tomcat | 8080 |
| MySQL | 3306 |
| HTTP | 80 |
| HTTPS | 443 |
| SSH | 22 |
五、域名解析与 DNS
浏览器输入www.example.com后，并不能直接找到服务器，中间有一个域名解析的过程：
① 浏览器查本地 hosts 文件 ↓ 未命中 ② 查询本地 DNS 缓存 ↓ 未命中 ③ 向运营商 DNS 服务器发起递归查询 ↓ ④ 最终返回该域名对应的 IP 地址 ↓ ⑤ 浏览器用该 IP 发起 HTTP 请求DNS 将人类可读的域名翻译为机器可路由的 IP 地址。
六、即时通讯的消息机制
以常见的即时通讯应用为例，消息传递并非"服务器主动推送"，而是客户端轮询拉取为主：
客户端 A 发送消息 ──→ 服务器存储 客户端 B 定时轮询 ──→ 服务器返回新消息为什么这样设计？
- 若服务器对每个在线用户保持长连接并主动推送，服务器的并发连接数将急剧膨胀；
- 轮询机制将压力分散到时间轴上，同时也保证了弱网环境下的消息可达性（重试拉取即可）。
当然，现代即时通讯也广泛使用 WebSocket 实现真正的双向实时推送，是对轮询模式的重要补充。
七、访问一个网站的完整流程（总结）
用户在浏览器输入 www.example.com ↓ DNS 解析：域名 → IP 地址（如 1.2.3.4） ↓ TCP 三次握手：与目标服务器建立可靠连接 ↓ HTTP 请求发出：GET /index.html HTTP/1.1 ↓ 数据包在网络中路由转发（IP 寻址 + MAC 逐跳） ↓ 服务器接收请求，查找资源（或调用后端逻辑） ↓ HTTP 响应返回：200 OK + HTML 内容 ↓ 浏览器解析 HTML / CSS / JS，渲染页面 ↓ 页面展示给用户