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

        }).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">

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

<!-- 加载状态 -->

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

<!-- 商品网格 -->

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

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

<h3>{{ item.name }}</h3>

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

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

</div>

</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>

<!-- 新增商品表单 -->

<h3>新增商品</h3>

<divclass="form-group">

<label>名称</label>

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

</div>

<divclass="form-group">

<label>价格</label>

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

</div>

<divclass="form-group">

<label>分类</label>

<selectv-model="newItem.category">

<option>水果</option>

<option>数码</option>

</select>

</div>

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

<!-- 提交结果 -->

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

</div>

<script>

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'

                    }}>

<h3>{item.name}</h3>

<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' }}>

<h3>新增商品</h3>

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

<label>名称</label><br/>

<input

type="text"

value={newName}

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

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

/>

</div>

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

<label>价格</label><br/>

<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; }