Python 与前端集成：构建全栈应用 | 极客日志

Python大前端

Python 与前端集成：构建全栈应用

Python 后端与前端框架（React/Vue）的集成方法。内容包括使用 FastAPI 或 Flask 构建 RESTful API，实现前后端数据交互（JSON）、跨域处理（CORS）、用户认证（JWT）。同时涵盖了 Docker 容器化部署方案，对比了 Python 与 Rust 在开发效率与性能上的差异，并提供了全栈项目实践建议及学习方法。

乱七八糟发布于 2026/4/5更新于 2026/4/132 浏览

Python 与前端集成：构建全栈应用

一、后端 API 设计

1.1 使用 FastAPI 创建 RESTful API

FastAPI 是一个现代化的 Python Web 框架，非常适合构建 RESTful API：

from fastapi import FastAPI
from pydantic import BaseModel
 typing  

app = FastAPI()

 ():
    : 
    name: 
    price: 
    is_offer:  = 

items = []


 ():
     {: }


 ():
     item  items:
         item. == item_id:
             item
     {: }


 ():
    items.append(item)
     item


 ():
     i, existing_item  (items):
         existing_item. == item_id:
            items[i] = item
             item
     {: }


 ():
     i, item  (items):
         item. == item_id:
            items.pop(i)
             {: }
     {: }

from flask import Flask, request, jsonify

app = Flask(__name__)
items = []

@app.route('/', methods=['GET'])
def read_root():
    return jsonify({"message": "Hello, World!"})

@app.route('/items/<int:item_id>', methods=['GET'])
def read_item(item_id):
    for item in items:
        if item['id'] == item_id:
            return jsonify(item)
    return jsonify({"error": "Item not found"})

@app.route('/items/', methods=['POST'])
def create_item():
    item = request.get_json()
    items.append(item)
    return jsonify(item)

@app.route('/items/<int:item_id>', methods=['PUT'])
def update_item(item_id):
    item = request.get_json()
    for i, existing_item in enumerate(items):
        if existing_item['id'] == item_id:
            items[i] = item
            return jsonify(item)
    return jsonify({"error": "Item not found"})

@app.route('/items/<int:item_id>', methods=['DELETE'])
def delete_item(item_id):
    for i, item in enumerate(items):
        if item['id'] == item_id:
            items.pop(i)
            return jsonify({"message": "Item deleted"})
    return jsonify({"error": "Item not found"})

if __name__ == '__main__':
    app.run(debug=True)

// App.js
import React, { useState, useEffect } from 'react';

function App() {
    const [items, setItems] = useState([]);
    const [newItem, setNewItem] = useState({ id: '', name: '', price: '', is_offer: false });

    useEffect(() => {
        fetch('http://localhost:8000/items/')
            .then(response => response.json())
            .then(data => setItems(data));
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        fetch('http://localhost:8000/items/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(newItem),
        })
        .then(response => response.json())
        .then(data => {
            setItems([...items, data]);
            setNewItem({ id: '', name: '', price: '', is_offer: false });
        });
    };

    return (
        <div>
            <h1>Items</h1>
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        {item.name} - ${item.price}
                    </li>
                ))}
            </ul>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="ID" value={newItem.id} onChange={(e) => setNewItem({...newItem, id: parseInt(e.target.value)})} />
                <input type="text" placeholder="Name" value={newItem.name} onChange={(e) => setNewItem({...newItem, name: e.target.value})} />
                <input type="number" placeholder="Price" value={newItem.price} onChange={(e) => setNewItem({...newItem, price: parseFloat(e.target.value)})} />
                <button type="submit">Add Item</button>
            
        
    );
}
export default App;

<!-- App.vue -->
<template>
    <div>
        <h1>Items</h1>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.name }} - ${{ item.price }}
            </li>
        </ul>
        <form @submit.prevent="handleSubmit">
            <input type="text" placeholder="ID" v-model.number="newItem.id" />
            <input type="text" placeholder="Name" v-model="newItem.name" />
            <input type="number" placeholder="Price" v-model.number="newItem.price" />
            <button type="submit">Add Item</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [],
            newItem: { id: '', name: '', price: '', is_offer: false }
        };
    },
    mounted() {
        this.fetchItems();
    },
    methods: {
        fetchItems() {
            fetch('http://localhost:8000/items/')
                .then(response => response.json())
                .then(data => {
                    this.items = data;
                });
        },
        handleSubmit() {
            fetch('http://localhost:8000/items/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(this.newItem),
            })
            .then(response => response.json())
            .then(data => {
                this.items.push(data);
                this.newItem = { id: '', name: '', price: '', is_offer: false };
            });
        }
    }
};
</script>

# 后端返回 JSON 数据
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    id: int
    name: str
    price: float

@app.get("/item", response_model=Item)
def get_item():
    return {"id": 1, "name": "Item 1", "price": 10.99}

# FastAPI 处理 CORS
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 配置 CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"], # 在生产环境中应该设置具体的域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def read_root():
    return {"message": "Hello, World!"}

# Flask 处理 CORS
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 允许所有跨域请求

@app.route('/')
def read_root():
    return jsonify({"message": "Hello, World!"})

# FastAPI 中使用 JWT
from fastapi import FastAPI, Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
from jose import JWTError, jwt
from datetime import datetime, timedelta
from pydantic import BaseModel

app = FastAPI()

# 配置
SECRET_KEY = "your-secret-key"
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 30

# 模拟用户数据库
fake_users_db = {
    "alice": {
        "username": "alice",
        "full_name": "Alice Smith",
        "email": "[email protected]",
        "hashed_password": "fakehashedsecret",
        "disabled": False,
    }
}

# 工具函数
def fake_hash_password(password: str):
    return "fakehashed" + password

def verify_password(plain_password, hashed_password):
    return hashed_password == fake_hash_password(plain_password)

def get_user(db, username: str):
    if username in db:
        user_dict = db[username]
        return user_dict

def create_access_token(data: dict, expires_delta: timedelta = None):
    to_encode = data.copy()
    if expires_delta:
        expire = datetime.utcnow() + expires_delta
    else:
        expire = datetime.utcnow() + timedelta(minutes=15)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
    return encoded_jwt

# 依赖
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
async def get_current_user(token: str = Depends(oauth2_scheme)):
    credentials_exception = HTTPException(
        status_code=status.HTTP_401_UNAUTHORIZED,
        detail="Could not validate credentials",
        headers={"WWW-Authenticate": "Bearer"},
    )
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        username: str = payload.get("sub")
        if username is None:
            raise credentials_exception
    except JWTError:
        raise credentials_exception
    user = get_user(fake_users_db, username=username)
    if user is None:
        raise credentials_exception
    return user

# 路由
@app.post("/token")
async def login(form_data: OAuth2PasswordRequestForm = Depends()):
    user = get_user(fake_users_db, form_data.username)
    if not user:
        raise HTTPException(status_code=400, detail="Incorrect username or password")
    if not verify_password(form_data.password, user["hashed_password"]):
        raise HTTPException(status_code=400, detail="Incorrect username or password")
    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    access_token = create_access_token(
        data={"sub": user["username"]},
        expires_delta=access_token_expires
    )
    return {"access_token": access_token, "token_type": "bearer"}

@app.get("/users/me")
async def read_users_me(current_user: dict = Depends(get_current_user)):
    return current_user

# Dockerfile
FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8000
CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

# docker-compose.yml
version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "8000:8000"
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

Python 与前端集成：构建全栈应用

Python 与前端集成：构建全栈应用

一、后端 API 设计

1.1 使用 FastAPI 创建 RESTful API

1.2 使用 Flask 创建 RESTful API

二、前端框架集成

2.1 与 React 集成

2.2 与 Vue 集成

三、数据传输

3.1 JSON 数据格式

3.2 处理 CORS

四、认证与授权

4.1 JWT 认证

五、部署

5.1 部署后端

5.2 部署前端

5.3 完整部署

六、Python 与 Rust 的对比

6.1 前端集成对比

6.2 学习心得

七、实践项目推荐

7.1 全栈项目

八、学习方法和技巧

8.1 学习方法

8.2 常见问题和解决方法

九、总结

更多推荐文章

相关免费在线工具

Python 与前端集成：构建全栈应用

Python 与前端集成：构建全栈应用

一、后端 API 设计

1.1 使用 FastAPI 创建 RESTful API

1.2 使用 Flask 创建 RESTful API

二、前端框架集成

2.1 与 React 集成

2.2 与 Vue 集成

三、数据传输

3.1 JSON 数据格式

3.2 处理 CORS

四、认证与授权

4.1 JWT 认证

五、部署

5.1 部署后端

5.2 部署前端

5.3 完整部署

六、Python 与 Rust 的对比

6.1 前端集成对比

6.2 学习心得

七、实践项目推荐

7.1 全栈项目

八、学习方法和技巧

8.1 学习方法

8.2 常见问题和解决方法

九、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具