audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
08da2792750350663680c85dbc6b6947f35500d7
dashboard/.qoder/repowiki/zh/content/核心功能模块/分享码日志管理.md
T
eafonyang 08da279275 新增项目文档
2026-06-30 14:46:52 +08:00

11 KiB
Raw Blame History

分享码日志管理

**本文档引用的文件** - [ShareCodeLog.js](file://backend/src/models/ShareCodeLog.js) - [shareCodeLogs.js](file://backend/src/routes/shareCodeLogs.js) - [response.js](file://backend/src/utils/response.js) - [database.js](file://backend/src/config/database.js) - [log.vue](file://frontend/src/views/share-code/log.vue) - [shareCodeLog.js](file://frontend/src/api/shareCodeLog.js) - [index.js](file://frontend/src/router/index.js)

目录

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构概览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考虑
  8. 故障排除指南
  9. 结论

简介

分享码日志管理功能是一个完整的日志追踪系统，用于记录和查询分享码的使用情况。该系统实现了设备MAC地址、分享码、操作类型、IP地址等关键信息的完整记录，并提供了强大的查询统计功能。

系统采用前后端分离架构，后端基于Node.js + Express + Sequelize，前端使用Vue.js + Element Plus构建用户界面。日志数据存储在MySQL数据库中，通过索引优化确保查询性能。

项目结构

分享码日志管理功能主要分布在以下目录结构中：

graph TB
subgraph "后端架构"
A[models/ShareCodeLog.js<br/>日志模型定义]
B[routes/shareCodeLogs.js<br/>日志路由处理]
C[utils/response.js<br/>响应格式化]
D[config/database.js<br/>数据库配置]
end
subgraph "前端架构"
E[views/share-code/log.vue<br/>日志页面组件]
F[api/shareCodeLog.js<br/>API请求封装]
G[router/index.js<br/>路由配置]
end
subgraph "数据库层"
H[(MySQL 数据库)]
I[share_code_log 表]
end
A --> H
B --> A
E --> F
F --> G
B --> D
E --> G

图表来源

章节来源

核心组件

日志模型定义

分享码日志模型是整个系统的数据基础，定义了完整的字段结构和约束条件：

字段名 类型 约束 描述
id INTEGER 主键, 自增 日志记录唯一标识
mac_addr STRING(17) 非空 设备MAC地址，格式AA:BB:CC:DD:EE:FF
share_code CHAR(5) 非空 分享码，5位字符
action ENUM 非空 操作类型：export=导出, import=导入
ip_addr STRING(45) 非空, 默认'' 用户IP地址，支持IPv4/IPv6
eq_data JSON 非空 EQ数据快照（JSON格式）
expire_at DATE 可空 分享码到期时间（导出时快照）
create_at DATE 非空, 默认NOW 操作时间

查询路由实现

后端路由提供了完整的日志查询接口，支持多种过滤条件和排序方式：

查询参数支持：

  • 分页参数：skip（跳过数量）、limit（每页条数，最大1000）
  • 过滤条件：mac_addr、share_code、action、ip_addr
  • 时间范围：start_at、end_at
  • 排序参数：sort_by（id、create_at）、sort_order（asc、desc）

章节来源

架构概览

分享码日志管理系统的整体架构采用经典的三层架构设计：

sequenceDiagram
participant User as 用户界面
participant Frontend as 前端应用
participant Backend as 后端服务
participant Database as MySQL数据库
participant Logger as 日志系统
User->>Frontend : 访问分享码日志页面
Frontend->>Backend : GET /api/share-code/logs
Backend->>Logger : 记录查询日志
Backend->>Database : 执行查询带过滤条件
Database-->>Backend : 返回查询结果
Backend->>Backend : 格式化响应数据
Backend-->>Frontend : 返回JSON响应
Frontend->>User : 展示日志表格
Note over User,Database : 完整的日志查询流程

图表来源

系统的关键特性包括：

  • 实时查询：支持多维度过滤和排序
  • 分页加载：避免大量数据一次性传输
  • 响应式设计：适配不同屏幕尺寸
  • 错误处理：完善的异常捕获和用户提示

详细组件分析

后端路由处理流程

后端路由实现了完整的日志查询逻辑，包括参数验证、查询构建、结果处理等步骤：

flowchart TD
Start([请求进入]) --> ParseParams["解析查询参数"]
ParseParams --> ValidateFilters["验证过滤条件"]
ValidateFilters --> BuildWhere["构建WHERE条件"]
BuildWhere --> CheckTimeRange{"是否设置时间范围?"}
CheckTimeRange --> |是| AddTimeRange["添加时间范围条件"]
CheckTimeRange --> |否| CountQuery["执行COUNT查询"]
AddTimeRange --> CountQuery
CountQuery --> BuildOrder["构建排序条件"]
BuildOrder --> PaginateQuery["执行分页查询"]
PaginateQuery --> FormatResponse["格式化响应数据"]
FormatResponse --> ReturnSuccess["返回成功响应"]
ReturnSuccess --> End([请求结束])
CountQuery --> ErrorHandle["异常处理"]
ErrorHandle --> ReturnError["返回错误响应"]
ReturnError --> End

图表来源

前端页面交互流程

前端页面提供了直观的用户界面和完整的交互功能：

sequenceDiagram
participant User as 用户
participant SearchForm as 搜索表单
participant Table as 数据表格
participant Pagination as 分页控件
participant API as API接口
User->>SearchForm : 输入搜索条件
SearchForm->>API : 发送查询请求
API-->>SearchForm : 返回查询结果
SearchForm->>Table : 更新表格数据
User->>Pagination : 切换页码/页大小
Pagination->>API : 发送新的分页请求
API-->>Pagination : 返回分页数据
Pagination->>Table : 更新表格显示
Note over User,API : 用户驱动的数据查询流程

图表来源

数据模型类图

classDiagram
class ShareCodeLog {
+number id
+string mac_addr
+string share_code
+string action
+string ip_addr
+object eq_data
+date expire_at
+date create_at
}
class ApiResponse {
+success(data, msg) Object
+error(msg, code) Object
+noData(msg) Object
}
class PageData {
+items array
+total number
+skip number
+limit number
}
class ShareCodeLogRoute {
+GET /api/share-code/logs
+parseQueryParams() Object
+buildWhereClause() Object
+formatResponse() Object
}
ShareCodeLogRoute --> ShareCodeLog : "查询"
ShareCodeLogRoute --> ApiResponse : "使用"
ShareCodeLogRoute --> PageData : "封装"

图表来源

章节来源

依赖关系分析

系统各组件之间的依赖关系清晰明确：

graph LR
subgraph "前端依赖"
A[log.vue] --> B[shareCodeLog.js]
B --> C[request.js]
A --> D[Element Plus]
A --> E[VueJsonPretty]
end
subgraph "后端依赖"
F[shareCodeLogs.js] --> G[ShareCodeLog.js]
F --> H[response.js]
F --> I[logger.js]
G --> J[database.js]
end
subgraph "数据库依赖"
K[MySQL] <- --> J
L[share_code_log] <- --> G
end
A -.-> F
F -.-> K

图表来源

章节来源

性能考虑

数据库索引优化

系统在日志表上建立了三个关键索引以提升查询性能：

索引名称 字段 用途 性能影响
idx_mac_addr mac_addr 设备查询 显著提升MAC地址过滤速度
idx_share_code share_code 分享码查询 提升分享码匹配效率
idx_create_at create_at 时间排序 优化时间范围查询

查询性能优化策略

  1. 分页查询：默认每页50条，最大限制1000条，避免大数据量传输
  2. 条件过滤：仅在提供有效条件时添加WHERE子句
  3. 索引利用：合理使用已建立的复合索引
  4. 数据类型优化：使用合适的字段长度和数据类型

前端性能优化

  1. 虚拟滚动：对于大量数据时可考虑实现虚拟滚动
  2. 缓存机制：对常用查询结果进行缓存
  3. 防抖处理：搜索输入时添加防抖机制
  4. 懒加载：对话框等组件按需加载

故障排除指南

常见问题及解决方案

问题1：查询结果为空

  • 检查查询条件是否过于严格
  • 验证时间范围设置是否正确
  • 确认用户权限是否足够

问题2：性能问题

  • 检查数据库连接配置
  • 验证索引是否正常工作
  • 考虑优化查询条件

问题3：前端显示异常

  • 检查网络请求状态
  • 验证JSON数据格式
  • 确认Element Plus版本兼容性

错误处理机制

系统实现了多层次的错误处理：

flowchart TD
Request[请求处理] --> TryBlock["try块执行"]
TryBlock --> Success["成功处理"]
TryBlock --> CatchBlock["catch异常捕获"]
CatchBlock --> LogError["记录错误日志"]
LogError --> ReturnError["返回错误响应"]
Success --> ReturnSuccess["返回成功响应"]
ReturnError --> ApiResponse["ApiResponse.error()"]
ReturnSuccess --> ApiResponse2["ApiResponse.success()"]

图表来源

章节来源

结论

分享码日志管理功能是一个设计完善、实现优雅的日志追踪系统。它通过合理的数据模型设计、高效的查询实现和友好的用户界面，为用户提供了一个完整的分享码使用记录管理解决方案。

系统的主要优势包括：

  • 完整的功能覆盖：从数据记录到查询统计的全流程支持
  • 良好的扩展性：模块化设计便于功能扩展和维护
  • 优秀的用户体验：响应式界面和流畅的交互体验
  • 可靠的性能表现：通过索引优化和分页机制保证查询效率

未来可以考虑的功能增强包括：数据导出功能、更丰富的统计图表、高级搜索条件、数据清理策略等，这些都将进一步提升系统的实用性和价值。

Reference in New Issue View Git Blame Copy Permalink