HTTP 与 API 入门：理解前后端交互原理

[一、HTTP 是什么？](#一、HTTP 是什么？)
[二、HTTP 的两大角色](#二、HTTP 的两大角色)
[三、HTTP 请求（Request）三要素](#三、HTTP 请求（Request）三要素)
- [1. 请求行：方法 + 路径 + 协议](#1. 请求行：方法 + 路径 + 协议)
- [2. 请求头（Headers）：附加信息](#2. 请求头（Headers）：附加信息)
- [3. 请求体（Body）：发送的数据（仅 POST/PUT 有）](#3. 请求体（Body）：发送的数据（仅 POST/PUT 有）)
[四、HTTP 响应（Response）三要素](#四、HTTP 响应（Response）三要素)
- [1. 状态行：协议 + 状态码 + 描述](#1. 状态行：协议 + 状态码 + 描述)
- [2. 响应头（Headers）](#2. 响应头（Headers）)
- [3. 响应体（Body）：返回的数据](#3. 响应体（Body）：返回的数据)
[五、API 是什么？------前后端的"合同"](#五、API 是什么？——前后端的“合同”)
六、前后端交互流程（图解简化版）
七、核心总结（一句话）
[八🎯 小项目：用 Java 原生代码实现一个简单的用户管理 API](#八🎯 小项目：用 Java 原生代码实现一个简单的用户管理 API)

一、HTTP 是什么？

全称：HyperText Transfer Protocol（超文本传输协议）
作用：规定客户端（浏览器）和服务器之间如何对话
一个最简单的 HTTP 对话：

客户端（浏览器）：
GET /index.html HTTP/1.1
Host: www.example.com

服务器：
HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>

💡 HTTP 是文本协议，你能看懂！不是神秘二进制。

二、HTTP 的两大角色

角色	谁扮演	干什么
客户端（Client）	浏览器、App、Postman	发起请求（Request）
服务器（Server）	Tomcat、Spring Boot、Nginx	接收请求，返回响应（Response）

一次网页打开 = 客户端发请求 → 服务器回响应

三、HTTP 请求（Request）三要素

1. 请求行：方法 + 路径 + 协议

GET /user HTTP/1.1

常见方法：GET（查）、POST（增）、PUT（改）、DELETE（删）

2. 请求头（Headers）：附加信息

Host: www.example.com

Content-Type: application/json

Authorization: Bearer xxx

3. 请求体（Body）：发送的数据（仅 POST/PUT 有）

json

{ "name": "张三", "age": 25 }

四、HTTP 响应（Response）三要素

1. 状态行：协议 + 状态码 + 描述

HTTP/1.1 200 OK ✅ 成功

404 Not Found ❌ 找不到

500 Internal Server Error 💥 服务器出错

2. 响应头（Headers）

Content-Type: application/json

Set-Cookie: session=abc123

3. 响应体（Body）：返回的数据

json

{ "id": 1, "name": "张三" }

五、API 是什么？------前后端的"合同"

全称：Application Programming Interface（应用程序接口）
本质：一组约定，规定"前端怎么调用后端的功能"
一个 RESTful API 示例：

前端需求	调用哪个 API？
获取用户列表	GET /users
创建新用户	POST /users
修改用户	PUT /users/1
删除用户	DELETE /users/1

API 就是后端"暴露"给前端的"功能入口"

六、前后端交互流程（图解简化版）

复制代码

前端（浏览器）
↓ 发送 HTTP 请求（如 GET /api/users）
后端（服务器）
↓ 处理请求（查数据库、计算）
↓ 返回 JSON 数据
前端（浏览器）
↓ 用 JavaScript 渲染页面

典型数据格式：JSON

json 复制代码

[
{ "id": 1, "name": "张三" },
{ "id": 2, "name": "李四" }
]

现代开发：前端只负责"展示"，后端只负责"数据"，通过 API 通信。

七、核心总结（一句话）

HTTP 是通信协议，规定怎么发消息；
API 是接口约定，规定能调什么功能；
前后端分离：前端用 HTML/CSS/JS 做页面，后端用 Java 返回 JSON，通过 HTTP + API 交互。

八🎯 小项目：用 Java 原生代码实现一个简单的用户管理 API

项目目标：写一个 Java 程序，启动后能通过浏览器或 Postman 访问 http://localhost:8080/users，返回 JSON 格式的用户列表。
技术栈
1.com.sun.net.httpserver.HttpServer：JDK 内置的轻量 HTTP 服务器
2.String + 手动拼接 JSON：简单直观，看得懂
3.内存集合存储数据：List 模拟数据库
完整代码（复制即可运行）

java 复制代码

import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;

import java.io.*;
import java.net.InetSocketAddress;
import java.util.Arrays;
import java.util.List;

// 简单用户类
class User {
    int id;
    String name;
    int age;

    User(int id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    // 手动转成 JSON 字符串（简化版）
    @Override
    public String toString() {
        return String.format("{\"id\":%d,\"name\":\"%s\",\"age\":%d}", id, name, age);
    }
}

public class SimpleUserService {

    // 模拟数据库：用内存 List 存储用户
    private static List<User> users = Arrays.asList(
        new User(1, "张三", 25),
        new User(2, "李四", 30),
        new User(3, "王五", 28)
    );

    public static void main(String[] args) throws IOException {
        // 创建 HTTP 服务器，监听 8080 端口
        HttpServer server = HttpServer.create(new InetSocketAddress(8080), 0);

        // 设置 /users 路径的处理器
        server.createContext("/users", new UsersHandler());

        // 使用默认线程池
        server.setExecutor(null);

        // 启动服务器
        server.start();
        System.out.println("服务器已启动，访问 http://localhost:8080/users");
    }

    // 处理 /users 请求的类
    static class UsersHandler implements HttpHandler {
        @Override
        public void handle(HttpExchange exchange) throws IOException {
            // 只处理 GET 请求
            if (!"GET".equals(exchange.getRequestMethod())) {
                exchange.sendResponseHeaders(405, -1); // 方法不允许
                return;
            }

            // 设置响应头：返回 JSON
            exchange.getResponseHeaders().set("Content-Type", "application/json; charset=UTF-8");
            
            // 构建 JSON 响应体
            StringBuilder json = new StringBuilder();
            json.append("[");
            for (int i = 0; i < users.size(); i++) {
                json.append(users.get(i).toString());
                if (i < users.size() - 1) json.append(",");
            }
            json.append("]");

            // 发送响应
            byte[] response = json.toString().getBytes("UTF-8");
            exchange.sendResponseHeaders(200, response.length);
            OutputStream os = exchange.getResponseBody();
            os.write(response);
            os.close();
        }
    }
}

效果：
🔜后续可自行扩展：
1.加 POST /users：接收前端传来的 JSON，添加用户（需要读取请求体）
2.用 BufferedReader 读取 POST 数据
3.加路径参数：/users/1 返回单个用户
4.模拟"数据库"：支持增删改查
5.前端页面：用 HTML + JavaScript 调用这个 API，展示用户列表