企业官网建设流程全解析

从 0 到 1 开发 AI 全栈项目：FastAPI + Vue3 + MySQL 架构设计与排雷实录

📖 前言

耗时半个月，我从零手敲了一个基于FastAPI + Vue3 + LangGraph的「智能实验室预约系统」。这个项目不仅包含传统的 RBAC 权限、复杂的预约冲突检测，还接入了 RAG 知识库和流式 AI Agent。

为了防踩坑和复盘，我将用一周时间连载这个项目的完整开发历程。这是第一篇，我们先从全局架构和底层数据库设计聊起。

🏗️ 一、 全局架构设计

整个系统采用标准的前后端分离架构，同时接入了 AI 服务层。架构图如下：

• 前端 (Frontend)：Vue3 + Vite + Element Plus + Axios，负责页面渲染和 SSE 流式数据接收。
• 后端 API (Backend)：FastAPI，处理核心业务逻辑（用户鉴权、CRUD、防并发预约）。
• AI Agent 层：LangChain + LangGraph，负责意图识别、工具调用（Tool Calling）。
• 数据层：MySQL（存储用户、实验室、设备、预约记录） + ChromaDB（存储 RAG 向量知识库）。

🛠️ 为什么这么选？

• FastAPI：极其轻量，自带 Swagger 接口文档，支持异步（async/await），对于后续做 SSE 流式输出简直是降维打击。
• Vue3 + Vite：开发体验极佳，热更新快。
• LangGraph：相比于普通的 Chain，LangGraph 能通过状态图（StateGraph）精准控制 Agent 的思考循环，防死循环能力一流。

🗄️ 二、 核心数据库设计

系统的核心业务是“预约”，因此围绕这一动作设计了 4 张核心表：

1. User 表：存储账号密码（Bcrypt加密）、角色（Admin/Student）。
2. Lab 表：实验室信息（名称、容量、开放时间、状态）。
3. Equipment 表：设备信息，通过lab_id外键与 Lab 表强关联。
4. Reservation 表：预约记录，包含user_id、lab_id、equipment_id三个外键，以及预约日期、起止时间和状态。

🚨 三、 开发排雷实录（血泪教训）

由于我是从零手搓，在环境搭建和底层配置上踩了几个极其经典的坑，如果你也在做类似的项目，一定要避开：

💣 坑 1：MySQL 8.0 连不上，报错缺少cryptography

• 现象：安装好依赖后启动 Uvicorn，后端瞬间红字崩溃，提示RuntimeError: 'cryptography' package is required for sha256_password or caching_sha2_password auth methods。
• 分析：MySQL 8.0 默认使用了更安全的caching_sha2_password认证方式，而 Python 的pymysql需要底层加密库支持。
• 解决：直接在虚拟环境中pip install cryptography，并在requirements.txt中锁死版本。

💣 坑 2：_init_.py的血案（少写一个下划线）

• 现象：Python 疯狂报错ModuleNotFoundError: No module named 'app.xxx'。
• 分析：排查了半天，发现新建的dependencies文件夹里，初始化文件被命名成了_init_.py（单下划线），而正确的规范是__init__.py（双下划线）。这导致 Python 根本没把这个文件夹当成一个模块包。
• 解决：立刻重命名，并记得删除本地的__pycache__缓存文件夹再重启。

(💡 这不仅是开发踩坑，也是很好的测试排查思维体现：看日志 -> 定位报错源码行 -> 修正环境。)

📝 四、 总结与预告

项目的骨架已经搭好，数据库也能正常跑通了。下一篇博客，我将带大家手撕“JWT 鉴权体系”，以及如何解决前端 Axios 拦截器吞掉response.data导致无穷白屏的深坑。

📢 关于源码与答疑：
本项目包含完整的前后端代码、数据库 SQL 及全套 AI Agent 接入逻辑。如果你正在做毕设/课设，或者想参考学习，完整源码及部署文档可在主页私信我获取。后续我也会持续更新 RAG 和 LangGraph 的落地实战，欢迎关注！