# AdminUniappManage **Repository Path**: xiaocai2021/admin-uniapp-manage ## Basic Information - **Project Name**: AdminUniappManage - **Description**: AdminUniappManage包含vue管理后台和uniapp项目，以及spring boot项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-05-28 - **Last Updated**: 2026-02-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 项目简介 基于[vue3-element-admin-js](https://gitee.com/youlaiorg/vue3-element-admin-js)开发 [vue3-element-admin-js](https://gitee.com/xiaocai2021/admin-uniapp-manage) 基于 Vue3、Vite、JavaScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。 [vue-uniapp-template](https://gitee.com/xiaocai2021/admin-uniapp-manage) 基于 uni-app + Vue 3 + TypeScript 移动端跨平台开发模板，集成了 ESLint、Prettier、Stylelint、Husky 和 Commitlint 等工具，确保代码规范与质量。 [youlai-boot](https://gitee.com/xiaocai2021/admin-uniapp-manage)基于 JDK 17、Spring Boot 3、Spring Security 6、JWT、Redis、Mybatis-Plus、Vue 3、Element-Plus 构建的前后端分离单体权限管理系统。 [Mybatis-Flex 版本](https://gitee.com/youlaiorg/youlai-boot-flex) ## 项目特色 ### vue3-admin - **数据交互**： 支持 `Mock` 数据和[线上接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5)。 - **系统功能：** 提供用户管理、角色管理、菜单管理、部门管理、字典管理等功能模块。 - **权限管理：** 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。 - **基础设施：** 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。 ### boot - **🚀 开发框架**: 使用 Spring Boot 3 和 Vue 3，以及 Element-Plus 等主流技术栈。 - **🔐 安全认证**: 基于 Spring Security 6 原生架构，集成 JWT 令牌自动续期（无状态）和 Redis 会话多端互斥管理（实时强制离线）双重认证机制，构建企业级身份安全中枢。 - **🔑 权限管理**: 基于 RBAC 模型，实现细粒度的权限控制，涵盖接口方法和按钮级别。 - **🛠️ 功能模块**: 包括用户管理、角色管理、菜单管理、部门管理、字典管理等功能。 ## 📁 boot项目目录
目录结构
``` youlai-boot ├── docker # Docker 目录 │ ├── docker-compose.yml # docker-compose 脚本 ├── sql # SQL脚本 │ ├── mysql # MySQL 脚本 ├── src # 源码目录 │ ├── common # 公共模块 │ │ ├── annotation # 注解定义 │ │ ├── base # 基础类 │ │ ├── constant # 常量 │ │ ├── enums # 枚举类型 │ │ ├── exception # 异常处理 │ │ ├── model # 数据模型 │ │ ├── result # 结果封装 │ │ └── util # 工具类 │ ├── config # 自动装配配置 │ │ └── property # 配置属性目录 │ ├── core # 核心功能 │ │ ├── aspect # 切面(日志、防重提交) │ │ ├── filter # 过滤器(请求日志、限流) │ │ ├── handler # 处理器(数据权限、数据填充) │ │ └── security # Spring Security 安全模块 │ ├── modules # 业务模块 │ │ ├── member # 会员模块【业务模块演示】 │ │ ├── order # 订单模块【业务模块演示】 │ │ ├── product # 商品模块【业务模块演示】 │ ├── shared # 共享模块 │ │ ├── auth # 认证模块 │ │ ├── file # 文件模块 │ │ ├── codegen # 代码生成模块 │ │ ├── mail # 邮件模块 │ │ ├── sms # 短信模块 │ │ └── websocket # WebSocket 模块 │ ├── system # 系统模块 │ │ ├── controller # 控制层 │ │ ├── converter # MapStruct 转换器 │ │ ├── event # 事件处理 │ │ ├── handler # 处理器 │ │ ├── listener # 监听器 │ │ ├── model # 模型层 │ │ │ ├── bo # 业务对象 │ │ │ ├── dto # 数据传输对象 │ │ │ ├── entity # 实体对象 │ │ │ ├── form # 表单对象 │ │ │ ├── query # 查询参数对象 │ │ │ └── vo # 视图对象 │ │ ├── mapper # 数据库访问层 │ │ └── service # 业务逻辑层 │ └── YouLaiBootApplication # 启动类 └── end ```
## vue-uniapp项目启动 安装依赖 ``` pnpm install ``` h5启动 ``` pnpm run dev:h5 ``` 访问 [http://localhost:4096](http://localhost:4096) ## vue3-admin项目启动 - **环境准备** | 环境类型 | 版本要求 | 下载链接 | |----------------|-----------------------------|-----------------------------| | **开发工具** | Visual Studio Code (最新版) | [官方下载](https://code.visualstudio.com/Download) | | **运行环境** | Node.js 18.x (推荐18.16.1) | [中文镜像](https://npmmirror.com/mirrors/node/v18.16.1/) | > ⚠️ 注意：Node.js 20.6.0版本存在兼容性问题，请勿使用 - **快速开始** ```bash # 克隆代码 git clone https://gitee.com/youlaiorg/vue3-element-admin.git # 切换目录 cd vue3-element-admin-js # 安装 pnpm npm install pnpm -g # 设置镜像源(可忽略) pnpm config set registry https://registry.npmmirror.com # 安装依赖 pnpm install # 启动运行 pnpm run dev ``` ## 🚀 boot项目启动 📚 完整流程参考: [项目启动](https://www.youlai.tech/youlai-boot/1.%E9%A1%B9%E7%9B%AE%E5%90%AF%E5%8A%A8/) 1. **克隆项目** ```bash git clone https://gitee.com/youlaiorg/youlai-boot.git ``` 2. **数据库初始化** 执行 [youlai_boot.sql](sql/mysql/youlai_boot.sql) 脚本完成数据库创建、表结构和基础数据的初始化。 3. **修改配置** 默认连接`有来`线上 MySQL/Redis（仅读权限），本地开发时请修改 [application-dev.yml](src/main/resources/application-dev.yml) 中的 MySQL 和 Redis 连接信息。 4. **启动项目** 执行 [YoulaiBootApplication.java](src/main/java/com/youlai/boot/YoulaiBootApplication.java) 的 main 方法完成后端项目启动； 访问接口文档地址 [http://localhost:8989/doc.html](http://localhost:8989/doc.html) 验证项目启动是否成功。 ## 项目部署 执行 `pnpm run build` 命令后，项目将被打包并生成 `dist` 目录。接下来，将 `dist` 目录下的文件上传到服务器 `/usr/share/nginx/html` 目录下，并配置 Nginx 进行反向代理。 ```bash pnpm run build ``` 以下是 Nginx 的配置示例： ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } # 反向代理配置 location /prod-api/ { # 请将 api.youlai.tech 替换为您的后端 API 地址，并注意保留后面的斜杠 / proxy_pass http://api.youlai.tech/; } } ``` 更多详细信息，请参考这篇文章：[Nginx 安装和配置](https://blog.csdn.net/u013737132/article/details/145667694)。 ## 本地Mock 项目同时支持在线和本地 Mock 接口，默认使用线上接口，如需替换为 Mock 接口，修改文件 `.env.development` 的 `VITE_MOCK_DEV_SERVER` 为 `true` **即可**。 ## 后端接口 > 如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。 1. 获取基于 `Java` 和 `SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码。 2. 根据后端工程的说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动。 3. 修改 `.env.development` 文件中的 `VITE_APP_API_URL` 的值，将其从 https://api.youlai.tech 更改为 http://localhost:8989 即可。