Fastapi-Vue3-Admin 是一套 完全开源、高度模块化、技术先进的现代化快速开发平台,旨在帮助开发者高效搭建高质量的企业级中后台系统。该项目采用 前后端分离架构,融合 Python 后端框架 FastAPI 和前端主流框架 Vue3 实现多端统一开发,提供了一站式开箱即用的开发体验。
设计初心: 以模块化、松耦合为核心,追求丰富的功能模块、简洁易用的接口、详尽的开发文档和便捷的维护方式。通过统一框架和组件,降低技术选型成本,遵循开发规范和设计模式,构建强大的代码分层模型,搭配完善的本地中文化支持,专为团队和企业开发场景量身定制。
fastapi_vue3_admin
├─ backend # 后端工程
├─ frontend # 前端工程
├─ fastapp # 小程序工程
├─ fastdocs # 官网文档
├─ devops # 部署工程
├─ docker-compose.yaml # 部署文件
├─ start.sh # 部署脚本
├─ LICENSE # 许可协议
|─ README.en.md # 英文文档
└─ README.md # 中文文档
| 特性 |
描述 |
| 🔭 快速开发 |
一套完全开源的现代化快速开发平台,旨在帮助开发者高效搭建高质量的中后台系统。 |
| 🌐 全栈整合 |
前后端分离,融合 Python (FastAPI) + Vue3 多端开发 |
| 🧱 模块化设计 |
系统功能高度解耦,便于扩展和维护 |
| ⚡️ 高性能异步 |
使用 FastAPI 异步框架 + Redis 缓存优化接口响应速度 |
| 🔒 安全认证 |
支持 JWT OAuth2 认证机制,保障系统安全 |
| 📊 权限管理 |
RBAC 模型实现菜单、按钮、数据级别的细粒度权限控制 |
| 🚀 快速部署 |
支持 Docker/Docker Compose/Nginx 一键部署 |
| 📄 开发友好 |
提供完善的中文文档 + 中文化界面 + 可视化工具链,降低学习成本 |
| 🧩 快速接入 |
基于 Vue3、Vite5、Pinia、ElementPlus 等主流前端技术栈,开箱即用。 |
| 类型 |
技术选型 |
描述 |
| 后端框架 |
FastAPI / Uvicorn / Pydantic 2.0 / Alembic |
现代、高性能的异步框架,强制类型约束,数据迁移。 |
| ORM |
SQLAlchemy 2.0 |
强大的 ORM 库。 |
| 定时任务 |
APScheduler |
轻松实现定时任务。 |
| 权限认证 |
PyJWT |
实现 JWT 认证。 |
| 前端框架 |
Uni App / Vue3 / Vite5 / Pinia / TypeScript |
快速开发 Vue3 应用。 |
| UI 库 |
ElementPlus / Wot Design Uni |
快速开发美观的 UI 组件。 |
| 数据库 |
MySQL / MongoDB |
强大的数据库。 |
| 缓存 |
Redis |
强大的缓存数据库。 |
| 文档 |
Swagger / Redoc |
自动生成 API 文档。 |
| 部署 |
Docker / Nginx / Docker Compose |
快速部署项目。 |
| 模块名 |
子模块名 |
描述 |
| 仪表盘 |
工作台 、分析页 |
常用功能入口 |
| 系统管理 |
包含菜单、部门、岗位、角色、用户、日志、配置、公告、字典、任务等子模块 |
系统主功能 |
| 监控管理 |
在线用户、服务器监控、缓存监控 |
系统监控管理功能 |
| 公共管理 |
接口管理、文档管理 |
项目接口文档 |
| 类型 |
技术栈 |
版本 |
| 后端 |
Python |
>=3.10 |
| 后端 |
FastAPI |
0.109 |
| 前端 |
Node.js |
>= 20.0(推荐使用最新版) |
| 前端 |
npm |
16.14 |
| 前端 |
Vue3 |
3.3 |
| Web UI |
ElementPlus |
2.10.4 |
| 移动端 |
Uni App |
3.0.0 |
| App UI |
Wot Design Uni |
1.9.1 |
| 数据库 |
MySQL |
8.0 (推荐使用最新版) |
| 中间件 |
Redis |
7.0 (推荐使用最新版) |
# 克隆代码到本地
git clone https://gitee.com/tao__tao/fastapi_vue3_admin.git
或
git clone https://github.com/1014TaoTao/fastapi_vue3_admin.git
# 进入后端工程目录
cd backend
# 安装依赖
pip3 install -r requirements.txt
# 启动后端服务
python3 main.py run
或
python3 main.py run--env=dev
# 生成迁移文件
python3 main.py revision "初始化迁移" --env=dev(不加默认为dev)
# 应用迁移
python3 main.py upgrade --env=dev(不加默认为dev)
# 进入前端工程目录
cd frontend
# 安装依赖
pnpm install
# 启动前端服务
pnpm run dev
# 构建前端, 生成 `frontend/dist` 目录
pnpm run build
# 进入前端工程目录
cd fastapp
# 安装依赖
pnpm install
# 启动前端服务
pnpm run dev:h5
# 构建前端, 生成 `frontend/dist/build/h5` 目录
pnpm run build:h5
# 进入前端工程目录
cd fastdocs
# 安装依赖
pnpm install
# 运行文档工程
pnpm run docs:dev
# 构建文档工程, 生成 `fastdocs/dist` 目录
pnpm run docs:build
# 复制脚本 `fastapi_vue3_amdin/deploy.sh` 脚本文件到服务器, 并赋予执行权限
chmod +x deploy.sh
# 执行脚本
./deploy.sh
# 查看镜像:
docsker images -a
# 查看容器:
docsker compose ps
# 查看日志
docker logs -f <容器名>
# 服务停止
docsker compose down
# 删除镜像
docker rmi <镜像名>
# 删除容器
docker rm <容器名>
# 后端配置文件目录
fastapi_vue3_amdin/backend/env/.env.prod.py
# 前端配置文件目录
fastapi_vue3_amdin/frontend/vite.config.ts
和
fastapi_vue3_amdin/frontend/.env.production
# 部署文件目录
fastapi_vue3_amdin/docker-compose.yaml
和
fastapi_vue3_amdin/devops/devops/nginx/nginx.conf
- 编写实体类层:在
backend/app/api/v1/models/demo/example_model.py 中创建 example 的 ORM 模型(对应 Spring Boot 中的实体类层)
- 编写数据模型层:在
backend/app/api/v1/schemas/demo/example_schema.py 中创建 example 数据模型(对应 Spring Boot 中的 DTO 层)
- 编写查询参数模型层:在
backend/app/api/v1/params/demo/example_param.py 中创建 example 的查询参数模型(对应 Spring Boot 中的 DTO 层)
- 编写持久化层:在
backend/app/api/v1/cruds/demo/example_crud.py 中创建 example 数据层(对应 Spring Boot 中的 Mapper 或 DAO 层)
- 编写业务层:在
backend/app/api/v1/services/demo/example_service.py 中创建 example 数据层(对应 Spring Boot 中的 Service 层)
- 编写接口层:在
backend/app/api/v1/controllers/demo/example_controller.py 中创建 example 数据层(对应 Spring Boot 中的 Controller 层)
- 注册后端路由:在
backend/app/api/v1/urls/demo_url.py 中注册 example 路由
- 注册路由到 FastAPI 服务中:在
backend/plugin/init_app.py 中注册路由
- 将 demo 模块添加至系统初始化脚本:在
backend/app/scripts/initialize.py 中添加(如果需要可以把 demo 的菜单权限,配置到 backend/app/scripts/data/system_menu.json 和 backend/app/scripts/data/system_role_menus.json 或从前端页面菜单中新增)
- 将 demo 模块添加至数据库迁移脚本中:在
backend/app/alembic/env.py 中添加
- 前端接入后端接口地址:在
frontend/src/api/demo/example.ts 中配置
- 编写前端页面:在
frontend/src/views/demo/example/index.vue 中编写
- 移动端接入后端接口地址:在
fastapp/src/api 中编写
- 编写移动端页面:在
fastapp/src/pages 中编写
更多详情请查看 官方文档
感谢以下项目的贡献和支持,使本项目得以顺利完成:
如果你喜欢这个项目,请给我一个 ⭐️ Star 支持一下吧!非常感谢!
Stargazers over time
