邮轮穿舱件管理系统小程序端 - 数据流分析文档
文档概述
本文档详细分析邮轮穿舱件管理系统小程序端的关键业务流程数据流转路径，重点聚焦用户登录、任务创建、消息推送等核心功能的数据流转机制。通过系统架构图、序列图和数据流图，全面展示系统内部的数据交互和处理逻辑。
系统架构概览
整体架构图
flowchart TD
subgraph 前端层
A1[登录页面]
A2[任务管理页面]
A3[消息推送页面]
A4[用户信息页面]
end
subgraph 业务逻辑层
B1[API请求模块]
B2[事件总线]
B3[WebSocket连接]
B4[本地存储管理]
end
subgraph 后端服务层
C1[用户认证服务]
C2[任务管理服务]
C3[消息推送服务]
C4[权限管理服务]
end
A1 --> B1 --> C1
A2 --> B1 --> C2
A3 --> B3 --> C3
B2 --> A4
B4 --> A1
架构说明：系统采用典型的三层架构设计，前端层负责UI展示和用户交互，业务逻辑层处理数据流转和状态管理，后端服务层提供API接口支持。WebSocket连接实现实时消息推送功能。
用户登录流程数据流分析
登录流程序列图
sequenceDiagram
participant U as 用户
participant L as 登录页面
participant W as 微信API
participant R as 请求模块
participant S as 后端服务
participant ST as 本地存储
U->>L: 输入账号密码/微信授权
L->>W: 调用wx.login()
W-->>L: 返回code
L->>R: 发送登录请求
R->>S: POST /wechat/loginWithUsrPwd
S-->>R: 返回access_token
R->>ST: 存储access_token
ST-->>R: 存储成功
R-->>L: 登录成功
L->>U: 跳转到个人中心
登录数据流转详细分析
1. 微信授权登录流程
- 数据输入：用户点击微信登录按钮
- 微信API调用：调用
wx.login()获取临时code - 后端验证：将code发送到
/wechat/loginWithAutoRegister接口 - 令牌存储：成功后将access_token存储到本地存储
- 页面跳转：登录成功后跳转到个人中心页面
关键代码引用：
2. 密码登录流程
- 数据收集：用户输入账号密码，前端进行表单验证
- 微信code获取：调用
wx.login()获取微信授权code - API请求：发送用户名、密码和微信code到后端
- 令牌管理：成功登录后存储access_token到本地存储
任务创建与管理数据流分析
任务管理流程序列图
sequenceDiagram
participant U as 用户
participant TP as 任务页面
participant R as 请求模块
participant S as 任务服务
participant PM as 权限服务
U->>TP: 打开任务页面
TP->>R: 获取用户信息
R->>S: GET /miniapp/user/userProfile
S-->>R: 返回用户信息
R-->>TP: 用户信息数据
TP->>R: 获取用户权限
R->>PM: GET /permissions/roles/user/{id}/scopes
PM-->>R: 返回权限范围
R-->>TP: 权限数据
TP->>R: 获取任务列表
R->>S: GET /ticketEntity/all
S-->>R: 返回任务列表
R-->>TP: 任务数据
TP->>U: 渲染任务列表
任务数据流转详细分析
1. 任务列表加载流程
- 用户信息获取：页面加载时首先获取当前用户信息
- 权限验证：根据用户ID获取对应的权限范围
- 任务数据拉取：调用
/ticketEntity/all接口获取所有任务 - 数据格式化：对任务状态、类型进行文本转换
- 筛选处理：根据用户权限和筛选条件显示对应任务
关键代码引用：
- taskPage/index.js - 任务列表加载逻辑
- taskPage/index.js - 任务筛选逻辑
2. 任务状态管理
- 状态映射：将后端状态码转换为用户友好的文本描述
- 时间格式化：统一格式化任务创建和更新时间
- 分配关系：通过
ticket_tos字段管理任务分配关系
消息推送数据流分析
消息推送流程序列图
sequenceDiagram
participant U as 用户
participant MP as 消息页面
participant WS as WebSocket
participant MS as 消息服务
participant EB as 事件总线
MP->>WS: 建立WebSocket连接
WS->>MS: 订阅消息推送
MS->>WS: 推送新消息
WS->>MP: 接收消息数据
MP->>MP: 更新消息列表
MP->>EB: 触发未读消息更新
EB->>U: 更新未读消息数量
U->>MP: 查看消息详情
MP->>MS: 标记消息已读
消息数据流转详细分析
1. 实时消息接收
- 连接建立：应用启动时建立WebSocket连接
- 消息监听：通过
socket.onMessage监听后端推送 - 数据解析：解析JSON格式的消息数据
- 列表更新：将新消息插入到消息列表顶部
关键代码引用：
- message/index.js - WebSocket消息监听
- message/index.js - 消息列表获取
2. 消息状态管理
- 未读计数：实时计算未读消息数量
- 阅读状态：用户查看消息时标记为已读
- 全局同步：通过事件总线同步未读消息状态
数据流关键组件分析
1. API请求模块
classDiagram
class RequestModule {
+baseUrl: string
+delay: number
+request(url, method, data): Promise
-buildHeader(): object
-getToken(): string
}
class LoginPage {
+passwordLogin(): void
+wechatLogin(): void
-changeSubmit(): void
}
class TaskPage {
+loadTaskList(): void
+loadUserInfo(): void
+applyFilter(): void
}
RequestModule --> LoginPage: 提供API调用
RequestModule --> TaskPage: 提供API调用
核心功能：
- 统一的请求头管理，自动添加Bearer Token认证
- 错误处理机制，区分HTTP状态码错误和网络错误
- 支持Mock数据模式，便于开发和测试
关键代码引用：
- request.js - 请求模块核心实现
2. 事件总线系统
stateDiagram-v2
[*] --> Idle
Idle --> MessageReceived: 新消息到达
MessageReceived --> UpdateUnreadCount: 计算未读数
UpdateUnreadCount --> NotifyComponents: 通知组件更新
NotifyComponents --> Idle: 更新完成
功能说明：
- 全局状态管理，实现组件间通信
- 未读消息数量实时同步
- 支持多组件订阅同一事件
关键代码引用：
- app.js - 事件总线配置
- eventBus.js - 事件总线实现
数据安全与权限控制
权限验证流程
flowchart TD
A[用户访问] --> B{是否有Token}
B -->|否| C[跳转到登录页]
B -->|是| D[验证Token有效性]
D --> E{Token有效}
E -->|否| C
E -->|是| F[获取用户权限]
F --> G[根据权限显示内容]
G --> H[操作完成]
安全机制
- Token认证：所有API请求都需要携带Bearer Token
- 权限分级：根据用户角色显示不同的功能和数据
- 数据过滤：前端根据用户权限过滤可访问的数据
性能优化建议
数据流优化策略
- 请求合并：对于关联性强的数据请求进行合并
- 缓存策略：合理使用本地存储缓存用户信息和配置数据
- 懒加载：对于大量数据采用分页加载机制
- WebSocket优化：合理管理连接状态，避免资源浪费
索引
本文档详细分析了邮轮穿舱件管理系统小程序端的关键业务流程数据流转路径。系统采用清晰的三层架构设计，通过统一的API请求模块、事件总线和WebSocket连接，实现了用户登录、任务管理和消息推送等核心功能的高效数据流转。
主要特点：
- 模块化的数据流设计，便于维护和扩展
- 完善的权限控制和数据安全机制
- 实时消息推送支持，提升用户体验
- 统一的错误处理和状态管理
参考文件：
- login.js - 用户登录逻辑
- taskPage/index.js - 任务管理逻辑
- message/index.js - 消息推送逻辑
- request.js - API请求模块
- app.js - 应用入口和全局配置