FastAPI + Vue User Management Demo
Complete user management system built with FastAPI backend and Vue frontend
Click to view larger
1 / 5
项目简介
这是一个现代化的前后端分离用户管理系统，后端采用高性能的 FastAPI 框架，前端使用 Vue.js 构建单页应用。系统实现了完整的用户管理功能，是学习现代 Web 开发的绝佳示例。
系统架构
┌─────────────────────────────────────────────────────────────┐
│ 前端 (Vue 3) │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 用户登录 │ │ 用户注册 │ │ 数据展示 │ │ 权限管理 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────┘
│
HTTP/JSON
│
┌─────────────────────────────────────────────────────────────┐
│ 后端 (FastAPI) │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 认证 API │ │ 用户 CRUD │ │ 数据验证 │ │ 错误处理 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────────────────────────────────────────────────────┐
│ 数据库 (SQL) │
└─────────────────────────────────────────────────────────────┘
技术栈
后端框架
- FastAPI - 现代高性能 Python Web 框架
- Pydantic - 数据验证
- SQLAlchemy - ORM
- JWT - 身份认证
前端框架
- Vue 3 - 渐进式 JavaScript 框架
- Vue Router - 路由管理
- Pinia/Axios - 状态管理/HTTP 请求
- Element Plus - UI 组件库
核心功能
1. 用户认证
- JWT Token 认证
- 登录/注册
- Token 自动刷新
- 路由守卫
2. 用户管理
- 用户信息 CRUD
- 分页查询
- 搜索过滤
- 批量操作
3. 权限控制
- 基于角色的权限管理
- API 权限验证
- 前端权限指令
项目特点
- 前后端完全分离
- RESTful API 设计
- 自动 API 文档 (Swagger UI)
- 类型提示和验证
- 高性能异步处理
在线演示
访问 在线演示 查看项目效果。
源代码
查看源代码：Ktovoz/demo-fastapi