当前位置： 首页 > news >正文

【前后端与数据库交互】从零构建 Python + Vue + MongoDB 网站

news 2025/9/20 5:51:39

第一部分：如何操作（步步指导）

步骤 1: 设置本地开发环境

  1. 安装 Python 和必要工具：

    • 下载 Python 3.10+ 从官网。
    • 安装 Git（用于版本控制）。
    • 创建虚拟环境：打开命令行（Windows: cmd 或 PowerShell；Mac/Linux: terminal），运行：
      python -m venv myenv
source myenv/bin/activate  # Mac/Linux
# 或 Windows: myenv\Scripts\activate

  2. 使用清华源安装依赖（加速安装）：

    • 配置 pip 使用清华镜像：
      pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
    • 安装后端依赖（我们用 FastAPI 作为后端框架，因为它简单高效，支持异步；MongoDB 用 pymongo）：
      pip install fastapi uvicorn pymongo requests pydantic python-dotenv passlib[bcrypt] python-jose[cryptography]
      • 解释：fastapi（API 框架）、uvicorn（服务器）、pymongo（MongoDB 驱动）、requests（调用 DeepSeek API）、pydantic（数据验证）、python-dotenv（环境变量）、passlib 和 python-jose（用于用户认证，JWT）。
步骤 2: 创建后端项目结构

  1. 创建项目文件夹：

    mkdir backend-project
cd backend-project

  2. 创建核心文件（保持简洁，只保留必要文件）：

    • main.py：主应用文件。
    • models.py：数据模型（用户、功能相关）。
    • auth.py：用户认证逻辑。
    • routes.py：API 路由（注册、登录、两个功能）。
    • .env：环境变量文件（放 API Key 和 DB 连接）。
    • requirements.txt：依赖列表（可选，但推荐）。

    删除多余东西：我们不添加测试文件夹、静态文件、日志模块等。只保留以上文件。没有多余的示例代码或模板。

  3. 编写代码（复制以下内容到对应文件）：

    • .env（环境变量，保护敏感信息）：

      MONGO_URI=mongodb://root:m889w97h@test-db-mongodb.ns-jes7x0rb.svc:27017
DEEPSEEK_API_KEY=sk-37e8ec46dd45a587a6d06f89
SECRET_KEY=your_secret_key_here  # 生成一个随机密钥，比如用 Python: import secrets; print(secrets.token_hex(32))

    • models.py（用户模型，使用 Pydantic）：

      from pydantic import BaseModel
from typing import Optionalclass User(BaseModel):username: strpassword: str  #  hashed in DBclass UserInDB(User):hashed_password: strclass ImageDescriptionRequest(BaseModel):image_url: str  # 假设上传后返回 URL，这里简化class TextToImageRequest(BaseModel):text: str

    • auth.py（用户认证，使用 JWT）：

      import jwt
from passlib.context import CryptContext
from datetime import datetime, timedelta
from dotenv import load_dotenv
import osload_dotenv()
SECRET_KEY = os.getenv("SECRET_KEY")
ALGORITHM = "HS256"
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")def get_password_hash(password):return pwd_context.hash(password)def verify_password(plain_password, hashed_password):return pwd_context.verify(plain_password, hashed_password)def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):to_encode = data.copy()if expires_delta:expire = datetime.utcnow() + expires_deltaelse:expire = datetime.utcnow() + timedelta(minutes=15)to_encode.update({"exp": expire})encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)return encoded_jwt

    • routes.py（API 端点，包括用户和功能）：

      from fastapi import APIRouter, Depends, HTTPException, UploadFile, File
from pymongo import MongoClient
from dotenv import load_dotenv
import os
import requests
from .models import User, ImageDescriptionRequest, TextToImageRequest
from .auth import get_password_hash, verify_password, create_access_token
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestFormload_dotenv()
MONGO_URI = os.getenv("MONGO_URI")
DEEPSEEK_API_KEY = os.getenv("DEEPSEEK_API_KEY")
client = MongoClient(MONGO_URI)
db = client["mydatabase"]  # 创建或使用数据库
users_collection = db["users"]router = APIRouter()
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")# 用户注册
@router.post("/register")
def register(user: User):if users_collection.find_one({"username": user.username}):raise HTTPException(status_code=400, detail="Username already registered")hashed_password = get_password_hash(user.password)users_collection.insert_one({"username": user.username, "hashed_password": hashed_password})return {"msg": "User registered"}# 用户登录
@router.post("/token")
def login(form_data: OAuth2PasswordRequestForm = Depends()):user = users_collection.find_one({"username": form_data.username})if not user or not verify_password(form_data.password, user["hashed_password"]):raise HTTPException(status_code=400, detail="Incorrect username or password")access_token = create_access_token(data={"sub": form_data.username})return {"access_token": access_token, "token_type": "bearer"}# 看图说话（图像描述，需要认证）
@router.post("/image-description", dependencies=[Depends(oauth2_scheme)])
def describe_image(request: ImageDescriptionRequest):# 调用 DeepSeek API（假设 API 端点为 https://api.deepseek.com/v1/images/descriptions）headers = {"Authorization": f"Bearer {DEEPSEEK_API_KEY}"}payload = {"image_url": request.image_url}  # 简化，实际需处理上传response = requests.post("https://api.deepseek.com/v1/images/descriptions", json=payload, headers=headers)  # 替换为实际 DeepSeek 端点if response.status_code != 200:raise HTTPException(status_code=500, detail="API error")return response.json()["description"]  # 假设返回描述# 图片生成（文本到图像，需要认证）
@router.post("/text-to-image", dependencies=[Depends(oauth2_scheme)])
def generate_image(request: TextToImageRequest):# 调用 DeepSeek API（假设 API 端点为 https://api.deepseek.com/v1/images/generations）headers = {"Authorization": f"Bearer {DEEPSEEK_API_KEY}"}payload = {"prompt": request.text}response = requests.post("https://api.deepseek.com/v1/images/generations", json=payload, headers=headers)  # 替换为实际 DeepSeek 端点if response.status_code != 200:raise HTTPException(status_code=500, detail="API error")return response.json()["image_url"]  # 假设返回图像 URL# 图像上传端点（辅助，用于看图说话）
@router.post("/upload-image")
def upload_image(file: UploadFile = File(...)):# 简化：实际中上传到云存储，返回 URL。这里返回假 URLreturn {"image_url": f"uploaded/{file.filename}"}

    • main.py（主文件）：

      from fastapi import FastAPI
from .routes import routerapp = FastAPI()
app.include_router(router)if __name__ == "__main__":import uvicornuvicorn.run(app, host="0.0.0.0", port=8000)

  4. 运行后端：

    python main.py
    • 访问 http://localhost:8000/docs 查看 API 文档（FastAPI 自带 Swagger）。
步骤 3: 连接数据库和测试
  • 数据库已在 https://bja.sealos.run/ 启动，使用提供的 URI。
  • 测试：用 Postman 或 curl 测试注册/登录，然后调用功能端点（需带 JWT token）。
步骤 4: 前端（Vue）集成和部署到 Sealos
  • 前端简要：用 Vue CLI 创建项目（npm install -g @vue/cli; vue create frontend-project）。在 Vue 中用 Axios 调用后端 API（e.g., /register, /token, /image-description）。
  • 前后端交互：前端发送 HTTP 请求到后端（e.g., POST /image-description with token）。
  • 部署到 Sealos：
    1. 在 https://cloud.sealos.io/ 创建应用。
    2. 上传后端代码（Git 推送或直接上传）。
    3. 设置环境变量（从 .env）。
    4. 部署前端类似（Vue 构建后上传）。
    5. Sealos 会提供域名。
步骤 5: 删除多余东西
  • 在项目中，只保留以上文件。删除任何自动生成的如 README、tests 等。
  • 用 git init 版本控制，commit 只核心文件。

标签：前后端交互、数据库、FastAPI、Vue、MongoDB

前言

很多新手在开发网站时，最头疼的就是前后端交互和数据库连接。别崩溃！这篇文章将从零解释这些概念，并用一个实际项目（用户登录后使用图像描述和生成工具）来演示。项目后端用 Python (FastAPI)，前端用 Vue，数据库用 MongoDB。我们会覆盖安装、代码实现、交互流程。环境安装用清华源加速。

假设您是小白，我会一步步说清楚。

一、基本概念

1.1 前端（Vue）

  • 作用：用户界面。Vue 是一个 JS 框架，用于构建动态页面（如上传图像、输入文本、显示结果）。
  • 如何与后端交互：前端通过 HTTP 请求（GET/POST）调用后端 API。例如，用 Axios 库发送请求，带上数据（如图像文件）和认证 token。

1.2 后端（Python FastAPI）

  • 作用：处理逻辑、数据库操作、调用外部 API（如 DeepSeek）。
  • API 端点：后端暴露 URL（如 /image-description），前端调用它。后端返回 JSON 数据。

1.3 数据库（MongoDB）

  • 作用：存储数据，如用户账号。NoSQL 数据库，适合灵活数据。
  • 交互：后端用 pymongo 连接数据库，执行增删改查（CRUD）。例如，注册时插入用户记录。

1.4 交互流程

  1. 用户在前端注册/登录 → 前端 POST 到后端 /register 或 /token → 后端验证并存入数据库 → 返回 token。
  2. 用户选择功能（如看图说话） → 前端上传图像到后端 /upload-image → 后端返回 URL。
  3. 前端 POST 到 /image-description（带 token 和 URL） → 后端调用 DeepSeek API + 数据库检查权限 → 返回描述 → 前端显示在页面右侧。
  4. 安全：用 JWT token 认证，确保只有登录用户能访问功能。

二、环境准备

  1. 安装 Python 3.10+。
  2. 创建虚拟环境：python -m venv myenv; source myenv/bin/activate。
  3. 用清华源安装：pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple。
  4. 安装依赖：pip install fastapi uvicorn pymongo requests pydantic python-dotenv passlib[bcrypt] python-jose[cryptography]。
  5. MongoDB：用提供的 URI 连接（已在 Sealos 启动）。

三、后端实现（Python）

项目结构：

backend-project/
├── main.py
├── models.py
├── auth.py
├── routes.py
└── .env

代码详见上文（步骤 2）。关键点：

  • 数据库交互：用 MongoClient(MONGO_URI) 连接，collection.insert_one() 存数据，find_one() 查询。
  • 前后端交互：FastAPI 的 @router.post("/endpoint") 定义 API，前端用 fetch 或 Axios 调用。
  • API 调用：用 requests 库 POST 到 DeepSeek，带 API Key。

运行：python main.py，访问 localhost:8000/docs 测试。

四、前端实现（Vue）

  1. 安装 Vue：npm install -g @vue/cli; vue create frontend-project。
  2. 安装 Axios：npm install axios。
  3. 示例组件（src/components/ImageDescription.vue）：
    <template><div><input type="file" @change="uploadImage" /><button @click="describe">描述</button><p>{{ description }}</p></div>
</template><script>
import axios from 'axios';
export default {data() { return { imageUrl: '', description: '' }; },methods: {async uploadImage(event) {const formData = new FormData();formData.append('file', event.target.files[0]);const res = await axios.post('http://backend-url/upload-image', formData);this.imageUrl = res.data.image_url;},async describe() {const token = localStorage.getItem('token');  // 从登录获取const res = await axios.post('http://backend-url/image-description', { image_url: this.imageUrl }, { headers: { Authorization: `Bearer ${token}` } });this.description = res.data;}}
};
</script>
  • 登录组件类似：POST 到 /token，存 token 到 localStorage。

五、数据库交互详解

  • 连接：client = MongoClient(uri); db = client['mydatabase']; collection = db['users']。
  • CRUD 示例：
    • 插入：collection.insert_one({"key": "value"})。
    • 查询：user = collection.find_one({"username": "test"})。
  • 与前后端结合：后端收到前端请求后，查询数据库验证用户，然后处理逻辑。

六、部署到 Sealos

  1. 在 https://cloud.sealos.io/ 创建应用。
  2. 上传代码，设置 .env。
  3. 部署后，前端调用后端域名。

七、常见问题

  • 跨域：后端加 CORS（pip install fastapi[all]，app.add_middleware(CORSMiddleware)）。
  • 错误：检查 token、API Key。
  • 性能：用异步（FastAPI 支持）。

如果有问题，评论区留言！

http://www.dtcms.com/a/390525.html

相关文章：

  • 对比django，flask，opencv三大
  • 【6/20】MongoDB 入门：连接数据库，实现数据存储与查询
  • 【笔记】Docker使用
  • k8s自定义CNI插件实现指南
  • 使用Docker部署Kubernetes（K8s）详解
  • 【Docker】网络
  • 磁共振成像原理（理论）8：射频回波 (RF Echoes)-三脉冲回波（1）
  • 华为云 ELB：智慧负载均衡，让您的应用永葆流畅体验
  • 【实时Linux实战系列】PM QoS 与 C/P-State 管理：功耗与时延的平衡
  • github修改repo名称
  • 使用 C# 操作 Excel 工作表：添加、删除、复制、移动、重命名
  • Python 高效实现 Excel 转 PDF： 不依赖Office
  • Ubuntu25.04通过Docker编译Sunshine记录
  • WebRTC 如何实现的低延迟和高带宽利用率
  • Python接口自动化浅析unittest单元测试原理
  • 【附源码】基于SpringBoot的新能源汽车销售管理系统的设计与实现
  • 虚拟机Ubuntu挂载共享文件夹
  • JS实现房贷计算器和购物车页面
  • 【开题答辩全过程】以 Android安全网购平台为例，包含答辩的问题和答案
  • 期权市场反常信号是什么？
  • 【SpringBoot】26 核心功能 - Web开发原理 - Spring Boot 中定制 Servlet 容器
  • java spring boot 搭建项目
  • 【一文了解】闭包
  • 深入解析Mysql数据库并发：从读写机制到多版本控制
  • Python自学20 - Python操作PDF文件
  • Windows 本地 UV 环境部署 Index-TTS2 实战：基于 EPGF 架构的完整指南（支持 DeepSpeed + FP16）
  • 【cpp Trip第4站】函数参数传递
  • 【Spotfire】实现错行效果
  • 【Day 61】Linux-haproxy负载均衡
  • 搭建线上线下融合的商城小程序，关键步骤有哪些？