Skip to content

Ancoren/fullstack-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 FullStack Admin System

基于 Vue 3 + FastAPI 的前后端分离管理系统

Vue FastAPI Element Plus TypeScript Docker


功能特性 · 快速启动 · 系统架构 · API 文档


✨ 功能特性

🔐 认证与权限

  • 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(可选)

方式一: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/              # 系统工具

📖 API 文档

启动后端后访问:

主要 API

模块 端点 说明
认证 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 系统配置

🔧 开发指南

添加新页面

  1. backend/app/api/ 创建路由文件
  2. frontend/src/views/ 创建页面组件
  3. frontend/src/router/index.ts 添加路由
  4. frontend/src/api/index.ts 添加 API 调用

添加新权限

  1. 在数据库 permissions 表添加记录
  2. 分配给对应角色
  3. 前端通过 userStore 判断权限

切换数据库

默认使用 SQLite,切换到 PostgreSQL:

  1. 取消 docker-compose.yml 中 postgres 注释
  2. 修改 DATABASE_URL
    DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/fullstack
    
  3. requirements.txt 添加 asyncpg

📜 License

MIT

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors