Skip to content

Web介绍

1.1 Web开发介绍

Web开发（Web Development）是指构建和维护网站或Web应用程序的过程。它涉及从前端界面到后端逻辑，以及服务器、数据库等完整生态的一系列工作。简单来说，就是让用户能够通过浏览器访问并使用的“网页”和“网络应用”的开发过程。

Web开发 = 前端（用户界面） + 后端（业务逻辑和数据） + 数据库（存储） + 部署（上线和运维）

flowchart TD
    subgraph A [用户端]
        U[用户<br>浏览器/手机/平板]
    end

    subgraph B [前端 Front-End]
        direction TB
        F1[HTML]
        F2[CSS]
        F3[JavaScript]
        F4[前端框架<br>React/Vue/Angular]

        F1 -- 定义结构 --> W[Web 页面]
        F2 -- 定义样式 --> W
        F3 -- 定义行为 --> W
        F4 -- 构建复杂UI --> W
    end

    subgraph C [后端 Back-End]
        direction TB
        S[服务器]
        A1[应用逻辑<br>路由/业务逻辑]
        A2[后端框架<br>FastAPI/Django/Flask]
        A3[API 端点<br>RESTful API/GraphQL]

        A2 -- 提供运行环境 --> S
        A1 -- 处理核心逻辑 --> S
        A3 -- 提供数据接口 --> S
    end

    subgraph D [数据与基础设施]
        DB[数据库<br>MySQL/MongoDB/PostgreSQL]
        FS[文件存储<br>或云服务 AWS/Azure/GCP]
        CA[缓存<br>Redis/Memcached]
    end

    U -- ① 发起请求<br>（点击链接/提交表单） --> B
    B -- ② 发送API请求<br>（HTTP/HTTPS） --> C
    C -- ③ 查询/操作数据 --> D
    D -- ④ 返回数据 --> C
    C -- ⑤ 返回JSON/XML数据 --> B
    B -- ⑥ 渲染并展示内容 --> U

1.2 Web开发技术开发介绍

前端开发（Frontend Development）

前端开发主要负责网站的视觉外观和用户体验，也就是一切在浏览器中看到的东西。

使用的核心技术：

  • HTML（结构，页面骨架）
  • CSS（样式，美化布局）
  • JavaScript（交互，动态效果）

常见工具与框架：React, Angular, Vue.js

后端开发（Backend Development）

负责网站逻辑处理、数据存储和服务器交互。

核心任务：

  • 数据库管理： 存储、获取和处理数据（例如用户信息、商品数据、博客文章）。
  • 应用程序逻辑： 编写处理业务逻辑的代码（例如用户注册、登录验证、支付流程）

常用的后端语言/框架：

  • Python（Django、FastAPI、Flask）
  • Java（Spring Boot）
  • JavaScript/TypeScript（Node.js、Express、NestJS）
  • PHP（Laravel）
  • Go、Ruby 等

数据库（Database）

存储和管理数据，如用户信息、订单、文章内容等。

常见数据库：

  • 关系型数据库：MySQL、PostgreSQL、Oracle
  • 非关系型数据库：MongoDB、Redis

服务器与部署

把网站运行在服务器上，让用户能通过网络访问。

涉及：

  • Web服务器（Nginx、Apache）
  • 云服务（AWS、Azure、阿里云等）
  • 容器化与运维（Docker、Kubernetes、CI/CD）

1.3 HTTP协议

HTTP（超文本传输协议，HyperText Transfer Protocol）是一种应用层协议，专门用于传输超媒体文档，例如 HTML 文件。它是现代 Web 通信的基础，最初设计用于浏览器和 Web 服务器之间的通信，但现已广泛应用于 API 交互和机器对机器的通信中。

  • 客户端-服务器模型 (Client-Server Model)：HTTP 遵循经典的客户端-服务器模型。客户端（如浏览器或应用程序）发起连接并发送请求 (Request)，随后等待服务器返回响应 (Response)。
  • 无状态性 (Stateless)：HTTP 本质上是无状态的。这意味着服务器在处理两个独立的请求之间不会保留任何会话数据或上下文信息。虽然后续通过 Cookies 等机制可以为客户端-服务器交互增加状态管理能力，但协议本身仍保持无状态的特性。

1.3.1 HTTP 协议版本演进与性能优化

HTTP 协议的演进主要围绕解决性能瓶颈（尤其是队头阻塞）和增强安全性展开。

协议版本 核心传输层 关键特征与性能
HTTP/1.1 TCP 顺序发送请求；如果一个请求被延迟（Head-of-Line Blocking），后续所有请求都会等待 。
HTTP/2 TCP 引入多路复用 (Multiplexing)，允许在单个 TCP 连接上同时发送多个请求和响应流，解决了 HTTP/1.1 的队头阻塞问题。同时引入头部压缩 (HPACK)。
HTTP/3 QUIC (基于 UDP) 彻底消除队头阻塞（流相互独立）；强制使用 TLS 1.3 加密；通过 0-RTT 实现快速连接建立；支持连接迁移。

1.3.2 HTTP 请求报文结构 (Request Message)

HTTP 报文是客户端与服务器之间交换数据的机制。客户端发送的报文称为请求报文，由以下收三个主要部分构成：

I. 请求行 (Request Line)

请求行是报文的第一行，用于初始化服务器上的一个动作。它包含三个关键要素：

  1. HTTP 方法 (Method/Verb)：指定客户端希望服务器执行的动作。
  2. 请求目标 (Request Target)：通常是资源路径或 URL。
  3. HTTP 协议版本 (Version)：客户端使用的协议版本（例如 HTTP/1.1）。

请求行示例： GET /index.html HTTP/1.1

核心 HTTP 方法语义

HTTP 方法也被称为 HTTP 动词（Verbs），它们定义了对资源的操作语义。

方法 (Verb) 典型用途 是否安全 (Safe) 是否幂等 (Idempotent)
GET 请求资源表示（检索数据） 是 (只读操作，不改变服务器状态) 是
POST 提交实体以创建新资源，或导致副作用 否 否 (不保证)
PUT 用请求内容完全替换目标资源 否 是
DELETE 删除指定的资源 否 是
HEAD 请求与 GET 相同的响应，但不包含响应体 是 是
  • 安全性 (Safe)：如果 HTTP 方法不会改变服务器的状态，则认为是安全的（如 GET、HEAD）。所有安全方法都是幂等的 。
  • 幂等性 (Idempotent)：如果客户端多次发送相同的请求，服务器上的资源状态保持不变，则该方法是幂等的（如 GET、PUT、DELETE）。客户端可以安全地重试幂等请求。

II. 请求头 (Headers)

请求头紧随请求行之后，用于携带关于请求的元数据 (Metadata)。

常见请求头 作用
Host 服务器的域名。
User-Agent 客户端软件（浏览器和操作系统）的信息。
Accept 客户端可以理解的媒体类型。
Content-Type 请求体的媒体类型（如 application/json 或 application/x-www-form-urlencoded）。
Authorization 身份验证凭证或令牌。
Cache-Control 客户端和代理的缓存机制指令 。
Connection 建议客户端和服务器之间的连接是否应该保持开放。

III. 请求体 (Body)

请求体是报文的可选部分，主要用于向服务器发送数据。

  • 请求体通常在需要创建或更新数据的操作中使用，即 POST、PUT 或 PATCH 请求。
  • 内容格式通常是 JSON、表单数据或原始文本。

1.3.2. HTTP 响应报文结构 (Response Message)

服务器在接收并处理请求后，会返回一个响应报文，它也包含三个主要部分：

I. 状态行 (Status Line)

状态行是响应报文的第一行，提供请求处理的结果。它包含三个要素：

  1. HTTP 协议版本：服务器使用的协议版本。
  2. 状态码 (Status Code)：一个三位数字，表示请求的结果。
  3. 原因短语 (Reason Phrase)：对状态码的简短、人类可读的文本总结。

状态行示例： HTTP/1.1 200 OK

状态码分类

状态码的第一位数字定义了响应的类别：

类别 范围 含义 常见状态码示例
1xx 100–199 信息响应：请求已被接收，正在继续处理。 101 Switching Protocols
2xx 200–299 成功：请求已成功接收、理解并接受。 200 OK、201 Created
3xx 300–399 重定向：需要采取进一步行动才能完成请求。 307 Temporary Redirect
4xx 400–499 客户端错误：请求包含不良语法或无法完成。 401 Unauthorized、403 Forbidden、404 Not Found、429 Too Many Requests
5xx 500–599 服务器错误：服务器未能完成看似有效的请求。 500 Internal Server Error

II. 响应头 (Headers)

响应头提供关于消息的附加上下文信息，或指导客户端如何处理后续请求。

  • 表示头 (Representation Headers)：如果响应有主体，这些头部描述了数据的原始形式和编码方式，例如 Content-Type 和 Content-Length。
  • 缓存头 (Caching Headers)：控制客户端和代理缓存行为，如 Cache-Control 和 Expires。

III. 响应体 (Body)

响应体包含服务器返回给客户端的数据。

  • 对于 GET 请求，响应体通常是请求资源的数据（如 HTML、JSON 字符串）。
  • 对于 POST 或 PUT 成功请求，响应体可能包含被创建或更新的资源的表示 。
  • 响应体可以定义为单一资源，也可以是分块编码（Chunked）的，或包含多个部分的多资源