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

优质文章学习记录

— 7 min read

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

前言

大家好，我是第一程序员（名字大，人很菜）。作为一个非科班转码、正在学习Rust和Python的萌新，最近我开始学习Python与前端技术的集成。说实话，一开始我对全栈开发的概念还很模糊，但随着学习的深入，我发现Python作为后端与前端框架的结合可以构建出功能强大的全栈应用。今天我想分享一下我对Python与前端集成的学习心得，希望能给同样是非科班转码的朋友们一些参考。

一、后端API设计

1.1 使用FastAPI创建RESTful API

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

from 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 API

Flask是另一个流行的Python Web框架，也可以用于构建RESTful API：

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)

二、前端框架集成

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> <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> </form> </div> ); } export default App;

2.2 与Vue集成

Vue是另一个流行的前端框架，也可以与Python后端API集成：

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

三、数据传输

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_model=Item) 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_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!"})

四、认证与授权

4.1 JWT认证

JSON Web Token（JWT）是一种常用的认证方式：

# 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

五、部署

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与前端集成的各种技巧。

保持学习，保持输出。虽然现在我还是个菜鸡，但我相信只要坚持，总有一天能成为真正的「第一程序员」！

Read more

Jetson 上 OpenClaw + Ollama + llama.cpp 的联动配置模板部署大模型

Jetson 上我建议的联动方式是：OpenClaw -> Ollama（主模型，原生 API）+ llama.cpp（备用/低资源模型，OpenAI 兼容 API）+ Ollama embeddings（memorySearch）。 这样做的原因是，OpenClaw 官方把 Ollama + openclaw onboard 作为最低冲突的本地方案；同时它也支持把 vLLM / LiteLLM / 自定义 OpenAI-compatible 本地代理 作为额外 provider 接进来。Ollama 这边，OpenClaw 明确推荐走原生 http://host:11434，不要给它配 /v1，否则工具调用会变差；而 llama.cpp 的 llama-server
OpenREALM：无人机实时映射框架的技术深度解析

OpenREALM：无人机实时映射框架的技术深度解析

在无人机应用日益广泛的当下，精准、高效的实时映射技术成为推动行业发展的关键。传统无人机映射方案往往存在数据处理滞后、对复杂地形适应性差等问题，难以满足精准农业、应急救援等场景的实时决策需求。OpenREALM 作为一款开源的无人机实时映射框架，创新性地融合了视觉 SLAM、单目稠密重建等前沿技术，实现了从 2D 图像拼接至 3D 表面重建的多模式映射功能。 原文链接：https://arxiv.org/pdf/2009.10492 代码链接：https://github.com/laxnpander/OpenREALM 沐小含持续分享前沿算法论文，欢迎关注... 一、引言：无人机映射技术的现状与挑战 1.1 应用背景与核心需求 人类对世界的勘测需求推动了映射技术的持续发展，而无人机的兴起为空中勘测提供了全新的解决方案。空中影像已广泛应用于精准农业、城市规划、灾害风险管理等关键领域，这些应用场景不仅对数据分辨率有较高要求，更在可用性、成本和映射效率方面提出了严苛标准。传统的有人机勘测存在操作复杂、成本高昂等局限，而无人机凭借轻量化设计、自主飞行能力强等优势，

从理论到实践：Cosserat杆理论如何重塑柔性机器人设计思维

从理论到实践：Cosserat杆理论如何重塑柔性机器人设计思维 在机器人技术飞速发展的今天，传统刚性机器人在复杂环境中的局限性日益凸显。医疗微创手术和工业精密操作等领域对机器人的灵活性、适应性和精确性提出了更高要求。柔性机器人作为一种新兴解决方案，正逐渐改变我们对机器人设计的认知。而Cosserat杆理论这一经典力学框架的重新诠释，为柔性机器人设计带来了革命性的思维转变。 Cosserat理论最初由法国科学家Eugène和François Cosserat于20世纪初提出，原本用于描述具有微观结构的连续介质力学行为。这一理论独特之处在于它不仅考虑物体的平移变形，还独立描述旋转自由度，这使得它特别适合模拟那些需要同时考虑弯曲、扭转和拉伸的复杂结构。在柔性机器人领域，这一理论框架为工程师提供了前所未有的建模精度和设计灵活性。 1. Cosserat理论的核心突破与柔性机器人的契合点 传统机器人设计基于刚性连杆假设，使用Denavit-Hartenberg参数等方法来描述运动学。这种方法在结构化环境中表现优异，但当面对人体内部或复杂工业环境时，刚性假设就显得力不从心。Cossera

Pi0模型微调入门教程：基于LoRA在自有机器人数据上进行动作策略适配

Pi0模型微调入门教程：基于LoRA在自有机器人数据上进行动作策略适配 重要提示：本文介绍的Pi0模型微调方法主要适用于研究和开发环境，在实际机器人部署前请充分测试验证安全性。 1. 教程概述 1.1 学习目标 本教程将带你从零开始，学习如何使用LoRA（Low-Rank Adaptation）技术对Pi0机器人控制模型进行微调。学完本教程后，你将能够： * 理解Pi0模型的基本架构和微调原理 * 准备自己的机器人数据集并处理成合适格式 * 使用LoRA方法高效微调Pi0模型 * 评估微调后的模型性能并部署使用 1.2 前置知识要求 为了更好理解本教程，建议具备以下基础知识： * Python编程基础（能看懂简单代码） * 了解机器学习基本概念（训练、验证、测试） * 有过PyTorch或类似框架的使用经验更佳 * 对机器人控制有基本了解（非必须，但有帮助） 1.3 为什么选择LoRA微调 LoRA是一种参数高效的微调方法，相比全参数微调有三大优势： 1. 训练速度快：只需要训练少量参数，大大缩短训练时间 2. 内存占用少：可以在消费级GPU