# oak-admin **Repository Path**: tree_boss/oak-admin ## Basic Information - **Project Name**: oak-admin - **Description**: 后台管理系统 - **Primary Language**: Java - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-17 - **Last Updated**: 2025-11-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Oak Admin 管理系统 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) ## 项目简介 Oak Admin是一款基于前后端分离架构的现代化企业级管理系统，旨在为企业提供高效、安全、可扩展的管理解决方案。系统采用最新的技术栈，具备完整的权限管理体系、丰富的数据统计功能和灵活的业务管理模块。 ### 项目目标 - 提供完整的企业级管理系统基础框架 - 实现灵活的权限管理和角色控制 - 支持数据可视化和统计分析 - 采用现代化技术栈，确保系统高性能和可维护性 - 提供友好的用户界面和良好的用户体验 ## 功能特点 ### 系统管理 - **用户管理**：用户信息维护、密码重置、状态管理 - **角色管理**：角色创建、权限分配、角色状态控制 - **权限管理**：基于RBAC的权限控制，支持菜单权限和按钮权限 - **菜单管理**：动态菜单配置、菜单权限关联 ### 数据中心 - **数据统计**：系统数据可视化统计、图表展示 - **日志管理**：操作日志记录、登录日志追踪 ### 个人中心 - **个人信息**：用户信息查看与修改 - **密码修改**：安全密码修改 ### 系统特性 - **主题切换**：支持亮色/暗色主题切换，个性化界面 - **响应式布局**：适配各种屏幕尺寸，移动端友好 - **权限控制**：细粒度权限管理，确保系统安全 - **动态路由**：根据用户权限动态生成菜单和路由 - **JWT认证**：无状态认证，提高系统安全性 - **国际化支持**：预留国际化接口，支持多语言 ## 系统架构 ``` ┌─────────────────────────────────────────────────────────────────┐ │ 前端应用层 │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌────────────────────┐ │ │ │ Vue 3 │ │ Element │ │ Vue │ │ Axios │ │ │ │ │ │ Plus │ │ Router │ │ (HTTP请求) │ │ │ └─────────┘ └─────────┘ └─────────┘ └────────┬───────────┘ │ │ │ │ │ ▼ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Pinia (状态管理) │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ API网关层 │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Spring Boot │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌───────────┐ │ │ │ 用户管理 │ │ 角色管理 │ │ 权限管理 │ │ 菜单管理 │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────┘ └────────────┘ └────────────┘ └───────────┘ │ └─────────────────────────────────────┬─────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 数据持久层 │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ MySQL │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## 技术栈 ### 前端 - **Vue 3** - 渐进式JavaScript框架，采用Composition API - **Element Plus** - 基于Vue 3的桌面端组件库 - **Vue Router 4** - Vue官方路由管理器 - **Pinia 3** - Vue官方状态管理库 - **Vite** - 下一代前端构建工具 - **Axios** - HTTP客户端，用于API请求 - **@element-plus/icons-vue** - Element Plus图标库 ### 后端 - **Java 17** - 编程语言 - **Spring Boot 3** - 企业级Java应用开发框架 - **Spring Security** - 安全框架 - **MyBatis-Plus** - ORM框架 - **Maven** - 项目构建管理工具 - **JWT** - JSON Web Token认证 ### 数据库 - **MySQL 8** - 关系型数据库 ### 开发工具 - **IntelliJ IDEA** - Java开发IDE - **VS Code** - 前端开发IDE - **Postman** - API测试工具 ## 项目结构 ``` oak-admin/ ├── db/ # 数据库脚本 │ └── oak_admin_schema.sql # 数据库初始化脚本 ├── frontend/ # 前端代码 │ ├── .gitignore # Git忽略文件 │ ├── README.md # 前端项目说明 │ ├── index.html # HTML入口文件 │ ├── package-lock.json # npm依赖锁定文件 │ ├── package.json # npm依赖配置 │ ├── src/ │ │ ├── App.vue # 根组件 │ │ ├── api/ # API请求定义 │ │ │ ├── user.js # 用户相关API │ │ │ ├── role.js # 角色相关API │ │ │ └── menu.js # 菜单相关API │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 通用组件 │ │ ├── layout/ # 布局组件 │ │ │ ├── MainLayout.vue # 主布局 │ │ │ ├── Sidebar.vue # 侧边栏 │ │ │ └── Navbar.vue # 导航栏 │ │ ├── main.js # 应用入口文件 │ │ ├── router/ # 路由配置 │ │ │ └── index.js # 路由定义 │ │ ├── store/ # 状态管理 │ │ │ └── index.js # Pinia store │ │ ├── utils/ # 工具函数 │ │ │ ├── request.js # Axios封装 │ │ │ └── common.js # 通用工具 │ │ └── views/ # 页面组件 │ │ ├── home/ # 首页 │ │ ├── system/ # 系统管理 │ │ │ ├── user/ # 用户管理 │ │ │ ├── role/ # 角色管理 │ │ │ └── menu/ # 菜单管理 │ │ └── profile/ # 个人中心 │ └── vite.config.js # Vite配置 ├── src/ # 后端代码 │ └── main/ │ ├── java/ │ │ └── com/ │ │ └── oakadmin/ # 包名 │ │ ├── OakAdminApplication.java # 应用入口 │ │ ├── config/ # 配置类 │ │ ├── controller/ # 控制器 │ │ ├── entity/ # 实体类 │ │ ├── mapper/ # Mapper接口 │ │ ├── service/ # 服务层 │ │ └── utils/ # 工具类 │ └── resources/ │ ├── application.yml # 应用配置 │ └── application-dev.yml # 开发环境配置 ├── .gitignore # Git忽略文件 ├── LICENSE # 许可证文件 ├── README.md # 项目说明 ├── oak-admin.iml # IntelliJ IDEA项目文件 └── pom.xml # Maven配置 ``` ## 安装和运行 ### 1. 数据库准备 1. 创建数据库 ```sql CREATE DATABASE oak_admin CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ``` 2. 导入数据库脚本 ```bash mysql -u root -p oak_admin < db/oak_admin_schema.sql ``` ### 2. 后端运行 1. 进入项目根目录 ```bash cd oak-admin ``` 2. 安装Maven依赖 ```bash mvn install ``` 3. 启动后端服务 ```bash mvn spring-boot:run ``` 或者使用IDE（如IntelliJ IDEA）直接运行 `OakAdminApplication.java` ### 3. 前端运行 1. 进入前端目录 ```bash cd frontend ``` 2. 安装npm依赖 ```bash npm install ``` 3. 启动开发服务器 ```bash npm run dev ``` 4. 访问应用 - 默认访问地址：http://localhost:3000 - 后端API地址：http://localhost:8080 ### 4. 生产环境构建 #### 前端构建 ```bash cd frontend npm run build ``` 构建产物将生成在 `frontend/dist` 目录 #### 后端构建 ```bash mvn clean package -DskipTests ``` 构建产物将生成在 `target` 目录 ## 部署说明 ### 1. 前端部署 1. 构建前端项目 ```bash cd frontend npm run build ``` 2. 将 `dist` 目录部署到Nginx或其他Web服务器 **Nginx配置示例**： ```nginx server { listen 80; server_name your-domain.com; root /path/to/frontend/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` ### 2. 后端部署 1. 构建后端项目 ```bash mvn clean package -DskipTests ``` 2. 运行jar包 ```bash java -jar target/oak-admin-1.0.0.jar ``` ## API文档 系统使用Swagger生成API文档，启动后端服务后可访问： - Swagger UI：http://localhost:8080/swagger-ui.html - API文档JSON：http://localhost:8080/v3/api-docs ## 技术亮点 1. **前后端分离架构**：提高开发效率和系统可维护性 2. **微服务就绪**：模块化设计，便于后续拆分为微服务 3. **安全认证**：基于JWT的无状态认证机制 4. **权限控制**：细粒度的RBAC权限管理体系 5. **响应式设计**：适配各种设备屏幕 6. **数据可视化**：丰富的图表展示功能 7. **代码生成**：支持实体类和基础CRUD代码生成 8. **国际化支持**：预留国际化接口 ## 开发规范 ### 前端开发规范 1. **组件命名**：采用PascalCase命名，如 `UserList.vue` 2. **API请求**：统一在 `src/api` 目录下管理 3. **状态管理**：使用Pinia，按功能模块划分store 4. **代码风格**：使用ESLint和Prettier保持代码风格一致 ### 后端开发规范 1. **包结构**：按功能模块划分，如 `user`, `role`, `menu` 2. **命名规范**： - 类名：PascalCase - 方法名：camelCase - 变量名：camelCase 3. **代码风格**：遵循阿里巴巴Java开发规范 4. **异常处理**：统一异常处理，返回标准化响应 ## 常见问题 ### 1. 数据库连接失败 **解决方案**： - 检查数据库服务是否启动 - 检查数据库连接配置是否正确 - 确保数据库用户有足够权限 ### 2. 前端无法访问后端API **解决方案**： - 检查后端服务是否正常运行 - 检查前端API请求地址配置 - 检查是否存在跨域问题 ### 3. 权限验证失败 **解决方案**： - 检查用户是否有相应权限 - 检查JWT令牌是否过期 - 检查权限配置是否正确 ## 更新日志 ### v1.0.0 (2025-11-01) - 初始版本发布 - 完成用户管理、角色管理、权限管理等核心功能 - 实现主题切换和响应式布局 ## 许可证 MIT License ## 贡献 欢迎提交Issue和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 ## 联系方式 如有问题或建议，欢迎通过以下方式联系： - GitHub Issues：[提交Issue](https://gitee.com/tree_boss/oak-admin/issues) - 邮件：1478168700n@qq.com --- **感谢使用Oak Admin管理系统！** 🚀 ## 开发环境要求 ### 前端 - Node.js >= 16.x - npm >= 8.x - Vue CLI >= 5.x ### 后端 - JDK >= 17 - Maven >= 3.6.x ### 数据库 - MySQL >= 8.0 ## 配置说明 ### 前端配置 **API请求配置**：修改 `frontend/src/utils/request.js` 中的 `baseURL` ```javascript // frontend/src/utils/request.js const service = axios.create({ baseURL: 'http://localhost:8080', // API基础路径 timeout: 10000 }) ``` ### 后端配置 **数据库配置**：修改 `src/main/resources/application-dev.yml` ```yaml # src/main/resources/application-dev.yml spring: datasource: url: jdbc:mysql://localhost:3306/oak_admin?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: 123456 ``` **JWT配置**： ```yaml # JWT配置 jwt: secret: your-secret-key expire: 86400 header: Authorization ```