跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
|注册
博客列表

目录

  1. Mars-Admin 企业级管理系统
  2. ✨ 项目特色
  3. 🏗️ 系统架构
  4. 整体架构
  5. 技术架构图
  6. 🎯 功能模块
  7. 🖥️ Web 管理端功能
  8. 🔐 权限管理
  9. 🛠️ 系统管理
  10. 📊 监控中心
  11. 📁 文件管理
  12. 📱 移动端功能 (UniApp)
  13. 🏠 首页模块
  14. 👥 组织架构
  15. 📬 消息中心
  16. 👤 个人中心
  17. 🎪 任务调度 (Snail-Job)
  18. 📋 任务管理
  19. 📊 监控告警
  20. 🛠️ 技术栈
  21. 后端技术栈
  22. 前端技术栈
  23. 移动端技术栈
  24. 📦 项目结构
  25. 🚀 快速开始
  26. 环境要求
  27. 🔧 后端启动
  28. mars-admin/src/main/resources/application-dev.yml
  29. 🖥️ Web 管理端启动
  30. 📱 移动端启动
  31. 🎪 任务调度启动
  32. 默认账号
  33. 🎨 界面展示
  34. Web 管理端界面
  35. 移动端界面
  36. 🔧 开发指南
  37. 后端开发
  38. 1. 新增模块
  39. 2. 权限控制
  40. 3. SQL 监控使用
  41. 前端开发
  42. 1. 新增页面
  43. 2. API 调用
  44. 移动端开发
  45. 1. 新增页面
  46. 2. 页面配置
  47. 📊 系统监控
  48. SQL 监控面板
  49. 系统监控
  50. 缓存监控
  51. 🔒 安全特性
  52. 认证机制
  53. 权限控制
  54. 安全防护
  55. 📈 性能优化
  56. 后端优化
  57. 前端优化
  58. 移动端优化
  59. 🐛 常见问题
  60. 启动相关
  61. 权限相关
  62. 移动端相关
  63. 部署相关
JavaSaaSWeChat大前端java

Mars-Admin 基于 Spring Boot 3 + Vue 3 + UniApp 的管理系统

Mars-Admin 是一套基于 Spring Boot 3、Vue 3 和 UniApp 构建的现代化企业管理平台。系统采用前后端分离架构，提供完整的权限管理、用户管理、SQL 监控及分布式任务调度功能。支持 Web 管理端、移动端小程序及静态页面三端统一，具备 Sa-Token 认证、RBAC 模型及多端部署能力。文档包含环境要求、启动步骤、开发指南及常见问题解答，适合中小企业快速开发使用。

HadoopMan发布于 2026/3/27更新于 2026/4/165 浏览
Mars-Admin 基于 Spring Boot 3 + Vue 3 + UniApp 的管理系统

Mars-Admin 企业级管理系统

一套基于 Spring Boot 3 + Vue 3 + UniApp 的现代化企业管理平台，采用前后端分离架构，提供完整的权限管理、用户管理、移动端支持等功能。

✨ 项目特色

  • 全栈解决方案：后端 API + Web 管理端 + 移动端小程序，三端统一
  • 技术前沿：基于 Spring Boot 3 + Vue 3 + UniApp 最新技术栈
  • 现代化 UI：Web 端基于 Ant Design Vue 4，移动端采用毛玻璃设计风格
  • 安全可靠：Sa-Token 权限认证，Redis 会话管理，完善的 RBAC 权限模型
  • SQL 监控：彩色 SQL 日志，性能监控，慢 SQL 检测，实时监控系统
  • 开发友好：代码规范，注释完整，易于二次开发
  • 多端支持：支持微信小程序、H5、App 等多平台部署
  • 任务调度：集成 Snail-Job 分布式任务调度平台

🏗️ 系统架构

整体架构
mars-admin/ # 后端 API 服务 (Spring Boot 3)
mars-admin-ui/ # Web 管理端 (Vue 3 + Ant Design Vue)
mars-admin-uniapp/ # 移动端小程序 (UniApp)
mars-admin-web/ # 静态 Web 页面
snail-job/ # 分布式任务调度平台
docs/ # 项目文档
upload/ # 文件上传目录
技术架构图
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 移动端 UniApp   │ │ Web 管理端      │ │ 静态 Web 页面   │
│                 │ │ (Vue 3)         │ │                 │
│ • 微信小程序    │ │ • Ant Design    │ │ • 企业官网      │
│ • 支付宝小程序  │ │ • TypeScript    │ │ • 产品展示      │
│ • H5/App        │ │ • Vite + UnoCSS │ │ • 在线体验      │
└─────────────────┘ └─────────────────┘ └─────────────────┘
          │                     │                     │
          └─────────────────────┼─────────────────────┘
                                │
                  ┌─────────────────┐
                  │ 后端 API 服务   │
                  │ (Spring Boot 3) │
                  │                 │
                  │ • RESTful API   │
                  │ • Sa-Token 认证 │
                  │ • MyBatis-Flex  │
                  │ • Redis 缓存    │
                  └─────────────────┘
                                │
                  ┌─────────────────┐
                  │ 数据存储层      │
                  │                 │
                  │ • MySQL 8.0+    │
                  │ • Redis 7.0+    │
                  │ • 文件存储      │
                  └─────────────────┘

🎯 功能模块

🖥️ Web 管理端功能
🔐 权限管理
  • 用户管理：用户增删改查、密码重置、状态管理、部门分配
  • 角色管理：角色权限分配、数据权限控制、角色继承
  • 菜单管理：动态菜单、权限控制、图标管理、路由配置
  • 部门管理：树形结构、层级管理、负责人设置
  • 岗位管理：岗位信息维护、权限关联
🛠️ 系统管理
  • 参数配置：系统参数动态配置、环境变量管理
  • 字典管理：数据字典维护、分类管理
  • 操作日志：用户操作记录、审计追踪
  • 登录日志：登录信息记录、安全监控
  • SQL 监控：实时 SQL 监控、性能分析、慢 SQL 检测
📊 监控中心
  • 系统监控：CPU、内存、磁盘使用情况
  • 缓存监控：Redis 缓存状态、命中率统计
  • 在线用户：当前在线用户管理、强制下线
  • 服务监控：接口调用统计、响应时间分析
📁 文件管理
  • 文件上传：支持多种文件格式上传
  • 存储配置：本地存储、云存储配置
  • 文件预览：图片、文档在线预览
  • 批量操作：文件批量上传、删除
📱 移动端功能 (UniApp)
🏠 首页模块
  • 数据看板：企业关键数据统计展示
  • 轮播展示：企业文化、通知公告轮播
  • 快捷入口：常用功能快速访问（考勤、请假、报销等）
  • 公司公告：重要通知、政策发布
  • 工作动态：实时工作状态更新
👥 组织架构
  • 部门树：树形组织架构展示，支持展开收起
  • 员工信息：员工详细信息查看、联系方式
  • 搜索功能：部门、员工快速搜索定位
  • 通讯录：一键拨打电话、发起聊天
📬 消息中心
  • 消息分类：系统消息、工作消息、审批消息、通知消息
  • 未读提醒：红点提醒、数量显示
  • 优先级标签：重要、紧急、普通消息标识
  • 批量操作：全部已读、批量删除、消息搜索
👤 个人中心
  • 个人信息：头像、基本信息展示和编辑
  • 数据统计：个人工作数据、绩效展示
  • 功能菜单：个人设置、消息通知、帮助中心
  • 系统设置：主题切换、语言设置、退出登录
🎪 任务调度 (Snail-Job)
📋 任务管理
  • 任务创建：支持多种任务类型创建
  • 任务调度：Cron 表达式、固定频率调度
  • 任务监控：执行状态、成功率统计
  • 任务重试：失败自动重试、重试策略配置
📊 监控告警
  • 执行监控：实时任务执行状态监控
  • 性能分析：任务执行时间、资源消耗分析
  • 告警通知：任务失败、超时告警
  • 日志查看：详细执行日志、错误追踪

🛠️ 技术栈

后端技术栈
技术版本说明
Spring Boot3.0.5应用框架
Java17开发语言
MyBatis-Flex1.10.9ORM 框架
Sa-Token1.38.0权限认证
MySQL8.x数据库
Redis7.x缓存数据库
Knife4j4.4.0API 文档
FastJSON22.0.43JSON 处理
HikariCP-数据库连接池
Druid1.2.23数据源监控
Hutool5.8.20Java 工具库
Snail-Job1.5.0分布式任务调度
前端技术栈
技术版本说明
Vue3.5.13前端框架
TypeScript5.7.3开发语言
Vite6.1.0构建工具
Ant Design Vue4.2.6UI 组件库
Pinia3.0.0状态管理
Vue Router4.5.0路由管理
UnoCSS65.4.3原子化 CSS
ECharts5.6.0图表库
移动端技术栈
技术版本说明
UniApp2.0跨平台框架
Vue.js2.x前端框架
CSS3-样式语言
JavaScriptES6+开发语言
毛玻璃设计-现代化 UI 风格

📦 项目结构

mars-admin/
├── mars-admin/ # 后端 API 服务
│   ├── src/main/java/com/mars/admin/
│   │   ├── controller/ # 控制器层
│   │   ├── service/ # 服务层
│   │   ├── mapper/ # 数据访问层
│   │   ├── entity/ # 实体类
│   │   ├── framework/ # 框架配置
│   │   └── common/ # 公共模块
│   ├── src/main/resources/
│   │   ├── mapper/ # MyBatis 映射文件
│   │   ├── application.yml # 主配置文件
│   │   └── application-dev.yml # 开发环境配置
│   └── doc/mars_admin.sql # 数据库脚本
├── mars-admin-ui/ # Web 管理端
│   ├── src/
│   │   ├── views/ # 页面组件
│   │   ├── components/ # 公共组件
│   │   ├── layouts/ # 布局组件
│   │   ├── router/ # 路由配置
│   │   ├── store/ # 状态管理
│   │   ├── service/ # API 服务
│   │   └── utils/ # 工具函数
│   └── packages/ # 自定义包
├── mars-admin-uniapp/ # 移动端小程序
│   ├── pages/ # 页面文件
│   ├── static/ # 静态资源
│   ├── utils/ # 工具函数
│   ├── App.vue # 应用入口
│   ├── pages.json # 页面配置
│   └── manifest.json # 应用配置
├── mars-admin-web/ # 静态 Web 页面
│   ├── index.html # 企业官网
│   ├── nginx.conf # Nginx 配置
│   └── image/ # 静态图片
├── snail-job/ # 分布式任务调度
│   ├── snail-job-server/ # 调度服务端
│   ├── snail-job-client/ # 客户端 SDK
│   ├── snail-job-admin/ # 管理界面
│   └── doc/ # 相关文档
├── docs/ # 项目文档
│   ├── guide/ # 使用指南
│   ├── features/ # 功能介绍
│   ├── advanced/ # 高级特性
│   └── backend/ # 后端文档
└── upload/

🚀 快速开始

环境要求
  • Java: 17+
  • Node.js: 18.12.0+
  • MySQL: 8.0+
  • Redis: 7.0+
  • Maven: 3.6+
  • pnpm: 8.7.0+
  • HBuilderX: 3.0+ (移动端开发)
🔧 后端启动
  1. 克隆项目
git clone https://github.com/your-username/mars-admin.git
cd mars-admin
  1. 数据库配置
-- 创建数据库
CREATE DATABASE mars_admin CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 导入数据
mysql -u root -p mars_admin < mars-admin/doc/mars_admin.sql
  1. 修改配置
# mars-admin/src/main/resources/application-dev.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mars_admin?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&allowPublicKeyRetrieval=true
    username: root
    password: your_password
  data:
    redis:
      host: localhost
      port: 6379
      password: your_redis_password

Maven 构建失败是因为找到了两个可能的主类。执行 mvn 命令之前，先得设置下 mainClass——

<!-- Spring Boot 打包插件 -->
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
        <excludes>
            <exclude>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
            </exclude>
        </excludes>
        <mainClass>com.mars.admin.MarsAdminApplication</mainClass>
    </configuration>
</plugin>
  1. 启动后端
cd mars-admin
mvn clean install
mvn spring-boot:run
  1. 访问 API 文档
http://localhost:8080/doc.html
🖥️ Web 管理端启动
  1. 安装依赖
cd mars-admin-ui
pnpm install
  1. 启动开发服务器
pnpm dev
  1. 访问管理端
http://localhost:3000
📱 移动端启动
  1. 使用 HBuilderX 打开项目
    • 打开 HBuilderX
    • 文件 -> 打开目录 -> 选择 mars-admin-uniapp 文件夹
  2. 配置后端接口
// mars-admin-uniapp/utils/request.js
const config = {
  baseURL: 'http://localhost:8080', // 修改为你的后端 API 地址
  timeout: 10000
}
  1. 运行项目
    • 点击 HBuilderX 顶部菜单 '运行' -> '运行到小程序模拟器' -> '微信开发者工具'
🎪 任务调度启动
  1. 启动 Snail-Job 服务
cd snail-job
mvn clean install
java -jar snail-job-server/target/snail-job-server.jar
  1. 访问调度管理界面
http://localhost:8081
默认账号
用户名：admin
密码：123456

🎨 界面展示

Web 管理端界面
登录页面首页仪表板
登录页面首页
用户管理角色管理
用户管理角色管理
SQL 监控系统监控
SQL 监控系统监控
移动端界面
首页组织架构消息中心个人中心
首页组织消息个人

🔧 开发指南

后端开发
1. 新增模块
// 1. 创建实体类
@Data
@Table(value = "your_table", onInsert = EntityChangeListener.class, onUpdate = EntityChangeListener.class)
public class YourEntity extends BaseEntity {
    @Id(keyType = KeyType.Auto)
    private Long id;
    // 其他字段...
}

// 2. 创建 Mapper 接口
public interface YourMapper extends BaseMapper<YourEntity> {
    // 自定义方法...
}

// 3. 创建 Service
@Service
public class YourService {
    @Autowired
    private YourMapper yourMapper;
    // 业务方法...
}

// 4. 创建 Controller
@RestController
@RequestMapping("/your-module")
public class YourController {
    @Autowired
    private YourService yourService;
    // 接口方法...
}
2. 权限控制
// 方法级权限控制
@SaCheckPermission("system:user:list")
@GetMapping("/list")
public Result<List<User>> list() {
    // 方法实现...
}

// 角色权限控制
@SaCheckRole("admin")
@PostMapping("/save")
public Result<Void> save(@RequestBody User user) {
    // 方法实现...
}
3. SQL 监控使用

系统内置了彩色 SQL 日志监控，自动记录 SQL 执行情况：

  • ✅ 正常执行（<500ms）- 绿色显示
  • ⚠️ 性能提醒（500-1000ms）- 黄色显示
  • 🐌 慢 SQL 警告（>1000ms）- 红色显示

访问 /sql-log/recent 查看最近 SQL 执行记录。

前端开发
1. 新增页面
<!-- src/views/your-module/index.vue -->
<template>
  <div>
    <a-card title="模块标题">
      <!-- 页面内容 -->
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchYourData } from '@/service/api/your-module';

// 页面逻辑
const dataList = ref([]);
onMounted(() => {
  loadData();
});

const loadData = async () => {
  const { data } = await fetchYourData();
  dataList.value = data;
};
</script>
2. API 调用
// src/service/api/your-module.ts
import { request } from '@sa/axios';

export function fetchYourData() {
  return request.get<YourData[]>('/your-module/list');
}

export function saveYourData(data: YourData) {
  return request.post('/your-module/save', data);
}
移动端开发
1. 新增页面
<!-- pages/your-page/your-page.vue -->
<template>
  <view>
    <view>
      <text>页面标题</text>
    </view>
    <view>
      <!-- 页面内容 -->
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  onLoad() {
    // 页面加载
  },
  methods: {
    // 页面方法
  }
};
</script>
<style>
.container {
  padding: 20rpx;
}
</style>
2. 页面配置
// pages.json
{
  "pages": [
    {
      "path": "pages/your-page/your-page",
      "style": {
        "navigationBarTitleText": "页面标题"
      }
    }
  ]
}

📊 系统监控

SQL 监控面板
  • 实时监控: 访问 /sql-log/recent 查看 SQL 执行日志
  • 性能分析: 自动标识慢 SQL，提供优化建议
  • 统计报表: SQL 执行次数、平均耗时统计
系统监控
  • 服务器状态: CPU、内存、磁盘使用情况
  • JVM 监控: 堆内存、非堆内存、GC 情况
  • 数据库连接: 连接池状态、活跃连接数
缓存监控
  • Redis 状态: 连接状态、内存使用、命中率
  • 缓存统计: 键值数量、过期策略、持久化状态

🔒 安全特性

认证机制
  • Sa-Token: 轻量级权限认证框架
  • Redis 存储: Token 存储，支持分布式
  • 密码加密: BCrypt 加密存储
  • 登录限制: 支持单点登录控制
  • 会话管理: 自动续期、强制下线
权限控制
  • RBAC 模型: 用户 - 角色 - 权限三层模型
  • 数据权限: 支持部门数据权限控制
  • 接口权限: 注解式权限控制
  • 菜单权限: 动态菜单权限
  • 按钮权限: 细粒度按钮权限控制
安全防护
  • XSS 防护: 输入输出过滤
  • CSRF 防护: Token 验证
  • SQL 注入: 参数化查询
  • 接口限流: 防止恶意请求
  • 操作审计: 完整的操作日志记录

📈 性能优化

后端优化
  • 连接池: HikariCP 高性能连接池
  • 缓存策略: Redis 缓存热点数据
  • SQL 优化: MyBatis-Flex 高性能 ORM
  • 异步处理: 异步日志记录
  • 数据库索引: 合理的索引设计
  • 分页查询: 高效的分页实现
前端优化
  • 懒加载: 路由和组件懒加载
  • Tree Shaking: Vite 自动优化
  • CDN 加速: 第三方库 CDN 加速
  • 缓存策略: 浏览器缓存优化
  • 代码分割: 按需加载
  • 图片优化: WebP 格式、懒加载
移动端优化
  • 图片懒加载: 优化图片加载性能
  • 请求缓存: 减少重复网络请求
  • 代码分割: 按需加载页面组件
  • 资源压缩: 压缩图片和代码
  • 本地缓存: 合理使用本地存储

🐛 常见问题

启动相关

Q: 后端启动失败怎么办？ A:

  1. 检查 Java 版本是否为 17+
  2. 检查 MySQL 和 Redis 是否正常运行
  3. 检查配置文件中的数据库连接信息
  4. 查看启动日志，定位具体错误

Q: 前端启动失败怎么办？ A:

  1. 检查 Node.js 版本是否为 18.12.0+
  2. 清除缓存：rm -rf node_modules pnpm-lock.yaml && pnpm install
  3. 检查网络连接，确保能正常下载依赖
  4. 查看控制台错误信息
权限相关

Q: 登录后看不到菜单怎么办？ A:

  1. 检查用户是否分配了正确的角色
  2. 检查角色是否分配了相应的菜单权限
  3. 检查菜单状态是否为"显示"
  4. 清除浏览器缓存，重新登录

Q: 接口返回 403 权限不足？ A:

  1. 检查 Token 是否过期，重新登录
  2. 检查用户角色是否有接口访问权限
  3. 检查 Sa-Token 配置是否正确
  4. 查看后端日志，确认权限检查逻辑
移动端相关

Q: 小程序无法连接后端接口？ A:

  1. 检查小程序是否配置了正确的服务器域名
  2. 确保后端接口支持 HTTPS（生产环境）
  3. 检查跨域配置是否正确
  4. 确认网络请求配置中的 baseURL

Q: 小程序页面显示异常？ A:

  1. 检查页面路径配置是否正确
  2. 确认页面在 pages.json 中已注册
  3. 检查样式兼容性问题
  4. 查看开发者工具控制台错误信息
部署相关

Q: 生产环境部署注意事项？ A:

  1. 修改数据库连接为生产环境配置
  2. 配置 Redis 连接信息
  3. 设置正确的文件上传路径
  4. 配置 Nginx 反向代理
  5. 开启 HTTPS 证书
  6. 设置防火墙规则
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog

更多推荐文章

查看全部
  • 基于 Vue 和 Python 的校园互助交友平台设计与实现
  • OpenClaw 消息路由机制详解
  • 基于 PySide6 实现 YOLOv8 目标检测可视化 GUI 界面
  • Gitee 代码上传完整教程：从初始化到推送
  • Parsera 异步编程教程：提升网页抓取效率
  • VSCode 插件 Git Graph 可视化 Git 提交记录教程
  • pure-python-adb 纯 Python 实现的 Android 调试桥使用指南
  • Renderless 架构与 WebAgent：OpenTiny DialogBox resizable 功能实战
  • VS Code 远程连接服务器后 GitHub Copilot 无法使用解决方案
  • OpenClaw Windows 部署：Node.js 22+Git+Kimi+ 飞书
  • 国内主流 AI 编程助手订阅套餐横向评测与选型指南
  • Meta-Llama-3-8B-Instruct 部署避坑指南：vLLM 多卡配置详解
  • ClawdBot (OpenClaw) 在 Discord 上部署 AI 机器人指南
  • ClawdBot (OpenClaw) Discord 机器人部署指南
  • UNet WebUI 镜像 AI 抠图入门教程
  • VS Code 远程连接服务器后 Github Copilot 无法使用修复方案
  • OpenClaw 框架下 Discord AI 机器人部署指南
  • ClawdBot (OpenClaw) 结合 Discord 机器人部署与配置指南
  • OpenClaw Discord 机器人部署指南
  • VS Code 远程连接服务器后 GitHub Copilot 无法使用

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

# 文件上传目录