✨

AI 金句工坊

调用 API 构建全栈应用

创客编程课 2 课时 前后端 + AI
← → 键切换页面 · 点击底部导航跳转
1 / 10

🎯 本节课目标

🌐

理解 API 是什么

API = 应用程序编程接口，让不同程序互相通信

🔧

搭建后端服务

用 Python Flask 写一个 API 接口

🎨

开发前端页面

用 HTML + JS 调用后端，展示数据

🤖

调用 AI API

让 AI 根据主题自动生成金句

2 / 10

📡 什么是 API？

API 就像餐厅里的服务员 —— 你告诉服务员你要什么，他去告诉厨师，然后把菜端回来给你。

🧑 你
(前端)
→ 请求 →
👨‍🍳 服务员
(API)
→ 处理 →
👨‍🍳 厨师
(后端/AI)
← 响应 ←
🧑 你

类比 点餐 ➔ 告诉服务员「我要一份炒饭」
API 调用 ➔ 告诉后端「帮我生成一句关于 xxx 的金句」

3 / 10

🏗️ 应用架构

🌐 浏览器
index.html
POST /api/quote
🐍 Flask 后端
app.py
API 调用
🤖 AI 服务
DeepSeek
🌐

前端

用户输入主题 → 点击按钮 → 展示金句

HTML + CSS + JavaScript

🐍

后端

接收请求 → 调用 AI → 返回结果

Python + Flask

🤖

AI API

根据主题生成名言金句

DeepSeek / OpenAI

4 / 10

📁 项目文件

ai-quote-workshop/
├── app.py # 🐍 后端 - 处理请求、调用 AI
├── index.html # 🌐 前端 - 页面 + 样式 + 交互
├── requirements.txt # 📦 Python 依赖
└── .env # 🔑 API 密钥配置

只需要 4 个文件，半小时就能跑通全栈！

5 / 10

🐍 后端核心代码（app.py）

# 1. 创建 Flask 应用
app = Flask(__name__)

# 2. API 接口 - 生成金句
@app.route('/api/quote', methods=['POST'])
def generate_quote():
    topic = request.json['topic']  # 拿前端发来的主题

    # 3. 调用 AI API
    response = client.chat.completions.create(
        model="deepseek-chat",
        messages=[{"role": "user", "content": topic}]
    )

    # 4. 返回结果给前端
    return jsonify(result)

重点 让学生理解：请求 → 处理 → 响应 的完整链路

6 / 10

🌐 前端核心代码（index.html）

// 点击按钮 → 调用后端 API
async function generate() {
  const topic = input.value.trim();

  // 1. 发送请求给后端
  const res = await fetch('/api/quote', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ topic })  # 传给后端
  });

  // 2. 接收后端返回的数据
  const data = await res.json();

  // 3. 展示到页面上
  quoteText.textContent = data.quote;
  quoteAuthor.textContent = data.author;
}

关键 fetch() 是浏览器自带的 API 调用方式，不需要额外库

7 / 10

🛠️ 动手实践（共 90 分钟）

15min
环境搭建 — 安装 Python 依赖，启动 Flask 后端，浏览器打开 localhost:5000
20min
跑通流程 — 输入主题 → 点击生成 → 看到金句！理解请求-响应链路
25min
自由改造 — 修改 Prompt、换 AI 模型、加新功能（如随机金句/历史记录）
20min
美化界面 — 改 CSS 样式、加动画特效、自定义配色
10min
展示分享 — 学生展示自己的金句工坊，分享改造思路
8 / 10

🚀 拓展思考

🎨

AI 绘画助手

前端输入描述 → 后端调用绘画 API（如 FAL.ai）→ 展示生成图片

🌤️

天气查询应用

前端输入城市 → 后端调用天气 API → 展示温度/湿度/风力

📖

翻译小助手

前端输入中文 → 后端调用翻译 API → 展示英文/日文翻译

📊

+ 硬件结合

ESP32 连 WiFi 调后端的 API，用 LED 灯色显示「金句情绪」

核心不变 学会调用 API → 一切皆可「请求-响应」

9 / 10
🎉

今天的收获

✅ 理解了 API 是什么（请求 → 响应）

✅ 用 Flask 写了 后端 API 接口

✅ 用 fetch() 从前端 调用 API

✅ 接入了 AI API 实现了智能金句生成

✅ 有了自己的第一个 全栈应用

学会调用 API → 你就打开了互联网无限可能性的大门 🚪✨

10 / 10