本课程将深入学习API的进阶概念，并通过实际服务构建进行实践操作。课程采用理论与实践相结合的方式，旨在帮助学员掌握如何在实际项目中运用API。尚未了解API基础概念的学员，建议先阅读相关基础知识文章后再进行学习。

API进阶概念——服务构建的核心要义

1. API深化概念——服务构建的核心概念

1-1. API类型及实战应用方法

API根据目的和功能可分为多种类型。理解各类
API的使用场景，并在实战项目中选择合适的API至关重要。

1. REST API（表征状态转移）

• 这是最广泛使用的API架构。
• 通过HTTP请求实现客户端与服务端的数据交互。
• 特点：轻量级、标准化、支持多种客户端
• 示例：
  • GET /users/1 → 获取特定用户信息
  • POST /reviews → 添加新评论

2. GraphQL API

• 客户端可仅请求所需数据。
• 特点：比REST更灵活，可避免调用冗余数据。
• 示例：

{
  user(id: "1") {
    name
    email
    reviews {
      title
      rating
    }
  }
}

3. WebSocket API

• 适用于需要实时数据通信的场景（如聊天、实时通知）。
• 特点：通过持续连接实现快速响应。
• 示例：实现实时评论更新功能

4. Open API（公开API）

• 面向公众开放使用的API。
• 示例：
  • TMDB API（提供影视剧数据）
  • OpenWeather API（提供天气信息）
  • ChatGPT API（AI文本生成API）
• 1-2. API认证(Authentication)与安全(Security)
• API的安全性至关重要。
• 必须防止未经授权的用户篡改或窃取数据。
• 1. API认证方式
• API密钥（简易方式）
  • 用户请求API时需在请求头中包含API密钥。
  • 示例： Authorization: Bearer YOUR_API_KEY
• OAuth 2.0（社交登录、权限管理）
  • 适用于Google、Facebook登录等场景。
  • 通过获取访问令牌进行认证的方式。
• JWT（JSON Web Token）——增强安全性
  • 客户端登录时，服务器会签发JWT令牌，
  • 后续请求时需包含JWT进行认证。
• 2. API安全强化方案
• 使用HTTPS（SSL/TLS加密）
• API请求限制（速率限制）
• 配置CORS（跨源资源共享）

2. API实践——实际服务构建

实践项目："悲伤剧集推荐API开发"

2-1. 项目目标与服务流程

项目目标

• 用户提交悲伤剧集评论后，API自动存储数据
• API通过AI分析推荐悲伤剧集
• 利用API在网站上展示推荐结果

服务流程

1. 用户发表评论 → API存储至数据库
2. API进行用户情感分析（运用AI技术）
3. API从数据库推荐情感相似的剧集
4. API将推荐剧集返回至网站

3. 实践1：API设计与数据建模

3-1. API设计（端点定义）

HTTP方法	端点	说明
POST	/reviews	添加用户评论
GET	/reviews/{drama}	获取特定剧集的评论
GET	/recommend/{user}	为用户推荐定制化悲伤剧集

3-2. 数据模型设计

数据库表结构（基于PostgreSQL）

ID	用户	剧集名称	情感评分 (0~1)	评论内容
1	内容	我的叔叔	0.9	这是一部令人感动的剧集啊 ㅠㅠ
2	flow	阳光先生	0.85	没有眼泪是看不下去的…

4. 实践2：使用FastAPI构建API

4-1. FastAPI安装与基础配置

bash示例代码

pip install fastapi uvicorn psycopg2

4-2. API基础代码编写

python示例代码

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Review(BaseModel):
    user: str
    drama: str
    rating: int
    review: str

@app.post("/reviews")
def add_review(review: Review):
    return {"message": f"{review.drama}에 대한 리뷰가 저장되었습니다!"}

4-3. 运行与测试

bash示例代码

uvicorn main:app --reload

API调用示例（POST请求）

HTTP示例代码

POST /reviews
{
    "user": "content",
    "drama": "나의 아저씨",
    "rating": 5,
    "review": "정말 감동적이었어요!"
}

5. 实践3：添加AI情感分析与推荐功能

5-1. 情感分析API集成

Python示例代码

from transformers import pipeline

emotion_model = pipeline("text-classification", model="j-hartmann/emotion-english-distilroberta-base")

def analyze_emotion(text):
    result = emotion_model(text)
    return result[0]["score"] if result[0]["label"] == "sadness" else 0.0

5-2. 实现AI推荐系统

python示例代码

@app.get("/recommend/{user}")
def recommend_drama(user: str):
    # 슬픈 감성 점수가 높은 드라마 추천
    return {"recommended": ["나의 아저씨", "미스터 션샤인"]}

API请求与响应
示例HTTP示例代码

GET /recommend/content
{
    "recommended": ["나의 아저씨", "미스터 션샤인"]
}

6. API部署与网站集成 – 实战应用

现在我们将学习如何将基于FastAPI构建的API部署到实际服务器，并在React网站中调用。
部署后将测试API是否正常运行，并进行性能优化。

6-1. FastAPI部署（利用AWS、Vercel、Heroku）

需将FastAPI构建的API部署至Web服务器以供公众使用。
主流部署方案包括AWS、Vercel、Heroku等平台。

FastAPI部署必备概念

1. 服务器运行模式：FastAPI在本地开发环境中使用 uvicorn，但
   部署时需使用 gunicorn等WSGI服务器。
2. 云服务器选择：需选择AWS、Vercel、Heroku等平台
3. 域名绑定：部署后的API http://localhost:8000，
   https://myapi.com 在相同域名下运行。

方法1：通过AWS EC2部署

AWS EC2（弹性计算云）通过提供云端虚拟服务器实现API部署。

1. 创建EC2实例

1. 在AWS控制台创建EC2实例。
2. 选择 Ubuntu 20.04 或 Amazon Linux
3. 最低配置：t2.micro（免费）

2. 在EC2上部署FastAPI

通过SSH连接至EC2实例执行以下代码

ssh -i your-key.pem ubuntu@your-ec2-ip

安装Python及相关包

sudo apt update && sudo apt upgrade -y
sudo apt install python3-pip -y
pip3 install fastapi uvicorn

启动 API

uvicorn main:app --host 0.0.0.0 --port 8000

配置防火墙

• 需在AWS安全组中开放8000端口。
• http://your-ec2-ip:8000/docs 验证API是否正常运行

3. 通过 Nginx & Gunicorn 优化部署

3-1. 安装并运行 Gunicorn

pip install gunicorn
gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

3-2. Nginx配置（反向代理）

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/api

nginx복사편집server {
    listen 80;
    server_name your-api.com;
    
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

3-3. Nginx配置生效后启动服务

sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled
sudo systemctl restart nginx

3-4. 域名绑定与SSL证书配置

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-api.com

现在您可以在 https://your-api.com 使用 FastAPI 了！

方法二：通过Vercel部署

Vercel是可免费部署FastAPI应用的服务平台。

1. 创建Vercel账户并安装CLI

npm install -g vercel
vercel login

2. 将FastAPI项目连接至Vercel并部署

vercel

现在 https://your-api.vercel.app即可使用 API。

方法 3：通过 Heroku 部署

Heroku是可轻松部署API的云服务。

1. 安装 Heroku CLI

curl https://cli-assets.heroku.com/install.sh | sh
heroku login

2. 将FastAPI项目部署至Heroku

heroku create your-api-name
git push heroku main

现在您可以在https://your-api.herokuapp.com 中使用该API。

6-2. 在 React 网站中调用 API 并显示结果

我们将学习如何在 React 网站中调用通过 FastAPI 部署的 API 以获取数据。

1. React项目配置

npx create-react-app my-app
cd my-app
npm start

2. 在 React 中调用 API（使用 useEffect + fetch）

javascript

import { useEffect, useState } from "react";

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch("https://your-api.com/recommend/content")
            .then(response => response.json())
            .then(result => setData(result.recommended));
    }, []);

    return (
        <div>
            <h1>추천 드라마</h1>
            <ul>
                {data.map((drama, index) => (
                    <li key={index}>{drama}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

3. CORS配置（在FastAPI中允许React请求）

FastAPI默认出于安全考虑会阻止CORS请求。

要在 React 中正常调用 API，需在 FastAPI 中添加 CORS 配置。

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 특정 도메인만 허용 가능
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

现在React已能正常调用API。

6-3. 测试与优化实施

确认API是否正常部署，并进行性能优化的过程。

1. 运用API测试工具

• Postman：直接发送API请求并验证响应
• cURL：在终端测试API调用

curl -X GET "https://your-api.com/recommend/content

• FastAPI内置/docs功能：
  • https://your-api.com/docs 自动生成API文档

2. API响应速度优化

• 应用Redis缓存：将高频请求数据存储至Redis
• 数据库索引优化：通过SQL添加索引提升检索速度
• Gunicorn + Nginx组合：配置高性能Web服务器

3. 添加日志记录与监控功能

• 在FastAPI中 logging存储API调用日志
• 集成AWS CloudWatch、Grafana等监控工具

7. 项目最终整理

• 利用API将用户评论存储至数据库
• 运用AI进行情感分析后推荐悲伤剧集
• 通过网站调用API显示推荐结果

8. 实战学习中可实现的项目应用创意

• 基于AI的新闻摘要API
• 实时聊天API（WebSocket应用）
• 社交登录API（基于OAuth 2.0）

核心技术概念梳理（Nginx、Gunicorn、Vercel、Heroku、React、CORS、FastAPI）

术语	说明	主要作用	应用示例
Nginx	Web服务器兼反向代理服务器	静态文件服务、负载均衡、安全增强	网站流量分发，API服务器前端请求管理
Gunicorn	Python WSGI服务器	运行FastAPI、Django、Flask等应用程序	FastAPI部署时， gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app 使用
Vercel	云部署平台	静态网站及后端服务器部署	免费支持 React、Next.js、FastAPI 等部署
Heroku	PaaS（平台即服务）	仅需上传代码即可自动部署服务器	git push heroku main通过FastAPI部署
React	前端库	基于UI组件(Component)构建Web应用	useState, useEffect使用数据管理
CORS	安全策略（防止跨源请求）	允许外部域名发起API请求	FastAPI中 allow_origins=["*"] 需配置
FastAPI	基于Python的Web框架	轻松快速实现API开发	@app.get("/") 支持API路由

在使用当前提供的AI服务时，您可能会接触到API。若想更高效地利用API，建议先了解其核心作用及基本概念，这将对您大有裨益。

本文将清晰简明地阐释API与数据库(DB)的核心概念。
API并非直接存储数据，而是承担"数据交换"的职能
，若需永久保存数据，则必须与数据库(DB)建立连接。

1. API并非存储数据，而是承担"数据传递"的角色！

API本质上是数据传输通道（信使）。通俗来说，它负责在客户端（网站/应用）与服务器端（后端）之间传递数据。

📌 示例场景（剧集评论系统）

为理解API实际运作机制，以"电视剧评论系统"为例说明：

1️⃣ 用户撰写《我的叔叔》评论 →
用户在网站填写评论并点击提交按钮

2️⃣ API接收用户请求并存储至数据库（DB）→ API接收数据后将其
存储在服务器数据库中。

3️⃣ 其他用户请求"显示《我的大叔》评论！" → API从DB中检索
该剧评论并传递给用户。

4️⃣ 用户查看评论数据。
→ 网站显示API传递的数据。

📌 重要概念！

• ✅ API本身不存储数据！
• ✅ API仅承担从DB获取数据或向DB写入数据的功能。
• ✅ 若需长期保存数据，必须使用数据库(DB)！

API本身不存储数据，仅承担从DB获取或写入数据的功能。若需长期保存数据，则必须使用DB（数据库）。主流数据库如MySQL、MariaDB等。

数据库可视为高效管理数据并实现程序联动的存储库。其核心管理机制即SQL语言，SQL可分为关系型数据库与非关系型数据库两类。数据库相关知识将在下文详细阐述。

2. 需要API与数据库(DB)的连接。

要使API正确传输数据，必须与数据库(DB)建立连接。接下来让我们理解API与DB协同工作的原理。

API的基本功能（请求与响应）

API请求(Request) → "请将此数据存储至DB！"
API响应(Response) → "将从DB中提取此数据并呈现！"

• ✅ 数据存储时（用户发表评论时）：API接收数据并存储至DB
• ✅ 数据调取时（用户查看评论）：API从数据库提取数据并传递给用户

例如在Netflix撰写评论时，评论内容会存储在数据库中；当用户查看评论时，数据库会将数据传递给用户，使其他用户也能查看该评论。

3. 数据并非由API保管，而是由数据库存储！

✔️ 核心概念：API负责数据"传输"，而"存储"工作由数据库承担。

📌 若没有数据库会怎样？

• API接收数据后无处存储，数据将彻底消失！😱
• 例如：用户发表评论后若无数据库，刷新页面时数据就会消失。

📌 如何实现数据持久化？

• API仅是"中间桥梁"，本身不具备数据存储功能。
• 要实现数据的持续存储，必须同时使用API和数据库。

4. 什么是数据库(DB)？

数据库（DB, Database）是永久存储数据的仓库。

• 诸如Naver等网站或应用中呈现的所有数据（会员信息、帖子、评论、评价等）均存储于DB中。
• API的作用是向该DB写入或读取数据。

• DB的特点
  • ✅ 可永久保存数据
  • ✅ 便于管理海量数据
  • ✅ 支持多用户同时访问

📌 示例：电视剧评论数据库

ID	用户	剧集名称	评分	评论内容
1	内容	我的大叔	⭐⭐⭐⭐⭐	这是一部令人感动的剧集啊 ㅠㅠ
2	flow	Mr. Sunshine	⭐⭐⭐⭐☆	没有眼泪是看不下去的…

如上所述，当用户为剧集标题撰写评分与评论内容时，系统会将其存储至AP RK数据库，以便后续其他用户查阅评论时能调取这些信息。

初次接触编程或尝试网页开发（如制作网站）的人，可能会首次接触到域名、主机、HTML、CSS、JavaScript、API等术语。 虽然现在即使不懂编程语言也能通过AI实现，但若能理解这些基础概念的作用机制，学习过程会事半功倍。本课程旨在快速帮助您掌握网页开发中核心要素——域名、主机、HTML、CSS、JavaScript及API的概念与功能。

域名、主机、HTML、CSS、JavaScript与API全解析！

若将建站过程比作"建造房屋"，那么域名、主机及各类网络技术便是构成房屋的要素。用房屋类比能让理解事半功倍！下面就让我们通过房屋比喻来确认域名、主机、HTML、JavaScript和API的作用。

网络概念	房屋类比	作用
域名	房屋地址	用户访问网站的路径
托管	房屋本身	存储网站数据的空间
HTML	房屋的骨架	构成网站基本结构
CSS	房屋的内部装饰	网站的设计与样式装饰
JavaScript	房屋的电气与自动化	为网站添加动态功能
API	连接外部服务	连接外部数据或功能

🏡 域名：房屋地址

• 技术概念：网站的地址。
• 作用：
  • 将网络上的IP地址转换为人类可读的格式，便于用户访问网站。
  • 示例： google.com, naver.com.
• 正如朋友们需要准确地址才能拜访您的住所，互联网用户访问网站时同样需要地址指引。
• 域名示例：www.myhouse.com "即为域名。输入此地址后，用户便能找到您的家（网站）。

注册域名如同登记房屋地址。若地址遗失，无人能找到您的住所。要建立主页，必须先设置域名。

域名

🏠 托管：建造房屋的土地

• 技术概念：将网站托管于互联网的服务器空间。
• 作用：
  • 存储网站内容，确保用户可全天候访问。
  • 托管服务商（如AWS、Cafe24等）负责服务器管理与维护。

可将托管视为建造房屋的土地。建造房屋需要土地，对吧？为搭建网站，我们可选择在线租赁托管服务器，或自行运营托管服务器。

• 网站需要由数据和文件构成的存储空间，这个空间就是托管服务器。
• 如同您在家中存放物品，网站内容（文本、图片、视频）也会存储在托管服务器上。

托管服务类似于房屋租赁或产权持有。选择优质托管服务，就能拥有安全舒适的"家园"。

主要托管服务包括

🛠️ HTML：房屋的骨架

• 基础语言： 定义网页结构的语言。作用：
  • 通过文档标记（<h1>, <p>, <img> 等）来组织内容。
  • 文本、图像、链接等元素的布局。

• 特征：
  • 属于静态语言，更偏向标记语言而非编程语言。
  • 易于学习，是网页开发的基础起点。

可将HTML视为建造房屋的骨架。它在空白空间中构建基础网站结构。

• 正如建造房屋需要墙壁、天花板、门等基础结构。
• 而构建网站基础框架的语言正是HTML。
• HTML如同建造房屋的"骨架"设计图。
• 但仅有骨架的房屋看起来会很单调吧？这时就需要CSS和JavaScript的加持！

眼前这个看似空白的页面，其实也是由HTML和CSS构成的。而页面跳转时使用的技术，就是JavaScript。

下面的代码是HTML示例：

<h1>여기는 거실입니다</h1>
<p>거실에는 소파와 테이블이 있습니다.</p>

在示例代码中，h1代表页面标题1（头部1），即告知页面主题；p代表段落。

<> 代表代码的开始，</> 代表代码的结束。因此"<h1>"表示标题1的起始，"</h2>"则表示标题1的结束。

下方简要列出了 HTML 主要术语清单，更多 HTML 相关知识请参阅本文！

웹 개발 기초 3 : HTML 주요 용어와 개념 한눈에 보기

📖 HTML核心术语清单

术语	说明
标签(Tag)	HTML的基本构成单元。用尖括号(< >）包裹，用于标记代码的起始与结束。
元素(Element)	包含标签与内容的完整结构。 <태그>내용</태그> 形态。
属性(Attribute)	为标签提供附加信息的键值对。 <태그 속성="값">내용</태그> 形态。
头部	定义文档元数据的区域。 <head> 在</head> 头部标签内编写元数据。
正文(Body)	网页中显示的主要内容区域。 <body> 在 body 标签内编写。
HTML5	HTML的最新标准版本，可更轻松实现多媒体与交互功能。
DOCTYPE	定义文档HTML版本的声明。 <DOCTYPE html> 格式。
注释(Comment)	添加代码说明的区域。浏览器不显示。 <!-- 내용 -->

🎨 CSS：房屋的室内设计

• 基础语言：定义网页样式（设计）的语言。
• 作用：
  • 指定HTML元素的颜色、尺寸、位置、背景等。
  • 使网页视觉美观且用户友好。
• 特点：
  • 与HTML分离，可独立管理设计部分。
  • 运作方式：作为声明式语言，描述样式而非逻辑。

可将CSS视为房屋的室内装饰。若无CSS，房屋仅具备功能性而外观粗糙。正如决定墙纸颜色、地面材质、家具布局一样，为网页添加CSS能使其成为精致美观的居所。

CSS通过设定网站的颜色、尺寸、位置、背景等，为HTML构建的骨架施加设计。它为HTML骨架注入美学元素。CSS相当于房屋的油漆、壁纸和家具布局——无论是将墙壁涂成白色，还是为窗户悬挂窗帘，这些都是CSS的职责。

CSS代码示例：

h1 {
  color: blue;
  font-size: 24px;
}

此为H1标签的样式应用示例。"color: blue;"将文本颜色设为蓝色，"font-size: 24px;:"则将字体大小设定为24像素。

📖 CSS核心术语表

术语	说明
选择器	用于选择要应用样式的HTML元素。例如： h1, .class, #id 等。
属性	定义样式的属性。例如： color, font-size, margin.
值	表示属性(Property)的指定值。例如： blue, 16px, 10px.
Class	用于将相同样式应用于多个元素的属性。示例： .myClass.
ID	用于为特定元素应用唯一样式的属性。例如： #myId.
内联样式	在HTML标签的 style 属性中直接编写CSS的方式。例如： <h1 style="color: red;">.
外部CSS	在独立的 .css 文件中编写样式并进行关联的方式。
盒模型	定义元素尺寸与边距的模型， margin, border, padding, content 包含。
伪类	仅在特定状态下应用样式的类。例如： :hover, :focus.
媒体查询	根据屏幕尺寸或设备类型应用不同样式。例如： @media

⚡ JavaScript："网页的功能（生命）"

• 编程语言：为网页添加动态功能的脚本语言。
• 作用：
  • 处理用户交互（点击、输入等）。
  • 实现动画效果、按钮点击事件及实时数据更新。

• 特点：
  • 作为编程语言，可编写变量、条件语句、循环语句等逻辑。
  • 示例：点击按钮弹出通知或实时更新数据。

JavaScript如同安装在房屋中的智能功能。它能添加交互动作，例如按下按钮点亮灯光，或通过传感器自动开启门锁。具体应用场景包括：用户点击按钮时弹出窗口，或实现图片幻灯片切换功能。

JavaScript是赋予家居活力的核心元素。如同"智能家居"般，按下按钮即可开启灯光或播放音乐。应用于网页时，它负责实现页面跳转、弹出窗口及图片轮播等交互功能。

JavaScript代码示例：

document.querySelector('button').
addEventListener('click', 
() => { alert('문이 열렸습니다!'); });

document.querySelector('button')：在HTML文档中 <button> 选择元素。在页面中查找第一个 <button> 元素。

addEventListener('click', : 为选定按钮添加点击事件监听器。设置当用户点击按钮时执行特定操作。

() => { alert('문이 열렸습니다!'); }: : 点击按钮时执行箭头函数。函数内容 alert('문이 열렸습니다!')为弹出警告窗口。

📖 JavaScript 核心术语表

术语	说明
变量	用于存储数据的变量。 var, let, const通过 `var` 或 `let` 声明。
函数	定义代码块并使其可复用的函数。 function 使用关键字编写。
Array	将多个数据存储于单个变量的列表形式。示例： [1, 2, 3].
对象	以键值对形式存储数据的结构。例如： { key: "value" }.
事件	为响应用户操作（点击、输入等）而触发的事件。
DOM	通过JavaScript操作HTML文档的对象模型（Document Object Model）。
回调函数	作为参数传递给其他函数的函数。常用于异步操作。
Promise	表示异步操作完成或失败的对象。 .then以及 .catch处理。
Async/Await	一种语法，可帮助像编写同步代码那样编写异步任务。
Loop	通过循环语句多次执行代码块。例如： for, while.
Conditional	根据条件执行不同代码。例如： if, else, switch.
Scope	变量或函数生效的有效范围。 Global与 Local。
闭包	函数能够访问其声明环境（作用域）中变量的特性。
API	应用程序用于交互的工具与函数集合。
ES6	JavaScript的最新语法（ECMAScript 6）。 let, const包含箭头函数等特性。
Hoisting	JavaScript中将变量或函数声明提升至代码顶部的行为机制。

📡 API：连接外部服务的接口

• 技术概念：与外部服务或应用程序连接以实现数据交互的接口。
• 作用：
  • 调用外部功能（天气、支付、地图等）获取数据或发送数据。
  • 开发者无需自行实现复杂功能，即可利用外部服务。
• 特征：
  • 用于与其他服务通信的规则和工具。
  • 例如：通过PayPal API处理支付，或使用Google Maps API显示位置信息。

API如同安装在房屋内的配送系统或连接外部水电的管道。PI在网站与外部服务间扮演中介角色。正如家庭需连接外接管道才能订餐或用水，网站同样需要连接外部数据或功能（API）。

例如，要在网站上显示天气信息，就需要使用外部天气API。通过API，您的家（网站）就能与外部世界互动！

API运作机制

1. 客户端(Client)：
   • 使用API的程序或用户（如浏览器、应用程序）。
   • 发起数据请求（如天气应用查询实时天气）
2. API请求：
   • 客户端向API的特定**端点（URL）**发送请求。
   • 请求主要使用HTTP方法：
     • GET：获取数据。
     • POST：创建数据。
     • PUT：修改数据。
     • DELETE：删除数据。
   • 示例： GET https://api.weather.com/current?city=Seoul
3. 服务器(Server):
   • 处理API请求的系统。
   • 确认客户端请求，并处理所需数据。
4. 响应(Response):
   • 服务器将请求结果返回给客户端。
   • 主要以JSON格式返回数据。
   • 示例：json复制编辑{ "city": "Seoul", "temperature": "15°C", "condition": "Sunny" }
5. 客户端处理：
   • 客户端利用响应数据显示信息或执行后续操作。
   • 示例：在应用界面显示"首尔当前天气：晴，15°C"。

API可视作餐厅的菜单与点餐流程。

• 响应(Response)：提供完成的菜品。
• 菜单（API文档）：可选菜品及选项（功能与接口）。
• 点餐(Request)：请求所需菜品(数据)。
• 厨房(服务器)：处理请求并准备餐点。

简易示例（JavaScript调用REST API）

fetch('https://api.weather.com/current?city=Seoul')
  .then(response => response.json())  // 응답 데이터를 JSON으로 변환
  .then(data => console.log(data))    // 결과 출력
  .catch(error => console.error('Error:', error)); // 오류 처리

上述API调用示例的运行流程如下：

1. fetch('https://api.weather.com/current?city=Seoul')：通过fetch函数发送URL请求 → 服务器响应。
（此阶段通过GET请求向服务器获取数据）

2. then(response => response.json()) : 응답 데이터를 JSON으로 변환
（服务器转换后的响应以response对象形式传递，将响应数据转换为json格式。JSON是服务器与客户端间数据传输的通用标准格式。response.json() 该函数本身也返回Promise，因此当JSON数据准备就绪后， then传递数据。

3. .then(data => console.log(data)) : 将转换后的数据通过then处理 → 输出至控制台。
data此处的 response.json()表示转换后的JSON数据。可利用该数据进行界面展示或执行其他操作。本示例中 console.log(data)使用.then()将JSON数据输出至浏览器控制台。

4. .catch(error => console.error('Error:', error)); 发生错误时通过catch处理
当因网络问题、错误URL或服务器响应失败等导致请求失败时， catch 捕获块将被执行。error 该对象包含错误信息，可将其输出至控制台或通知用户。

1. 1. `fetch` 函数
   • 说明：用于发送HTTP请求的函数。
   • 作用：
     • https://api.weather.com/current?city=Seoul向服务器发送请求以获取首尔天气数据。
     • 默认执行GET请求，通过在URL中包含查询参数来请求数据。
     • fetch该函数为异步函数，返回Promise对象。
2. GET请求
   • 说明：从服务器获取数据的HTTP请求方式。
   • 作用：
     • 用于读取服务器资源，不修改数据。
     • 通过在URL中添加查询参数(?city=Seoul）来精确指定请求内容。
     • 示例：网页或图像文件的加载均采用GET请求。
3. then 方法
   • 说明：在Promise成功解析后执行。
   • 作用：
     • 处理前序操作的结果，可将多个 then以链式结构串联多个操作，实现任务的顺序执行。
     • 示例：处理数据转换并显示到界面的任务。
4. response.json() : response.json() 该操作返回Promise，将实际数据转换为对象并准备就绪供后续使用。
   • 说明：将服务器返回的响应数据解析为JSON格式。
   • 角色：JSON（JavaScript对象表示法）是服务器与客户端之间数据传输的通用格式。

📖 API核心术语列表

术语	描述
API（应用程序编程接口）	应用程序之间通信和数据交换的接口。
端点	接收API请求的特定URL。例如： https://api.example.com/data.
请求	客户端向API请求数据的操作。例如： GET, POST, PUT, DELETE.
响应	API对请求向客户端发送的数据。例如：以JSON格式返回。
HTTP方法	定义API请求的操作类型。例如： GET(查询), POST(创建), PUT(修改)， DELETE(删除)。
状态码	表示请求结果的HTTP代码。例如： 200 OK, 404 Not Found, 500 Internal Server Error.
JSON（JavaScript对象表示法）	API请求与响应数据的通用格式。易于人类阅读且便于机器处理。
Header	包含在请求和响应中的元数据。例如：认证令牌、内容类型。
查询参数	URL中包含的附加数据。例如： ?key=value.
身份验证	验证API访问权限的过程。例如：API密钥、OAuth。
速率限制	在特定时间段内限制客户端可发送请求数量的机制。
Webhook	API在特定事件发生时向客户端推送数据的方式。
REST（表征状态转移）	API设计架构风格，通过URL表示资源。以RESTful API形式实现。
GraphQL	专为API设计的查询语言，可按需请求并获取特定数据。
SDK（软件开发工具包）	为便捷使用特定API而提供的库及工具集合。
CORS（跨源资源共享）	允许或限制跨域请求的安全策略。

编程语言分类

1. HTML与CSS：基础结构与样式
   • 与其说是编程语言，不如理解为设计和美化网页内容的工具。
   • 初学者也能轻松入门，可为网页开发打下基础。
2. JavaScript：编程的第一步
   • JavaScript是赋予网页动态效果的实际编程语言。
   • 通过JavaScript学习条件语句、循环语句、函数等编程核心概念。
3. API：高级应用
   • 在掌握编程语言和工具的基础后，将学习运用API连接外部服务的技术。
   • 这在实际服务开发阶段被广泛应用。

如何学习才好？

1. 循序渐进从基础开始：
   • 按HTML → CSS → JavaScript顺序学习。
   • 在理解各自角色与功能的同时，从创建简单网页开始实践。
2. 实践与项目：
   • 用基础HTML/CSS构建静态页面，通过JavaScript添加交互功能。
   • 尝试利用API实现实时数据（如天气信息）展示等项目。
3. 循序渐进式扩展：
   • 从初级阶段学习HTML、CSS、JavaScript，逐步扩展至API、服务器开发及数据库领域。

结论

域名和主机是使网站能在互联网上运行的核心概念。配置好主机与域名，并运用HTML、CSS、JavaScript即可开启网页开发之旅。夯实
基础的同时，通过实际项目实践能更高效地掌握知识！