当前位置：首页>python>Python教程 - 前端入门:React/Vue 基础 + 调用 API

Python教程 - 前端入门:React/Vue 基础 + 调用 API

2026-08-18 23:10:32

前几期我们从爬虫抓数据，到数据分析处理，再到 Web 后端搭建——你已经能自己从网上拿到数据、分析数据、然后通过 API 把数据提供给别人用了。

但还有一个关键问题没解决：

**数据给出去之后，用户怎么看到它？**

这就是本期的主题：**前端开发入门**。

我们将学习两种主流前端框架：

| 框架 | 特点 | 适用场景 |

|------|------|----------|

| **Vue.js** | 上手简单、文档友好、渐进式 | 快速原型、中小项目 |

| **React** | 生态庞大、社区活跃、灵活性高 | 大型项目、复杂应用 |

>**前置知识**：本教程假设你已经掌握了前面几期学过的 Python 基础、数据结构、以及 Episode 07 学过的 FastAPI 基础知识。如果你还没有看过 Episode 07，建议先去补一下。

---

## 9.1 什么是前端？

先搞懂一个基本概念。

你的程序有三层：

```

┌─────────────┐

│ 前端 │ ← 用户看到的东西（浏览器里展示的）

├─────────────┤

│ API │ ← 中间人（传递数据的桥梁）

├─────────────┤

│ 后端 │ ← 逻辑处理和数据库

└─────────────┘

```

前端负责的是**用户界面**——按钮长什么样、文字显示什么、点击之后发生什么。

后端负责的是**业务逻辑**——数据从哪来、怎么处理、存到哪去。

API 是**两者之间的桥**——前端说"给我一份用户列表"，后端说"好的，这是你要的数据"。

---

## 9.2 Vue.js 入门：最友好的起点

### 9.2.1 为什么从 Vue 开始？

Vue 的设计哲学就三个词：**简单、灵活、好用**。

它不像 React 那样需要你学一堆概念（JSX、Hooks、Context……），也不像 Angular 那样给你一个"全家桶"（什么都准备好了，但也什么都不能乱动）。

Vue 给你的，刚好够用。

### 9.2.2 第一个 Vue 组件

最简单的方式——直接用一个 HTML 文件，引入 Vue CDN：

```html

<!DOCTYPEhtml>

<html>

<head>

<title>我的第一个 Vue 页面</title>

<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>

<divid="app">

<h1>{{ message }}</h1>

<p>一共有 {{ items.length }} 条数据</p>

<ul>

<liv-for="item in items":key="item.id">

{{ item.name }} - ¥{{ item.price }}

</li>

</ul>

<button@click="addItem">加一条</button>

</div>

const { createApp, ref } = Vue;

createApp({

setup() {

constmessage=ref('Hello Vue!');

constitems=ref([

{ id:1, name:'苹果', price:5.5 },

{ id:2, name:'香蕉', price:3.0 },

{ id:3, name:'橙子', price:4.5 }

]);

constaddItem= () => {

items.value.push({

id: items.value.length+1,

name:'新水果',

price: Math.round(Math.random() *10*10) /10

});

};

return { message, items, addItem };

}

}).mount('#app');

</script>

</body>

</html>

```

保存为 `hello-vue.html`，直接用浏览器打开，就能看到效果。

**关键概念拆解：**

| 语法 | 含义 |

|------|------|

| `{{ }}` | 插值表达式，把数据放到页面中 |

| `v-for` | 循环，遍历数组渲染列表 |

| `@click` | 事件监听，点击时调用方法 |

| `ref()` | 响应式数据——数据变了，页面会自动更新 |

### 9.2.3 从后端 API 获取数据

这才是真正有用的部分。

还记得 Episode 07 学的 FastAPI 吗？我们用它来做一个**前后端联调**的完整流程。

**后端代码（main.py）：**

```python

from fastapi import FastAPI

from fastapi.middleware.cors import CORSMiddleware

from pydantic import BaseModel

from typing import List

app = FastAPI()

# 允许跨域——前端调后端必须有这个！

app.add_middleware(

CORSMiddleware,

allow_origins=["*"], # 生产环境改成具体域名

allow_credentials=True,

allow_methods=["*"],

allow_headers=["*"],

)

# 模拟数据库

fruits = [

{"id": 1, "name": "苹果", "price": 5.5, "category": "水果"},

{"id": 2, "name": "香蕉", "price": 3.0, "category": "水果"},

{"id": 3, "name": "键盘", "price": 299.0, "category": "数码"},

{"id": 4, "name": "鼠标", "price": 99.0, "category": "数码"},

{"id": 5, "name": "橙子", "price": 4.5, "category": "水果"},

]

@app.get("/api/fruits")

defget_fruits():

"""获取所有水果"""

return fruits

@app.get("/api/fruits/{fruit_id}")

defget_fruit(fruit_id: int):

"""获取单个水果"""

for fruit in fruits:

if fruit["id"] == fruit_id:

return fruit

return {"error": "未找到"}

classNewFruit(BaseModel):

name: str

price: float

category: str

@app.post("/api/fruits")

defcreate_fruit(fruit: NewFruit):

"""新增水果"""

new_id = max(f["id"] for f in fruits) + 1

new_fruit = {"id": new_id, **fruit.model_dump()}

fruits.append(new_fruit)

return new_fruit

```

**前端代码（vue-api-demo.html）：**

```html

<!DOCTYPEhtml>

<html>

<head>

<title>Vue + FastAPI 联动</title>

<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<style>

body { font-family: sans-serif; padding: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.card { border: 1pxsolid#ddd; border-radius: 8px; padding: 16px; transition: box-shadow 0.2s; }

.card:hover { box-shadow: 02px8pxrgba(0,0,0,0.15); }

.price { color: #e74c3c; font-weight: bold; font-size: 1.2em; }

.tag { display: inline-block; background: #ecf0f1; padding: 2px8px; border-radius: 4px; font-size: 0.8em; margin-top: 4px; }

.form-group { margin-bottom: 12px; }

.form-grouplabel { display: block; margin-bottom: 4px; font-weight: bold; }

.form-groupinput, .form-groupselect { width: 100%; padding: 8px; border: 1pxsolid#ccc; border-radius: 4px; }

button { background: #3498db; color: white; border: none; padding: 10px20px; border-radius: 4px; cursor: pointer; }

button:hover { background: #2980b9; }

#loading { color: #999; }

</style>

</head>

<body>

<divid="app">

<divid="loading"v-if="loading">加载中...</div>

<divclass="grid"v-if="!loading">

<divclass="card"v-for="item in filteredItems":key="item.id">

<pclass="price">¥{{ item.price.toFixed(2) }}</p>

<spanclass="tag">{{ item.category }}</span>

</div>

<divstyle="margin: 20px 0;">

<button@click="filterCategory = '全部'":style="{ background: filterCategory === '全部' ? '#2c3e50' : '#3498db' }">全部</button>

<button@click="filterCategory = '水果'":style="{ background: filterCategory === '水果' ? '#2c3e50' : '#3498db' }">水果</button>

<button@click="filterCategory = '数码'":style="{ background: filterCategory === '数码' ? '#2c3e50' : '#3498db' }">数码</button>

</div>

<divclass="form-group">

<inputv-model="newItem.name"placeholder="输入商品名称">

</div>

<divclass="form-group">

<inputtype="number"v-model="newItem.price"placeholder="输入价格">

</div>

<divclass="form-group">

<selectv-model="newItem.category">

</select>

</div>

<button@click="submitForm">提交</button>

<pv-if="message"style="color: green; margin-top: 16px;">{{ message }}</p>

</div>

const { createApp, ref, computed, onMounted } = Vue;

createApp({

setup() {

constitems=ref([]);

constloading=ref(true);

constfilterCategory=ref('全部');

constnewItem=ref({ name:'', price:'', category:'水果' });

constmessage=ref('');

// 计算属性：根据分类过滤

constfilteredItems=computed(() => {

if (filterCategory.value ==='全部') return items.value;

return items.value.filter(item=> item.category === filterCategory.value);

});

// 从后端 API 获取数据

constfetchData=async () => {

try {

constres=awaitfetch('http://localhost:8000/api/fruits');

items.value =await res.json();

} catch (err) {

console.error('获取数据失败:', err);

// 如果后端没启动，用模拟数据

items.value = [

{ id:1, name:'苹果', price:5.5, category:'水果' },

{ id:2, name:'香蕉', price:3.0, category:'水果' },

];

} finally {

loading.value =false;

}

};

// 提交表单

constsubmitForm=async () => {

try {

constres=awaitfetch('http://localhost:8000/api/fruits', {

method:'POST',

headers: { 'Content-Type':'application/json' },

body:JSON.stringify(newItem.value)

});

constresult=await res.json();

items.value.push(result);

newItem.value = { name:'', price:'', category:'水果' };

message.value ='提交成功！商品 ID: '+ result.id;

} catch (err) {

message.value ='提交失败，后端可能未启动';

}

};

onMounted(fetchData);

return {

items, loading, filterCategory, filteredItems,

newItem, message, submitForm

};

}

}).mount('#app');

</script>

</body>

</html>

```

**运行步骤：**

1. 启动后端：`uvicorn main:app --reload`

2. 用浏览器打开 `vue-api-demo.html`

3. 你会看到商品列表自动加载

4. 点击分类按钮，列表自动筛选

5. 填写表单，点击提交，新商品立刻出现在列表中

**这就是完整的前后端联调流程。**

---

## 9.3 React 入门：进阶之选

Vue 让你理解了"前端 + API"的基本模式。接下来，来看看 React。

React 和 Vue 理念不同：Vue 用模板语法，React 用 **JSX**——把 HTML 写在 JavaScript 里。

### 9.3.1 用 Vite 创建 React 项目

```bash

npmcreatevite@latestmy-react-app----templatereact

cdmy-react-app

npminstall

npmrundev

```

### 9.3.2 第一个 React 组件

```jsx

// App.jsx

import{ useState, useEffect }from'react';

functionApp() {

const [items, setItems] =useState([]);

const [loading, setLoading] =useState(true);

const [filter, setFilter] =useState('全部');

const [newName, setNewName] =useState('');

const [newPrice, setNewPrice] =useState('');

// 类似 Vue 的 onMounted

useEffect(() => {

fetchItems();

}, []);

constfetchItems=async () => {

try {

constres=awaitfetch('http://localhost:8000/api/fruits');

constdata=await res.json();

setItems(data);

} catch {

setItems([

{ id:1, name:'苹果', price:5.5, category:'水果' },

{ id:2, name:'香蕉', price:3.0, category:'水果' },

]);

}

setLoading(false);

};

// 筛选

constfilteredItems= items.filter(item=>

filter ==='全部'?true: item.category === filter

);

// 提交

consthandleSubmit=async (e) => {

e.preventDefault();

constnewItem= {

name: newName,

price:parseFloat(newPrice),

category:'水果'

};

try {

constres=awaitfetch('http://localhost:8000/api/fruits', {

method:'POST',

headers: { 'Content-Type':'application/json' },

body:JSON.stringify(newItem)

});

constresult=await res.json();

setItems([...items, result]);

} catch {

alert('提交失败，后端可能未启动');

}

setNewName('');

setNewPrice('');

};

if (loading) return<p>加载中...</p>;

return (

<divstyle={{ padding:'20px', fontFamily:'sans-serif' }}>

<h1>🍎 React 水果商城</h1>

{/* 筛选按钮 */}

<divstyle={{ marginBottom:'20px' }}>

{['全部', '水果', '数码'].map(cat=> (

<button

key={cat}

onClick={() =>setFilter(cat)}

style={{

background: filter === cat ?'#2c3e50':'#3498db',

color:'white',

border:'none',

padding:'8px 16px',

marginRight:'8px',

borderRadius:'4px',

cursor:'pointer'

}}

{cat}

</button>

))}

</div>

{/* 商品卡片 */}

<divstyle={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(200px, 1fr))', gap:'16px' }}>

{filteredItems.map(item=> (

<divkey={item.id}style={{

border:'1px solid #ddd',

borderRadius:'8px',

padding:'16px'

}}>

<pstyle={{ color:'#e74c3c', fontWeight:'bold' }}>

¥{item.price.toFixed(2)}

</p>

<spanstyle={{ background:'#ecf0f1', padding:'2px 8px', borderRadius:'4px' }}>

{item.category}

</span>

</div>

))}

</div>

{/* 新增表单 */}

<formonSubmit={handleSubmit}style={{ marginTop:'30px', maxWidth:'400px' }}>

<divstyle={{ marginBottom:'12px' }}>

<input

type="text"

value={newName}

onChange={e=>setNewName(e.target.value)}

style={{ width:'100%', padding:'8px', marginTop:'4px' }}

</div>

<divstyle={{ marginBottom:'12px' }}>

<input

type="number"

value={newPrice}

onChange={e=>setNewPrice(e.target.value)}

style={{ width:'100%', padding:'8px', marginTop:'4px' }}

</div>

<buttontype="submit"style={{

background:'#27ae60',

color:'white',

border:'none',

padding:'10px 20px',

borderRadius:'4px',

cursor:'pointer'

}}>

提交

</button>

</form>

</div>

);

}

exportdefaultApp;

```

### 9.3.3 Vue vs React 核心概念对比

| 功能 | Vue 3 | React |

|------|-------|-------|

| 状态管理 | `ref()` / `reactive()` | `useState()` |

| 生命周期 | `onMounted()` | `useEffect(() => {}, [])` |

| 计算属性 | `computed()` | `useMemo()` |

| 模板 | HTML 模板语法 | JSX（JavaScript 内嵌） |

| 响应式原理 | 代理（Proxy）自动追踪 | 手动声明依赖 |

| 学习曲线 | 低——上手快 | 中——概念稍多 |

---

## 9.4 实战：做一个"数据看板"

现在我们已经能调 API、能展示数据了。

来做一个实用的东西：**个人财务数据看板**。

把 Episode 06 做的数据分析结果，以前端页面展示出来。

### 9.4.1 后端：提供看板数据 API

```python

# dashboard_api.py

from fastapi import FastAPI

from fastapi.middleware.cors import CORSMiddleware

import numpy as np

app = FastAPI()

app.add_middleware(

CORSMiddleware,

allow_origins=["*"],

allow_credentials=True,

allow_methods=["*"],

allow_headers=["*"],

)

# 模拟月度收支数据

monthly_data = [

{"month": "1月", "income": 12000, "expense": 8500, "savings": 3500},

{"month": "2月", "income": 12000, "expense": 9200, "savings": 2800},

{"month": "3月", "income": 13000, "expense": 7800, "savings": 5200},

{"month": "4月", "income": 13000, "expense": 10500, "savings": 2500},

{"month": "5月", "income": 13500, "expense": 8100, "savings": 5400},

{"month": "6月", "income": 14000, "expense": 7500, "savings": 6500},

]

@app.get("/api/dashboard")

defget_dashboard():

"""获取看板汇总数据"""

total_income = sum(m["income"] for m in monthly_data)

total_expense = sum(m["expense"] for m in monthly_data)

total_savings = sum(m["savings"] for m in monthly_data)

return {

"summary": {

"总收入": total_income,

"总支出": total_expense,

"总储蓄": total_savings,

"储蓄率": round(total_savings / total_income * 100, 1)

"monthly": monthly_data

}

```

### 9.4.2 前端：用 Vue 展示数据看板

```html

<!DOCTYPEhtml>

<html>

<head>

<title>个人财务看板</title>

<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Microsoft YaHei', sans-serif; background: #f5f7fa; padding: 20px; }

.dashboard { max-width: 900px; margin: 0auto; }

.header { text-align: center; margin-bottom: 30px; }

.headerh1 { color: #2c3e50; }

.headerp { color: #7f8c8d; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }

.summary-card { background: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 02px4pxrgba(0,0,0,0.05); }

.summary-card.label { color: #95a5a6; font-size: 0.9em; margin-bottom: 8px; }

.summary-card.value { font-size: 1.8em; font-weight: bold; }

.summary-card.income.value { color: #27ae60; }

.summary-card.expense.value { color: #e74c3c; }

.summary-card.savings.value { color: #3498db; }

.summary-card.rate.value { color: #9b59b6; }

.chart-container { background: white; padding: 20px; border-radius: 12px; box-shadow: 02px4pxrgba(0,0,0,0.05); margin-bottom: 30px; }

.chart-containerh3 { margin-bottom: 16px; color: #2c3e50; }

.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding: 010px; }

.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; }

.bar-row { display: flex; gap: 4px; align-items: flex-end; height: 160px; }

.bar { width: 18px; border-radius: 4px4px00; transition: height 0.3s; }

.bar.income { background: #27ae60; }

.bar.expense { background: #e74c3c; }

.bar-label { font-size: 0.75em; color: #7f8c8d; margin-top: 6px; }

.table { width: 100%; border-collapse: collapse; }

.tableth, .tabletd { padding: 10px; text-align: left; border-bottom: 1pxsolid#eee; }

.tableth { background: #f8f9fa; color: #2c3e50; font-weight: 600; }

.trend-up { color: #27ae60; }

.trend-down { color: #e74c3c; }

#loading { text-align: center; padding: 40px; color: #95a5a6; }

</style>

</head>

<body>

<divclass="dashboard"id="app">

<divclass="header">

<h1>📊 个人财务看板</h1>

<p>2026年上半年收支概览</p>

</div>

<divid="loading"v-if="loading">加载中...</div>

<templatev-if="!loading">

<divclass="summary-grid">

<divclass="summary-card income">

<divclass="label">总收入</div>

<divclass="value">¥{{ summary.income.toLocaleString() }}</div>

</div>

<divclass="summary-card expense">

<divclass="label">总支出</div>

<divclass="value">¥{{ summary.expense.toLocaleString() }}</div>

</div>

<divclass="summary-card savings">

<divclass="label">总储蓄</div>

<divclass="value">¥{{ summary.savings.toLocaleString() }}</div>

</div>

<divclass="summary-card rate">

<divclass="label">储蓄率</div>

<divclass="value">{{ summary.rate }}%</div>

</div>

<divclass="chart-container">

<h3>月度收支对比</h3>

<divclass="bar-chart">

<divclass="bar-group"v-for="month in monthly":key="month.month">

<divclass="bar-row">

<divclass="bar income":style="{ height: month.income + 'px' }"></div>

<divclass="bar expense":style="{ height: month.expense + 'px' }"></div>

</div>

<divclass="bar-label">{{ month.month }}</div>

</div>

<divclass="chart-container">

<tableclass="table">

<thead>

<tr>

</tr>

</thead>

<tbody>

<trv-for="(m, i) in monthlyWithTrend":key="m.month">

<td>{{ m.month }}</td>

<td>¥{{ m.income.toLocaleString() }}</td>

<td>¥{{ m.expense.toLocaleString() }}</td>

<td>¥{{ m.savings.toLocaleString() }}</td>

<td:class="m.trend === 'up' ? 'trend-up' : m.trend === 'down' ? 'trend-down' : ''">

</td>

</tr>

</tbody>

</table>

</div>

</template>

</div>

const { createApp, ref, computed, onMounted } = Vue;

createApp({

setup() {

constloading=ref(true);

constsummary=ref({ income:0, expense:0, savings:0, rate:0 });

constmonthly=ref([]);

constmonthlyWithTrend=computed(() => {

return monthly.value.map((m, i) => {

constrate= Math.round(m.savings / m.income *100);

let trend ='flat';

let trendIcon ='';

if (i >0) {

constprevRate= Math.round(monthly.value[i -1].savings / monthly.value[i -1].income *100);

if (rate > prevRate) { trend ='up'; trendIcon ='↑'; }

elseif (rate < prevRate) { trend ='down'; trendIcon ='↓'; }

else { trendIcon ='—'; }

}

return { ...m, rate, trend, trendIcon };

});

constfetchData=async () => {

try {

constres=awaitfetch('http://localhost:8000/api/dashboard');

constdata=await res.json();

summary.value = data.summary;

monthly.value = data.monthly.map(m=> ({

...m,

income: m.income /2, // 缩放到200px高度内

expense: m.expense /2

}));

} catch {

// 模拟数据

constmockData= [

{ month:'1月', income:6000, expense:4250 },

{ month:'2月', income:6000, expense:4600 },

{ month:'3月', income:6500, expense:3900 },

{ month:'4月', income:6500, expense:5250 },

{ month:'5月', income:6750, expense:4050 },

{ month:'6月', income:7000, expense:3750 }

];

monthly.value = mockData;

summary.value = {

income:38750,

expense:25800,

savings:12950,

rate:33.4

};

} finally {

loading.value =false;

}

};

onMounted(fetchData);

return { loading, summary, monthly, monthlyWithTrend };

}

}).mount('#app');

</script>

</body>

</html>

```

把这个文件保存为 `dashboard.html`，双击打开就能看到效果。

---

## 9.5 三种前端技术对比

|------|-------------|--------|-------|

| 学习门槛 | 极低 | 低 | 中 |

| 性能 | 好（无框架开销） | 好 | 好（虚拟 DOM） |

---

## 9.6 练习题

### 练习 1：做一个"天气查询"小应用

调用一个免费的天气 API（或者用模拟数据），实现：

- 输入城市名，显示当前温度和天气状况

- 用图标或颜色区分晴天、雨天、阴天

- 展示未来三天的预报趋势

提示：用 Vue 的 `v-model` 绑定输入框，`@click` 触发查询。

### 练习 2：用 React 改写上面的看板

把 9.4.2 节的 Vue 看板改成 React 版本。重点练习：

-`useState` 和 `useEffect` 的使用

- JSX 写法

- 组件拆分（可以把汇总卡片拆成一个 `SummaryCard` 组件）

### 练习 3：做一个"待办事项"清单

这是每个前端框架都会做的经典入门项目。要求：

- 可以添加待办

- 可以标记完成（划掉）

- 可以删除

- 有筛选功能（全部/未完成/已完成）

- 数据存入 `localStorage`（刷新不丢失）

### 练习 4：对接你自己的 FastAPI 后端

回想 Episode 07 你写的记账 API。现在用前端做一个漂亮的界面来展示：

- 首页展示本月总支出

- 分类展示各模块的消费占比（饼图可以用纯 CSS 做，也可以用 canvas）

- 可以添加新的记账记录

---

## 9.7 本课时知识点小结

| 知识点 | 关键词 |

|--------|--------|

| Vue 基础 | ref / computed / v-for / @click / onMounted |

| React 基础 | useState / useEffect / JSX |

| 前后端通信 | fetch API / CORS / JSON |

| 数据看板 | 卡片布局 / 柱状图 / 趋势展示 |

---

## 9.8 工具链总结

到目前为止，你已经掌握了：

```

Episode 01-04 Episode 05 Episode 06 Episode 07 Episode 08 Episode 09

基础语法 → 爬虫 → 数据分析 → 后端 API → AI实战 → 前端展示

Python 抓数据分析数据提供数据增强智能呈现数据

```

一套完整的数据 pipeline：**采集 → 分析 → 智能处理 → 接口服务 → 前端展示**

---

## 9.9 下期预告

下一期（**Episode 10**），我们将进行**综合项目实战**——从零搭建一个**数据分析 Dashboard**。

你会用到之前学过的所有技能：

- 用 **Python + Pandas** 分析真实数据集

- 用 **Matplotlib/Seaborn** 生成图表

- 用 **FastAPI** 提供数据 API

- 用 **Vue 或 React** 构建交互式前端页面

- （可选）用 **LangChain** 给看板加一个"智能问答"功能——直接问"上个月哪笔开支最多"，AI 帮你回答

这将是整个系列的第一次"毕业考核"。准备好了吗？🚀

本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。

Python教程 - 前端入门:React/Vue 基础 + 调用 API

最新文章

热门文章

随机文章

Python教程 - 前端入门:React/Vue 基础 + 调用 API

如果一个女生,从0开始学Python会怎么样?

同事炫耀他的 Python 代码只有十行,我展开一看,好家伙,每行都巨长.

最新文章

热门文章

随机文章