# base-ruo-yi-app **Repository Path**: AIResources/base-ruo-yi-app ## Basic Information - **Project Name**: base-ruo-yi-app - **Description**: 小程序 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2026-05-12 - **Last Updated**: 2026-05-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # RuoYi-App 项目分析文档 ## 项目概述 RuoYi-App 是基于 UniApp 框架开发的轻量级移动端解决方案，采用 Vue2/Vuex 技术栈，支持 APP、小程序、H5 多端适配。该项目与 RuoYi-Vue、RuoYi-Cloud 后端系统完美对接，提供完整的移动端应用功能。 ## 技术栈 | 类别 | 技术 | |------|------| | 开发框架 | UniApp (Vue 2) | | 状态管理 | Vuex | | UI组件库 | uni-ui (44个官方组件) | | 路由管理 | UniApp 原生路由 | | HTTP请求 | 自封装 request (基于 uni.request) | | 本地存储 | uni.getStorageSync/setStorageSync | | 代码规范 | SCSS 样式预处理器 | ## 项目架构 ### 整体架构 ``` RuoYi-App/ ├── api/ # API接口层 │ ├── login.js # 登录注册接口 │ └── system/ # 系统管理接口 │ ├── user.js # 用户信息接口 │ └── dict/ # 字典数据接口 ├── components/ # 公共组件 │ └── uni-section/ # 分区组件 ├── pages/ # 页面视图 │ ├── index.vue # 首页 │ ├── login.vue # 登录页 │ ├── register.vue # 注册页 │ ├── work/ # 工作台模块 │ ├── mine/ # 个人中心模块 │ └── common/ # 公共页面 ├── plugins/ # 插件系统 │ ├── index.js # 插件入口 │ ├── auth.js # 权限插件 │ ├── modal.js # 模态框插件 │ └── tab.js # 页签插件 ├── store/ # 状态管理 │ ├── index.js # Store入口 │ ├── getters.js # Getters │ └── modules/ # 模块化Store │ └── user.js # 用户模块 ├── utils/ # 工具函数 │ ├── auth.js # Token管理 │ ├── request.js # HTTP请求封装 │ ├── storage.js # 本地存储封装 │ ├── upload.js # 文件上传 │ ├── validate.js # 表单验证 │ ├── common.js # 通用工具 │ ├── permission.js # 权限工具 │ ├── constant.js # 常量定义 │ └── errorCode.js # 错误码映射 ├── static/ # 静态资源 │ ├── images/ # 图片资源 │ ├── font/ # 字体文件 │ └── scss/ # 公共样式 ├── uni_modules/ # UniApp官方组件库 (44个组件) ├── App.vue # 应用根组件 ├── main.js # 应用入口 ├── pages.json # 页面配置 ├── manifest.json # 应用清单 ├── config.js # 全局配置 ├── permission.js # 路由权限拦截 └── uni.scss # 全局样式变量 ``` ### 技术架构 ``` ┌─────────────────────────────────────┐ │ 视图层 (Vue Pages) │ │ ┌───────────────────────────────┐ │ │ │ 登录/注册/首页/工作台/个人中心 │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ 业务逻辑层 (Vuex Store) │ │ ┌───────────────────────────────┐ │ │ │ 用户状态/权限/数据管理 │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ API接口层 (Api Modules) │ │ ┌───────────────────────────────┐ │ │ │ login/system/dict APIs │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ HTTP请求层 (Request Wrapper) │ │ ┌───────────────────────────────┐ │ │ │ 拦截/鉴权/错误处理/超时控制 │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ 后端API (RuoYi-Vue/Cloud) │ └─────────────────────────────────────┘ ``` ## 功能模块 ### 1. 用户认证模块 - **登录功能** - 用户名密码登录 - 验证码校验 - Token存储管理 - **注册功能** - 新用户注册 - **权限控制** - 路由白名单机制 - 页面访问拦截 - Token自动刷新 ### 2. 工作台模块 (Work) - 轮播图展示 - 系统管理功能入口（展示用） - 用户管理、角色管理、菜单管理 - 部门管理、岗位管理、字典管理 - 参数设置、通知公告、日志管理 ### 3. 个人中心模块 (Mine) - 用户信息展示 - 个人资料编辑 - 头像上传修改 - 密码修改 - 常见问题查看 - 关于我们 - 应用设置 ### 4. 公共页面模块 (Common) - WebView 网页浏览 - TextView 文本浏览 ## 配置信息 ### 应用配置 (config.js) ```javascript { baseUrl: 'https://vue.ruoyi.vip/prod-api', // API基础地址 appInfo: { name: "ruoyi-app", version: "1.2.0", logo: "/static/logo.png", site_url: "http://ruoyi.vip" } } ``` ### 应用清单 (manifest.json) - 应用名称：若依移动端 - 版本号：1.2.0 - Vue版本：2 - 支持平台：H5、微信小程序、Android、iOS - 小程序AppID：wxccd7e2a0911b3397 ### 路由配置 (pages.json) - 底部导航：首页、工作台、我的 - 总计14个页面路由 - 全局样式配置 ## 已实现的功能 ### 核心功能 ✅ 用户登录（账号密码 + 验证码） ✅ 用户注册 ✅ 自动登录状态保持 ✅ Token管理与自动刷新 ✅ 路由权限拦截 ✅ 页面白名单控制 ### 用户管理 ✅ 查看个人信息 ✅ 编辑个人资料 ✅ 修改用户头像（支持图片上传） ✅ 修改登录密码 ✅ 用户信息缓存 ### 界面功能 ✅ 底部Tab导航 ✅ 自定义顶部导航 ✅ 轮播图组件 ✅ 宫格菜单布局 ✅ 列表展示组件 ✅ 模态框提示 ✅ Toast消息提示 ### 网络请求 ✅ 统一HTTP请求封装 ✅ 请求/响应拦截器 ✅ 自动Token注入 ✅ 错误统一处理 ✅ 超时控制（默认10秒） ✅ 错误码映射 ### 工具函数 ✅ Token存储管理 ✅ 本地存储封装 ✅ 表单验证工具 ✅ 通用工具函数 ✅ 权限检查工具 ✅ 文件上传功能 ### UI组件（uni_modules） ✅ 44个官方组件集成 - uni-badge、uni-card、uni-grid - uni-icons、uni-list、uni-table - uni-forms、uni-datetime-picker - uni-popup、uni-search-bar - 等等... ## 开发特点 ### 1. 模块化设计 - API接口按功能模块划分 - Vuex状态管理模块化 - 工具函数分类清晰 ### 2. 权限控制 - 路由级别权限拦截 - 页面白名单机制 - Token自动验证与刷新 ### 3. 代码规范 - 统一的代码风格 - 完善的错误处理 - 清晰的注释说明 ### 4. 响应式布局 - rpx单位适配 - 媒体查询支持 - 多端兼容处理 ### 5. 性能优化 - 本地缓存机制 - 图片懒加载 - 组件按需引入 ## 项目入口 ### 应用入口 - 主文件：`main.js` - 根组件：`App.vue` - 启动流程：main.js → App.vue → permission.js → 首页 ### 页面入口 - 首页：`pages/index.vue` - 登录页：`pages/login.vue` - 注册页：`pages/register.vue` ### API入口 - 登录API：`api/login.js` - 用户API：`api/system/user.js` ## 开发约定 ### 命名规范 - 页面文件：小写+连字符 (如 user-info) - 组件文件：小写+连字符 - API文件：小写+连字符 - 工具文件：小写+连字符 ### 目录结构 - 页面按功能模块分组 - API按业务模块划分 - 组件统一放在 components 目录 ### 状态管理 - 使用 Vuex 进行状态管理 - 按模块划分 store - 用户信息持久化存储 ### 样式规范 - 使用 SCSS 预处理器 - 全局样式变量定义在 uni.scss - 组件样式使用 scoped ## 其他说明 ### 兼容性 - 支持 H5（浏览器访问） - 支持微信小程序 - 支持 Android APP - 支持 iOS APP ### 后端对接 - 完美对接 RuoYi-Vue 单体版 - 完美对接 RuoYi-Cloud 微服务版 - RESTful API 风格 - JWT Token 认证 ### 开发环境 - H5开发端口：9090 - 路由模式：hash模式 - 模块化：ES6模块 ### 项目地址 - Gitee: https://gitee.com/AIResources/base-ruo-yi-app.git - ### 社区支持 - 公众号： - ![V5codings](https://gitee.com/HRuinger/HRuinger_0412/raw/master/src/main/resources/static/img/Snipaste_2021-04-13_18-18-31-v5.png) - ![若依框架教程](https://gitee.com/HRuinger/HRuinger_0412/raw/master/src/main/resources/static/img/Snipaste_2021-04-13_18-17-01-ry.png) ## 总结 RuoYi-App 是一个架构清晰、功能完善、代码规范的移动端应用框架。项目采用了模块化设计，实现了完整的用户认证、权限控制、状态管理等功能。通过 UniApp 框架实现了多端适配，与 RuoYi 后端系统无缝对接，是一个优秀的移动端解决方案。