# FlexAdmin

**Repository Path**: zimuo/flex-admin

## Basic Information

- **Project Name**: FlexAdmin
- **Description**: 灵活的管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2025-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 现代化后台管理系统

# 🎆 现代化后台管理系统

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D?logo=vue.js)](https://vuejs.org/)
[![Flask](https://img.shields.io/badge/Flask-2.3.x-000000?logo=flask)](https://flask.palletsprojects.com/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.x-409EFF?logo=element)](https://element-plus.org/)
[![Python](https://img.shields.io/badge/Python-3.8+-3776AB?logo=python)](https://www.python.org/)

这是一个使用 **Vue3 + Flask** 开发的现代化开源后台管理系统，具有完整的用户管理、角色管理和菜单管理功能。采用前后端分离架构，界面美观，功能完善，可以作为学习或商业项目的基础脚手架。

## 🎆 项目特色

- ✨ **现代化技术栈**: Vue3 + TypeScript + Flask + SQLite
- 📱 **响应式设计**: 适配电脑、平板、手机等设备
- 🔐 **安全可靠**: JWT 认证、密码加密、权限控制
- 🎛️ **灵活可扩展**: 二级菜单结构，易于添加新功能
- 🚀 **开箱即用**: 数分钟完成部署，支持 Docker
- 📚 **代码规范**: 清晰的项目结构，丰富的注释文档

## 项目结构

```
q/
├── frontend/          # 前端Vue3项目
│   ├── src/
│   │   ├── components/    # 组件
│   │   │   └── Layout.vue # 主布局组件
│   │   ├── views/         # 页面
│   │   │   ├── LoginView.vue        # 登录页面
│   │   │   ├── Dashboard.vue        # 仪表盘
│   │   │   ├── UserManagement.vue   # 用户管理
│   │   │   ├── RoleManagement.vue   # 角色管理
│   │   │   └── MenuManagement.vue   # 菜单管理
│   │   ├── stores/        # 状态管理
│   │   │   └── auth.js    # 认证状态
│   │   └── router/        # 路由配置
│   └── package.json
└── backend/           # 后端Flask项目
    ├── app.py             # 主应用文件
    ├── auth_routes.py     # 认证路由
    ├── user_routes.py     # 用户管理路由
    ├── role_routes.py     # 角色管理路由
    ├── menu_routes.py     # 菜单管理路由
    ├── requirements.txt   # Python依赖
    └── admin_system.db    # SQLite数据库（运行后自动生成）
```

## 功能特性

### 🔐 用户认证

- 用户登录/注册
- JWT Token 认证
- 路由权限守卫
- 自动登录状态维护

### 👥 用户管理

- 用户列表查看（分页、搜索）
- 添加/编辑/删除用户
- 用户状态管理（启用/禁用）
- 角色分配

### 🛡️ 角色管理

- 角色列表管理
- 角色权限配置（菜单权限）
- 角色与菜单的多对多关联
- 权限树形展示

### 🎛️ 菜单管理

- 二级菜单结构设计
- 支持多级菜单
- 菜单图标管理
- 动态菜单渲染
- 业务模块分类清晰

#### 菜单结构

- **📊 仪表盘** - 系统总览
- **⚙️ 系统管理** - 用户、角色、菜单、系统配置
- **💼 业务管理** - 商品、订单、客户、库存管理
- **📈 数据统计** - 销售、用户、订单统计分析

### 🎨 界面特性

- 响应式设计
- 侧边栏折叠/展开
- 面包屑导航
- 现代化 UI（Element Plus）
- 深色侧边栏

## 技术栈

### 前端

- **Vue 3** - 渐进式 JavaScript 框架
- **Element Plus** - Vue 3 UI 组件库
- **Vue Router** - 路由管理
- **Pinia** - 状态管理
- **Axios** - HTTP 客户端
- **Vite** - 构建工具

### 后端

- **Flask** - Python Web 框架
- **Flask-SQLAlchemy** - ORM
- **Flask-JWT-Extended** - JWT 认证
- **Flask-CORS** - 跨域支持
- **SQLite** - 轻量级数据库
- **Bcrypt** - 密码加密

## 快速开始

### 1. 启动后端服务

```bash
cd backend
pip install -r requirements.txt
python app.py
```

后端服务将运行在 http://127.0.0.1:5001

### 2. 启动前端服务

```bash
cd frontend
npm install
npm run dev
```

前端服务将运行在 http://localhost:5173

### 3. 默认账号

- **用户名**: admin
- **密码**: admin123

## API 接口

### 认证接口

- `POST /api/auth/login` - 用户登录
- `POST /api/auth/register` - 用户注册
- `GET /api/auth/me` - 获取当前用户信息

### 用户管理接口

- `GET /api/users` - 获取用户列表
- `POST /api/users` - 创建用户
- `PUT /api/users/{id}` - 更新用户
- `DELETE /api/users/{id}` - 删除用户

### 角色管理接口

- `GET /api/roles` - 获取角色列表
- `GET /api/roles/all` - 获取所有角色（用于下拉选择）
- `POST /api/roles` - 创建角色
- `GET /api/roles/{id}` - 获取角色详情
- `PUT /api/roles/{id}` - 更新角色
- `DELETE /api/roles/{id}` - 删除角色

### 菜单管理接口

- `GET /api/menus` - 获取菜单树
- `GET /api/menus/all` - 获取所有菜单（平铺）
- `POST /api/menus` - 创建菜单
- `GET /api/menus/{id}` - 获取菜单详情
- `PUT /api/menus/{id}` - 更新菜单
- `DELETE /api/menus/{id}` - 删除菜单

## 数据库设计

### 用户表 (User)

- id: 主键
- username: 用户名（唯一）
- email: 邮箱（唯一）
- password_hash: 密码哈希
- role_id: 角色 ID（外键）
- is_active: 是否启用
- created_at: 创建时间

### 角色表 (Role)

- id: 主键
- name: 角色名称（唯一）
- description: 描述
- created_at: 创建时间

### 菜单表 (Menu)

- id: 主键
- name: 菜单名称
- path: 路径
- icon: 图标
- parent_id: 父菜单 ID（自引用外键）
- sort_order: 排序
- is_active: 是否启用
- created_at: 创建时间

### 角色菜单关联表 (role_menu)

- role_id: 角色 ID
- menu_id: 菜单 ID

## 开发说明

### 前端开发

- 所有 API 请求都通过 axios 进行，已配置基础 URL 和认证 header
- 使用 Pinia 进行状态管理，认证状态存储在 localStorage 中
- 路由守卫确保只有认证用户可以访问需要权限的页面
- 组件使用 Composition API 编写

### 后端开发

- 使用蓝图模式组织路由
- 所有需要认证的接口都使用@jwt_required()装饰器
- 密码使用 bcrypt 进行哈希存储
- 支持 CORS 跨域请求
- 使用 SQLAlchemy ORM 进行数据库操作

## 部署建议

### 生产环境配置

1. 修改 Flask 的 SECRET_KEY 和 JWT_SECRET_KEY
2. 使用生产级数据库（PostgreSQL/MySQL）
3. 使用 Gunicorn 或 uWSGI 部署 Flask 应用
4. 使用 Nginx 作为反向代理
5. 前端打包后部署到 CDN 或静态文件服务器

### 安全建议

- 定期更换 JWT 密钥
- 实施 API 速率限制
- 添加日志记录和监控
- 使用 HTTPS
- 定期备份数据库

## 许可证

MIT License

## 🎆 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

### 🐛 问题报告

在提交 Issue 之前，请确保：

1. 检查是否已经有相同的问题
2. 提供详细的复现步骤
3. 包含错误日志和截图（如果适用）

### 🚀 功能请求

1. 描述您希望添加的功能
2. 解释为什么需要这个功能
3. 提供可能的实现方案

### 📝 Pull Request

1. Fork 这个仓库
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的修改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

### 📝 代码规范

- 前端代码遵循 Vue 3 Composition API 风格
- 后端代码遵循 PEP 8 Python 编码规范
- 提交信息使用清晰的中文或英文描述
- 新功能需要包含适当的注释和文档

## ⭐ 给个 Star

如果这个项目对您有帮助，请给个 ⭐ Star 支持一下！

## 💬 交流群组

- QQ 群：[123456789]
- 微信群：[扫码进群]
- 邮箱：[your-email@example.com]

## 📜 开源协议

MIT License - 详情请查看 [LICENSE](LICENSE) 文件

---

<div align="center">
  <p>🎆 由 <a href="https://github.com/yourusername">您的用户名</a> 精心打造</p>
  <p>如果这个项目对您有帮助，请考虑给个 ⭐ Star！</p>
</div>