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

Python与前端集成构建全栈应用前言大家好我是第一程序员名字大人很菜。作为一个非科班转码、正在学习Rust和Python的萌新最近我开始学习Python与前端技术的集成。说实话一开始我对全栈开发的概念还很模糊但随着学习的深入我发现Python作为后端与前端框架的结合可以构建出功能强大的全栈应用。今天我想分享一下我对Python与前端集成的学习心得希望能给同样是非科班转码的朋友们一些参考。一、后端API设计1.1 使用FastAPI创建RESTful APIFastAPI是一个现代化的Python Web框架非常适合构建RESTful APIfrom fastapi import FastAPI from pydantic import BaseModel from typing import List app FastAPI() class Item(BaseModel): id: int name: str price: float is_offer: bool None items [] app.get(/) def read_root(): return {message: Hello, World!} app.get(/items/{item_id}) def read_item(item_id: int): for item in items: if item.id item_id: return item return {error: Item not found} app.post(/items/) def create_item(item: Item): items.append(item) return item app.put(/items/{item_id}) def update_item(item_id: int, item: Item): for i, existing_item in enumerate(items): if existing_item.id item_id: items[i] item return item return {error: Item not found} app.delete(/items/{item_id}) def delete_item(item_id: int): for i, item in enumerate(items): if item.id item_id: items.pop(i) return {message: Item deleted} return {error: Item not found}1.2 使用Flask创建RESTful APIFlask是另一个流行的Python Web框架也可以用于构建RESTful APIfrom 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(debugTrue)二、前端框架集成2.1 与React集成React是一个流行的前端框架可以与Python后端API集成// 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 h1Items/h1 ul {items.map(item ( li key{item.id} {item.name} - ${item.price} /li ))} /ul form onSubmit{handleSubmit} input typetext placeholderID value{newItem.id} onChange{(e) setNewItem({...newItem, id: parseInt(e.target.value)})} / input typetext placeholderName value{newItem.name} onChange{(e) setNewItem({...newItem, name: e.target.value})} / input typenumber placeholderPrice value{newItem.price} onChange{(e) setNewItem({...newItem, price: parseFloat(e.target.value)})} / button typesubmitAdd Item/button /form /div ); } export default App;2.2 与Vue集成Vue是另一个流行的前端框架也可以与Python后端API集成!-- App.vue -- template div h1Items/h1 ul li v-foritem in items :keyitem.id {{ item.name }} - ${{ item.price }} /li /ul form submit.preventhandleSubmit input typetext placeholderID v-model.numbernewItem.id / input typetext placeholderName v-modelnewItem.name / input typenumber placeholderPrice v-model.numbernewItem.price / button typesubmitAdd 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三、数据传输3.1 JSON数据格式JSON是前后端数据传输的标准格式# 后端返回JSON数据 from fastapi import FastAPI from pydantic import BaseModel app FastAPI() class Item(BaseModel): id: int name: str price: float app.get(/item, response_modelItem) def get_item(): return {id: 1, name: Item 1, price: 10.99}3.2 处理CORS跨域资源共享CORS是前后端集成中常见的问题# FastAPI处理CORS from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app FastAPI() # 配置CORS app.add_middleware( CORSMiddleware, allow_origins[*], # 在生产环境中应该设置具体的域名 allow_credentialsTrue, 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!})四、认证与授权4.1 JWT认证JSON Web TokenJWT是一种常用的认证方式# 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: aliceexample.com, 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(minutes15) to_encode.update({exp: expire}) encoded_jwt jwt.encode(to_encode, SECRET_KEY, algorithmALGORITHM) return encoded_jwt # 依赖 oauth2_scheme OAuth2PasswordBearer(tokenUrltoken) async def get_current_user(token: str Depends(oauth2_scheme)): credentials_exception HTTPException( status_codestatus.HTTP_401_UNAUTHORIZED, detailCould 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, usernameusername) 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_code400, detailIncorrect username or password) if not verify_password(form_data.password, user[hashed_password]): raise HTTPException(status_code400, detailIncorrect username or password) access_token_expires timedelta(minutesACCESS_TOKEN_EXPIRE_MINUTES) access_token create_access_token( data{sub: user[username]}, expires_deltaaccess_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五、部署5.1 部署后端使用Docker部署Python后端# 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]5.2 部署前端使用Vercel、Netlify等平台部署前端Vercel适合部署React、Next.js应用Netlify适合部署Vue、React应用GitHub Pages适合部署静态网站5.3 完整部署使用Docker Compose部署前后端# docker-compose.yml version: 3 services: backend: build: ./backend ports: - 8000:8000 frontend: build: ./frontend ports: - 3000:3000 depends_on: - backend六、Python与Rust的对比作为一个同时学习Python和Rust的转码者我发现对比学习是一种很好的方法6.1 前端集成对比Python生态丰富有FastAPI、Flask等框架Rust有Actix-web、Rocket等框架开发效率Python开发效率高Rust开发效率相对较低性能Rust性能优异Python性能相对较低6.2 学习心得Python的优势开发效率高生态丰富Rust的优势性能优异内存安全相互借鉴从Python学习快速开发从Rust学习性能优化七、实践项目推荐7.1 全栈项目博客系统使用Python作为后端React/Vue作为前端电商系统使用Python作为后端React/Vue作为前端社交应用使用Python作为后端React/Vue作为前端数据分析平台使用Python作为后端React/Vue作为前端八、学习方法和技巧8.1 学习方法循序渐进先学习后端API开发再学习前端框架项目实践通过实际项目来巩固知识文档阅读仔细阅读框架的官方文档社区交流加入社区向他人学习8.2 常见问题和解决方法CORS问题配置CORS中间件认证问题使用JWT等认证方式部署问题使用Docker等容器化技术性能问题优化API设计使用缓存九、总结Python与前端技术的集成可以构建出功能强大的全栈应用。作为一个非科班转码者我深刻体会到全栈开发的重要性。我的学习过程并不是一帆风顺的遇到了很多困难和挫折但通过不断地实践和学习我逐渐掌握了Python与前端集成的各种技巧。保持学习保持输出。虽然现在我还是个菜鸡但我相信只要坚持总有一天能成为真正的「第一程序员」