- JWT 认证 + Refresh Token 无感刷新
- RBAC 角色权限控制
- 菜单/按钮/API 级别权限
- 登录日志 & 登录安全
- 用户 CRUD + 批量操作
- 角色分配
- 部门归属
- 密码重置
- 部门树形结构
- 角色管理 + 权限分配
- 菜单管理(树形)
- 实时数据统计
- 登录趋势图
- 用户增长图
- 快捷操作入口
- 操作日志(自动记录)
- 登录日志
- 日志清空
- 文件管理(上传/删除)
- 通知公告(发布/管理)
- 系统配置(站点名称、主题色等)
- Vue 3 + Composition API + TypeScript
- Element Plus 组件库
- Pinia 状态管理(持久化)
- Vue Router 路由守卫
- ECharts 图表
- 响应式布局 + 侧边栏折叠
- 暗黑模式支持
- NProgress 进度条
- FastAPI + 异步
- SQLModel ORM
- Alembic 数据库迁移
- Swagger 自动 API 文档
- WebSocket 实时通信
- 文件上传
- 中间件(CORS、日志)
- Node.js >= 20
- Python >= 3.11
- Docker(可选)
git clone https://github.com/Ancoren/fullstack-system.git
cd fullstack-system
docker compose up -d --build后端:
cd backend
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
pip install -r requirements.txt
python seed.py # 初始化数据
uvicorn app.main:app --reload前端:
cd frontend
npm install
npm run dev- 用户名:
admin - 密码:
admin123
┌────────────────────────────────────────────────────────┐
│ Vue 3 Frontend │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────────┐ │
│ │Router│ │ Pinia│ │ Axios│ │ECharts│ │ElementPlus│ │
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────────┘ │
└────────────────────────┬───────────────────────────────┘
│ HTTP / WebSocket
┌────────────────────────▼───────────────────────────────┐
│ FastAPI Backend │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────────┐ │
│ │ Auth │ │ CRUD │ │ Logs │ │ WebSocket │ │
│ │ JWT │ │ Router │ │Middleware│ │ Manager │ │
│ └────────┘ └────────┘ └────────┘ └────────────┘ │
│ ┌──────────────────────────────────────────────┐ │
│ │ SQLModel + Alembic │ │
│ └──────────────────────────────────────────────┘ │
└────────────────────────┬───────────────────────────────┘
│
┌────────────────────────▼───────────────────────────────┐
│ SQLite / PostgreSQL │
└────────────────────────────────────────────────────────┘
fullstack-system/
├── docker-compose.yml
├── backend/
│ ├── Dockerfile
│ ├── requirements.txt
│ ├── seed.py # 初始化数据
│ └── app/
│ ├── main.py # FastAPI 入口
│ ├── core/
│ │ ├── config.py # 配置
│ │ ├── database.py # 数据库
│ │ └── security.py # JWT & 密码
│ ├── models/models.py # 数据模型
│ ├── schemas/schemas.py # 请求/响应模型
│ ├── deps/deps.py # 依赖注入
│ └── api/ # 路由
│ ├── auth.py # 认证
│ ├── users.py # 用户
│ ├── roles.py # 角色
│ ├── permissions.py # 权限
│ ├── departments.py # 部门
│ ├── logs.py # 日志
│ ├── dashboard.py # 仪表盘
│ ├── files.py # 文件
│ ├── notifications.py # 通知
│ └── settings.py # 配置
└── frontend/
├── Dockerfile
├── nginx.conf
├── package.json
├── vite.config.ts
└── src/
├── main.ts
├── App.vue
├── api/ # API 封装
├── router/ # 路由
├── stores/ # Pinia 状态
├── styles/ # 样式
├── components/layout/ # 布局组件
└── views/ # 页面
├── login/ # 登录
├── dashboard/ # 仪表盘
├── system/ # 系统管理
├── monitor/ # 系统监控
└── tool/ # 系统工具
启动后端后访问:
- Swagger UI: http://localhost:8000/docs
- ReDoc: http://localhost:8000/redoc
| 模块 | 端点 | 说明 |
|---|---|---|
| 认证 | POST /api/auth/login |
登录 |
| 认证 | POST /api/auth/register |
注册 |
| 认证 | GET /api/auth/me |
当前用户 |
| 用户 | GET /api/users |
用户列表 |
| 用户 | POST /api/users |
创建用户 |
| 角色 | GET /api/roles |
角色列表 |
| 权限 | GET /api/permissions/tree |
权限树 |
| 部门 | GET /api/departments/tree |
部门树 |
| 日志 | GET /api/logs/operations |
操作日志 |
| 仪表盘 | GET /api/dashboard/stats |
统计数据 |
| 文件 | POST /api/files/upload |
上传文件 |
| 通知 | GET /api/notifications |
通知列表 |
| 配置 | GET /api/settings |
系统配置 |
- 在
backend/app/api/创建路由文件 - 在
frontend/src/views/创建页面组件 - 在
frontend/src/router/index.ts添加路由 - 在
frontend/src/api/index.ts添加 API 调用
- 在数据库
permissions表添加记录 - 分配给对应角色
- 前端通过
userStore判断权限
默认使用 SQLite,切换到 PostgreSQL:
- 取消
docker-compose.yml中 postgres 注释 - 修改
DATABASE_URL:DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/fullstack requirements.txt添加asyncpg
MIT