# 家谱项目 **Repository Path**: wwwpythonpw/genealogy-project ## Basic Information - **Project Name**: 家谱项目 - **Description**: 设计一个族谱系统需要综合考虑后台管理系统、小程序和后台API服务的功能划分与协作 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2025-10-19 - **Last Updated**: 2025-10-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 陈氏族谱系统 ## 项目概述 陈氏族谱系统是一个基于SpringBoot + Vue的家族谱系管理系统,支持家族成员管理、族谱树展示、家族新闻等功能。 ## 技术栈 - **后端**: SpringBoot 2.x + MyBatis-Plus + Redis + JWT - **前端**: Vue 2.x + Element-UI + Axios - **数据库**: MySQL 8.0 - **缓存**: Redis - **认证**: JWT Token ## 项目结构 ``` 案例-陈氏族谱/ ├── cs-server-api/ # 后端API服务 ├── web-admin/ # 前端管理后台 ├── genealogy-miniapp/ # 微信小程序 └── uploads/ # 文件上传目录 ``` ## 功能特性 - 用户认证与授权 - 家族成员管理 - 族谱树展示 - 家族新闻管理 - 成员审核流程 - 文件上传功能 - 数据统计展示 ## 快速开始 ### 环境要求 - JDK 8+ - Node.js 12+ - MySQL 8.0 - Redis 6.0+ ### 后端启动 1. 创建数据库并导入SQL文件 2. 修改`application.yml`中的数据库配置 3. 启动Redis服务 4. 运行`GenealogyApplication.java` ### 前端启动 1. 进入`web-admin`目录 2. 安装依赖:`npm install` 3. 启动开发服务器:`npm run serve` ## 开发历史 ### 2025-01-16 16:30:00 - Token过期和刷新机制修复 **会话主要目的**: 解决系统token过期后自动刷新机制的问题,用户反馈30秒后token过期导致被重定向到登录页面的问题。 **完成的主要任务**: 1. **问题诊断**: 分析了token过期和刷新机制的完整流程,发现多个问题点 2. **Token过期时间调整**: 将access-token过期时间从30秒调整为30分钟,更符合实际使用需求 3. **前端刷新逻辑修复**: - 修复了`refreshTokenAndRetry`函数中使用`axios`而不是`service`的问题 - 修复了响应拦截器中传递给`handleTokenError`的参数格式问题 - 添加了详细的调试日志,便于问题诊断 4. **调试工具增强**: - 在store的refreshToken方法中添加调试日志 - 创建了TokenTest.vue测试页面,用于验证token刷新功能 **关键决策和解决方案**: - **Token过期时间**: 从30秒调整为30分钟,平衡安全性和用户体验 - **请求重试机制**: 确保使用service实例而不是axios,保证请求经过拦截器处理 - **错误处理**: 统一了前端对4001和4002错误码的处理逻辑 **使用的技术栈**: - SpringBoot JWT认证 - Vue.js 响应拦截器 - Axios 请求处理 - Redis 缓存机制 **修改的文件**: - `cs-server-api/src/main/resources/application.yml` - 调整token过期时间 - `web-admin/src/api/request.js` - 修复token刷新逻辑和错误处理 - `web-admin/src/store/index.js` - 添加调试日志 - `web-admin/src/views/TokenTest.vue` - 创建token测试页面 **问题根本原因**: 1. Token过期时间过短(30秒)导致频繁过期 2. 前端刷新token后使用axios而不是service实例,导致请求不经过拦截器 3. 响应拦截器中传递给错误处理函数的参数格式不正确 **解决方案效果**: - Token过期时间延长到30分钟,减少频繁过期 - 修复了token刷新后的请求重试机制 - 添加了完整的调试日志,便于后续问题排查 - 创建了专门的测试页面验证token刷新功能 ### 2025-01-16 17:45:00 - ResponseUtil工具类开发 **会话主要目的**: 在ResponseUtil类中生成返回JSON字符串提示信息的方法,主要用于Java的void方法返回code和msg。 **完成的主要任务**: 1. **ResponseUtil工具类完善**: - 添加了success()方法用于返回成功响应 - 添加了error()方法用于返回失败响应 - 支持自定义状态码和消息 - 支持使用ApiCodeEnum枚举 - 支持带数据的响应返回 2. **技术选型**: - 使用hutool的JSONUtil进行JSON序列化(项目中已有hutool依赖) - 集成现有的ApiResponse统一响应结构 - 使用ApiCodeEnum统一状态码管理 3. **方法设计**: - `success(HttpServletResponse, String)` - 返回成功响应 - `success(HttpServletResponse, String, Object)` - 返回成功响应(带数据) - `success(HttpServletResponse, ApiCodeEnum)` - 使用枚举返回成功响应 - `success(HttpServletResponse, ApiCodeEnum, Object)` - 使用枚举返回成功响应(带数据) - `error(HttpServletResponse, int, String)` - 返回失败响应 - `error(HttpServletResponse, String)` - 返回失败响应(默认500错误码) - `error(HttpServletResponse, ApiCodeEnum)` - 使用枚举返回失败响应 - `error(HttpServletResponse, ApiCodeEnum, String)` - 使用枚举返回失败响应(自定义消息) **关键决策和解决方案**: - **JSON序列化**: 选择hutool的JSONUtil而非fastjson,因为项目中已有hutool依赖 - **响应结构**: 复用现有的ApiResponse类,保持响应格式一致性 - **状态码管理**: 集成ApiCodeEnum枚举,统一状态码管理 - **方法设计**: 提供多种重载方法,满足不同使用场景 **使用的技术栈**: - Java Servlet API - Hutool JSONUtil - SpringBoot统一响应结构 - 枚举状态码管理 **修改的文件**: - `cs-server-api/src/main/java/com/company/genealogy/common/util/ResponseUtil.java` - 完善ResponseUtil工具类 **功能特性**: - 支持void方法直接返回JSON响应 - 统一的响应格式(code、msg、data) - 多种使用方式(自定义消息、枚举状态码、带数据响应) - 完整的JavaDoc文档和使用示例 - 自动设置Content-Type和字符编码 **使用示例**: ```java // 返回成功响应 ResponseUtil.success(response, "操作成功"); // 返回成功响应(带数据) ResponseUtil.success(response, "查询成功", userList); // 使用枚举返回成功响应 ResponseUtil.success(response, ApiCodeEnum.SUCCESS); // 返回失败响应 ResponseUtil.error(response, "操作失败"); // 使用枚举返回失败响应 ResponseUtil.error(response, ApiCodeEnum.PARAM_ERROR); ``` **后续建议**: 1. 监控token刷新成功率 2. 考虑实现token自动刷新机制(在过期前主动刷新) 3. 添加用户会话超时提醒功能 ### 2025-01-16 16:45:00 - ES2020语法兼容性修复 **会话主要目的**: 修复前端项目中ES2020可选链操作符(`?.`)的兼容性问题,解决webpack编译错误。 **完成的主要任务**: 1. **问题诊断**: 发现web-admin项目中的JavaScript代码使用了ES2020的可选链操作符,但项目没有配置相应的Babel插件支持 2. **语法兼容性修复**: 将可选链操作符替换为传统的对象属性访问方式 3. **代码审查**: 检查了整个项目中是否还有其他ES2020语法需要兼容 **关键决策和解决方案**: - **语法兼容性**: 将`response.data?.code`替换为`response.data && response.data.code` - **向后兼容**: 确保代码在现有的Vue CLI 4.x环境下正常运行 - **代码质量**: 保持代码功能不变,只修改语法兼容性 **使用的技术栈**: - Vue CLI 4.x - Webpack 4.x - JavaScript ES6+ **修改的文件**: - `web-admin/src/store/index.js` - 修复可选链操作符兼容性问题 **问题根本原因**: - 项目使用的是Vue CLI 4.x,默认的Babel配置不支持ES2020的可选链操作符 - 代码中使用了`response.data?.code`等ES2020语法,导致webpack编译失败 **解决方案效果**: - 修复了webpack编译错误 - 保持了代码功能完全不变 - 确保了在现有环境下的兼容性 **后续建议**: 1. 考虑升级到Vue CLI 5.x以获得更好的ES2020支持 2. 可以添加Babel插件来支持更多ES2020特性 3. 建立代码规范,避免使用项目环境不支持的新语法特性 ## 项目简介 这是一个基于 SpringBoot + Vue 的陈氏族谱管理系统,包含后端 API 服务、前端管理后台和小程序端。 ## 技术栈 - 后端:SpringBoot 2.x + MyBatis-Plus + Redis + JWT - 前端:Vue 2.x + Element-UI + Axios - 数据库:MySQL - 缓存:Redis ## 项目结构 ``` 案例-陈氏族谱/ ├── cs-server-api/ # 后端 API 服务 ├── web-admin/ # 前端管理后台 ├── genealogy-miniapp/ # 微信小程序 └── uploads/ # 文件上传目录 ``` ## 快速开始 ### 后端启动 1. 确保MySQL和Redis服务已启动 2. 导入数据库脚本:`cs-server-api/db_schema.sql` 3. 修改配置文件:`cs-server-api/src/main/resources/application.yml` 4. 启动后端服务 ### 前端启动 1. 进入前端目录:`cd web-admin` 2. 安装依赖:`npm install` 3. 启动开发服务器:`npm run serve` ## 功能特性 - 用户认证与授权 - 家族成员管理 - 族谱树展示 - 家族新闻管理 - 文件上传 - 数据统计 ## 开发历史 ### 2025-01-16 14:30:00 - Token自动刷新功能修复 **会话主要目的:** 修复登录系统中的token过期自动获取新token功能,确保用户无需手动重新登录。 **完成的主要任务:** 1. **前端修复**: - 修复了 `web-admin/src/api/request.js` 中的 `refreshTokenAndRetry` 方法 - 统一了响应处理逻辑,添加了 `handleResponse` 函数 - 修复了队列中请求重试时的响应格式处理问题 - 改进了 `web-admin/src/store/index.js` 中的 `refreshToken` 方法,增加了错误处理和本地存储清理 2. **后端修复**: - 修改了 `cs-server-api/src/main/java/com/company/genealogy/common/filter/JwtAuthenticationFilter.java` - 在token过期时返回正确的业务错误码(4002),而不是直接返回401状态码 - 确保前端能够识别token过期情况并自动刷新 - 调整了JWT配置,将access-token过期时间从30秒改为1800秒(30分钟) 3. **测试功能**: - 创建了独立的测试页面 `web-admin/src/views/TokenTest.vue` - 在 `cs-server-api/src/main/java/com/company/genealogy/web/controller/AuthController.java` 中添加了测试接口 - 提供了token验证、用户信息获取等测试功能 - 恢复了首页到原始状态,保持原有功能不变 **关键决策和解决方案:** 1. **错误码统一**:使用业务错误码(4002)而不是HTTP状态码来标识token过期,让前端能够准确识别并处理 2. **响应格式统一**:创建了统一的响应处理函数,确保所有请求的响应格式一致 3. **队列机制优化**:改进了token刷新时的请求队列处理,避免重复刷新 4. **配置优化**:调整了JWT token的过期时间,从30秒改为30分钟,更符合实际使用需求 5. **页面分离**:创建独立的测试页面,不影响原有首页功能 **使用的技术栈:** - 前端:Vue 2.x + Axios + Element-UI - 后端:SpringBoot + JWT + Redis - 认证:Bearer Token + Refresh Token机制 **修改的文件:** - `web-admin/src/api/request.js` - 修复token自动刷新逻辑 - `web-admin/src/store/index.js` - 改进refreshToken方法 - `web-admin/src/views/dashboard/Index.vue` - 恢复首页到原始状态 - `web-admin/src/views/TokenTest.vue` - 创建独立的token测试页面 - `web-admin/src/router/index.js` - 添加测试页面路由 - `cs-server-api/src/main/java/com/company/genealogy/common/filter/JwtAuthenticationFilter.java` - 修复token过期处理 - `cs-server-api/src/main/java/com/company/genealogy/web/controller/AuthController.java` - 添加测试接口 - `cs-server-api/src/main/resources/application.yml` - 调整JWT配置 **修复效果:** 现在当用户的access token过期时,系统会自动使用refresh token获取新的token,用户无需手动重新登录,提升了用户体验。同时保持了原有首页功能的完整性,创建了独立的测试页面供开发调试使用。 ### 2025-01-16 143000 - HomeServiceImpl 代码修复 **会话主要目的:** 修复 `HomeServiceImpl.java` 中调用的多个 mapper 方法不存在的问题,确保代码能够正常编译和运行。 **完成的主要任务:** 1. 检查并修复 `HomeServiceImpl.java` 中缺失的 mapper 方法 2. 为 `MemberMapper` 接口添加缺失的方法声明: - `countTotalMembersByClanId(Long clanId)` - `getMaxGenerationByClanId(Long clanId)` - `countActiveMembersByLogin(Long clanId)` - `getPopulationByBranch()` - `getPopulationByRegion()` - `getGenerationStats()` - `getGenerationTrend()` - `selectMemberBasicInfo(Long id)` 3. 为 `BranchMapper` 接口添加缺失的方法声明: - `countTotalBranchesByClanId(Long clanId)` - `getHotBranches(int limit, Long clanId)` 4. 修复 `UserContributionMapper` 中的方法签名问题: - 为 `getCurrentUserContributions` 方法添加 `@Param("userId")` 注解 5. 在 `MemberMapper.xml` 中添加对应的 SQL 实现: - 按家族ID统计总人数 - 获取最大世代数 - 统计活跃成员数 - 按分支和地区统计人口分布 - 各世代人数统计和趋势分析 - 获取成员基本信息 6. 在 `BranchMapper.xml` 中添加对应的 SQL 实现: - 按家族ID统计分支总数 - 获取热门分支 7. 修复 `AuthServiceImpl` 中的 API 响应方法调用: - 将 `ApiResponse.error()` 改为 `ApiResponse.fail()` 8. 修复 `Member` 实体类缺失的字段: - 添加 `nativePlace` 字段(籍贯) - 添加 `approvalStatus` 字段(审批状态) - 添加 `submitterId` 字段(提交人ID) 9. 为 `UserMapper` 添加缺失的方法: - `selectUserBasicInfo(Long id)` 方法声明和 XML 实现 **关键决策和解决方案:** - 采用 MyBatis 注解和 XML 混合配置方式,复杂查询使用 XML 实现 - 统一使用 `@Param` 注解标注方法参数,确保参数正确传递 - 在获取当前用户贡献时添加异常处理,避免因用户未登录导致的错误 - 保持与数据库表结构的一致性,确保实体类字段完整 **使用的技术栈:** - SpringBoot 2.x - MyBatis-Plus - MySQL - Maven **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/mapper/MemberMapper.java` - `cs-server-api/src/main/java/com/company/genealogy/mapper/BranchMapper.java` - `cs-server-api/src/main/java/com/company/genealogy/mapper/UserContributionMapper.java` - `cs-server-api/src/main/java/com/company/genealogy/mapper/UserMapper.java` - `cs-server-api/src/main/java/com/company/genealogy/entity/Member.java` - `cs-server-api/src/main/java/com/company/genealogy/service/impl/HomeServiceImpl.java` - `cs-server-api/src/main/java/com/company/genealogy/service/impl/AuthServiceImpl.java` - `cs-server-api/src/main/resources/mapper/MemberMapper.xml` - `cs-server-api/src/main/resources/mapper/BranchMapper.xml` - `cs-server-api/src/main/resources/mapper/UserMapper.xml` **结果:** 成功修复了所有编译错误,代码现在可以正常编译。所有缺失的 mapper 方法都已添加相应的接口声明和 SQL 实现,确保了系统的完整性和可维护性。 ### 2025-01-16 150000 - 审核中心样式优化 **会话主要目的:** 优化审核中心模块的样式风格,参照配偶模块的现代化设计,提升用户界面的美观性和一致性。 ### 2025-01-16 160000 - 系统设置模块UI统一修复 **会话主要目的:** 以配偶管理模块为准,修复系统设置下各模块(用户管理、角色管理、菜单管理)的UI风格不一致问题,确保整个系统的界面风格统一。 **完成的主要任务:** 1. **搜索条件框大小风格统一**: - 将系统设置模块的内联样式改为使用 `el-form-item` 和 `size="small"` 属性 - 统一搜索栏的布局和样式,与配偶管理模块保持一致 - 修改了用户管理、角色管理、菜单管理三个页面的搜索表单结构 2. **分页标签统一**: - 将分页组件的 `layout` 属性统一为 `"total, prev, pager, next, jumper, ->, sizes"` - 添加了 `@size-change="handleSizeChange"` 事件处理 - 添加了 `:page-sizes="[10, 20, 50, 100]"` 配置 - 为缺少 `handleSizeChange` 方法的页面添加了相应实现 3. **搜索栏样式统一**: - 更新了搜索栏的CSS样式,与配偶管理模块保持一致 - 统一了边距、内边距和背景样式 - 移除了原有的内联样式配置 **关键决策和解决方案:** - 以配偶管理模块作为UI风格的标准参考 - 采用 Element UI 的 `el-form` 组件替代原有的内联样式布局 - 统一使用 `size="small"` 属性确保表单控件大小一致 - 保持分页功能的完整性,确保用户体验不受影响 **使用的技术栈:** - Vue 2.x - Element UI - CSS3 **修改的文件:** - `web-admin/src/views/system/User.vue` - 用户管理页面 - `web-admin/src/views/system/Role.vue` - 角色管理页面 - `web-admin/src/views/system/Menu.vue` - 菜单管理页面 **修复的具体问题:** 1. **搜索条件框**:从内联样式改为 `el-form-item` 布局,添加了标签显示 2. **分页组件**:统一了分页布局,添加了总数显示、跳转功能和每页条数选择 3. **样式统一**:搜索栏样式与配偶管理模块完全一致 4. **功能完整性**:确保所有原有功能正常工作,包括搜索、分页、排序等 **结果:** 成功统一了系统设置模块的UI风格,现在用户管理、角色管理、菜单管理三个页面的界面风格与配偶管理模块完全一致,提升了整个系统的界面统一性和用户体验。 ### 2025-01-16 170000 - 子女排序对话框样式优化 **会话主要目的:** 优化调整子女排序对话框的视觉效果,提升用户界面的美观性和交互体验,使其更加现代化和用户友好。 **完成的主要任务:** 1. **对话框整体样式优化**: - 增加了对话框的圆角和阴影效果 - 为对话框头部添加了渐变背景色 - 优化了对话框的内边距和布局 2. **表格样式改进**: - 重新设计了表格的头部样式,使用更清晰的背景色 - 优化了表格行的悬停效果 - 改进了表格单元格的内边距和对齐方式 3. **排序标签样式优化**: - 为不同排序的标签设计了不同的渐变色背景 - 长子/长女使用绿色渐变 - 次子/次女使用灰色渐变 - 三子/三女使用橙色渐变 - 其他排序使用灰色渐变 - 添加了圆角和阴影效果 4. **操作按钮样式改进**: - 重新设计了"上移"和"下移"按钮的样式 - 添加了悬停效果和禁用状态样式 - 优化了按钮的间距和布局 5. **底部按钮样式优化**: - 为"取消"和"保存排序"按钮设计了新的样式 - "保存排序"按钮使用渐变背景色 - 添加了悬停效果和动画 6. **提示信息样式改进**: - 为操作提示添加了背景色和边框 - 使用蓝色左边框突出显示 **关键决策和解决方案:** - 采用现代化的渐变色彩方案,提升视觉层次感 - 使用圆角和阴影效果增强立体感 - 保持与系统整体风格的一致性 - 优化交互反馈,提升用户体验 **使用的技术栈:** - Vue 2.x - Element UI - CSS3 (渐变、阴影、动画) **修改的文件:** - `web-admin/src/views/member/Detail.vue` - 成员详情页面 **优化的具体效果:** 1. **视觉层次**:通过渐变色彩和阴影效果增强了视觉层次 2. **交互体验**:优化了按钮的悬停效果和禁用状态 3. **信息展示**:改进了排序标签的颜色区分,更直观地显示子女排序 4. **整体美观**:对话框整体更加现代化,符合当前设计趋势 **结果:** 成功优化了子女排序对话框的样式,现在界面更加美观、现代化,用户体验得到显著提升。排序标签的颜色区分更加直观,操作按钮的交互反馈更加友好。 ### 2025-01-16 180000 - 系统设置模块查询功能修复 **会话主要目的:** 修复系统设置下用户管理、角色管理、菜单管理模块的查询功能,确保搜索条件能够正确传递到后端并生效。 **完成的主要任务:** 1. **后端接口修复**: - 修复用户列表接口,添加 `username` 和 `userType` 搜索参数支持 - 修复角色列表接口,添加 `name` 和 `status` 搜索参数支持 - 修复菜单列表接口,添加 `name`、`status` 和 `parentId` 搜索参数支持 - 使用 MyBatis-Plus 的 QueryWrapper 构建动态查询条件 2. **前端代码优化**: - 修复菜单管理页面的 load 方法,统一使用 `...this.searchForm` 传递参数 - 确保所有搜索表单参数正确传递到后端 - 保持与用户管理和角色管理页面的一致性 3. **查询条件实现**: - **用户管理**:支持按用户名模糊查询、按用户类型精确查询 - **角色管理**:支持按角色名称模糊查询、按状态精确查询 - **菜单管理**:支持按菜单名称模糊查询、按状态精确查询、按父级菜单精确查询 **关键决策和解决方案:** - **后端查询优化**:使用 MyBatis-Plus QueryWrapper 构建动态查询条件 - **参数传递统一**:前端统一使用 `...this.searchForm` 方式传递搜索参数 - **空值处理**:后端对搜索参数进行空值检查,避免无效查询 - **模糊查询**:对文本字段使用 `like` 查询,对枚举字段使用 `eq` 查询 **使用的技术栈:** - SpringBoot 2.x - MyBatis-Plus - Vue 2.x - Element UI **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/controller/UserController.java` - 用户列表接口 - `cs-server-api/src/main/java/com/company/genealogy/controller/RoleController.java` - 角色列表接口 - `cs-server-api/src/main/java/com/company/genealogy/controller/MenuController.java` - 菜单列表接口 - `web-admin/src/views/system/Menu.vue` - 菜单管理页面 **修复的具体问题:** 1. **用户查询**:现在支持按用户名和用户类型进行搜索 2. **角色查询**:现在支持按角色名称和状态进行搜索 3. **菜单查询**:现在支持按菜单名称、状态和父级菜单进行搜索 4. **参数传递**:统一了前端参数传递方式,确保搜索条件正确传递 **查询功能特点:** - **模糊搜索**:文本字段支持模糊匹配 - **精确搜索**:枚举字段支持精确匹配 - **分页支持**:所有查询都支持分页 - **条件组合**:支持多个搜索条件组合使用 **结果:** 成功修复了系统设置模块的查询功能,现在用户管理、角色管理、菜单管理三个模块的搜索功能都能正常工作。用户可以通过搜索条件快速找到需要的数据,提升了系统的可用性和用户体验。 ### 2025-01-16 190000 - 地区树接口缺失修复 **会话主要目的:** 修复审核提交页面中 `getRegionTree` 方法缺失的问题,添加完整的地区树形结构接口支持。 **完成的主要任务:** 1. **后端接口添加**: - 在 `RegionController` 中添加了 `/api/v1/regions/tree` 接口 - 在 `RegionService` 接口中添加了 `getRegionTree()` 方法声明 - 在 `RegionServiceImpl` 中实现了地区树形结构的构建逻辑 2. **实体类扩展**: - 在 `Region` 实体类中添加了 `children` 字段 - 添加了 `List` 的导入声明 - 支持树形结构的序列化和反序列化 3. **前端API完善**: - 在 `region.js` 中添加了 `getRegionTree()` 方法 - 确保前端能够正确调用地区树接口 4. **地区树构建逻辑**: - 获取所有省份作为根节点 - 为每个省份添加对应的城市列表 - 为每个城市添加对应的区县列表 - 构建完整的省-市-区三级树形结构 **关键决策和解决方案:** - **树形结构设计**:使用 `children` 字段构建嵌套的树形结构 - **接口设计**:遵循 RESTful 规范,使用 `/tree` 路径获取树形数据 - **性能优化**:一次性获取完整的地区树,避免多次请求 - **数据完整性**:确保省市区三级数据的完整性和准确性 **使用的技术栈:** - SpringBoot 2.x - MyBatis-Plus - Vue 2.x - Element UI Cascader 组件 **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/controller/RegionController.java` - 添加地区树接口 - `cs-server-api/src/main/java/com/company/genealogy/service/RegionService.java` - 添加服务接口方法 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/RegionServiceImpl.java` - 实现地区树构建逻辑 - `cs-server-api/src/main/java/com/company/genealogy/entity/Region.java` - 添加 children 字段 - `web-admin/src/api/region.js` - 添加前端 API 方法 **地区树结构特点:** - **三级结构**:省-市-区完整的三级地区结构 - **树形数据**:支持嵌套的树形数据结构 - **级联选择**:支持 Element UI 的 Cascader 级联选择器 - **数据完整**:包含所有省市区数据,支持籍贯选择 **修复的具体问题:** 1. **导入错误**:解决了 `getRegionTree` 方法未找到的导入错误 2. **接口缺失**:添加了完整的地区树获取接口 3. **数据结构**:完善了地区实体类的树形结构支持 4. **前端调用**:确保前端能够正确调用地区树接口 **结果:** 成功修复了地区树接口缺失的问题,现在审核提交页面可以正常获取地区树形数据,支持籍贯的级联选择功能。地区树接口为整个系统提供了完整的地区数据支持,提升了用户体验。 **完成的主要任务:** 1. 优化审核中心主页面(Index.vue)的样式: - 采用现代化的渐变背景设计 - 统一卡片样式和阴影效果 - 优化统计卡片的视觉效果和悬停动画 - 改进按钮样式,使用渐变色和悬停效果 - 优化表格样式和操作按钮布局 - 统一分页器样式 - 简化搜索栏样式,与配偶模块保持一致 2. 优化审核提交页面(Submit.vue)的样式: - 应用相同的背景渐变和卡片设计 - 改进表单样式,增加焦点效果 - 优化照片上传组件样式 - 统一按钮设计和布局 - 改进响应式设计 3. 统一颜色主题和设计语言: - 使用蓝紫色渐变作为主色调 - 统一按钮悬停效果和过渡动画 - 保持与配偶模块一致的视觉风格 - 简化搜索栏设计,移除自定义样式 **关键决策和解决方案:** - 采用与配偶模块相同的设计系统,确保界面一致性 - 使用 CSS 渐变和动画效果提升用户体验 - 优化响应式设计,确保在不同设备上的良好表现 - 保持原有的功能逻辑不变,仅优化视觉效果 **使用的技术栈:** - Vue 2.x - Element UI - CSS3 渐变和动画 - 响应式设计 **修改的文件:** - `web-admin/src/views/audit/Index.vue` - 审核中心主页面样式优化 - `web-admin/src/views/audit/Submit.vue` - 审核提交页面样式优化 **结果:** 成功优化了审核中心模块的样式风格,使其与配偶模块保持一致的设计语言。界面更加现代化、美观,用户体验得到显著提升。所有样式改进都保持了原有的功能逻辑,确保了系统的稳定性。 ### 2025-01-16 144500 - 微信登录功能完善 **会话主要目的:** 完善微信小程序登录功能,实现完整的微信API调用、用户信息处理、资料完整性检查等功能。 **完成的主要任务:** 1. **扩展数据传输对象**: - 扩展 `WxLoginDTO`,添加昵称、头像、性别、地区等微信用户信息字段 - 扩展 `UserLoginVO`,添加资料完整性标识字段 2. **创建微信API服务**: - 创建 `WxApiService` 接口,定义微信API调用方法 - 实现 `WxApiServiceImpl` 类,包含获取openid和检查资料完整性的方法 - 添加微信小程序配置(appid、secret)到配置文件 3. **完善微信登录流程**: - 调用微信API获取openid和session_key - 根据openid查找或创建用户 - 更新用户微信信息(昵称、头像等) - 更新最后登录时间 - 生成JWT token - 检查用户资料完整性 - 返回完整的登录结果 4. **添加配置和依赖**: - 在 `application.yml` 中添加微信小程序配置 - 在 `WebConfig` 中添加 `RestTemplate` Bean - 为 `User` 实体类添加 `updatedAt` 字段 5. **错误处理和异常管理**: - 添加微信API调用失败的错误处理 - 添加用户创建和更新的异常处理 - 提供详细的错误信息返回 **关键决策和解决方案:** - 采用分层设计:Service层处理业务逻辑,Controller层处理HTTP请求 - 使用RestTemplate调用微信API,简化HTTP请求处理 - 实现用户信息的增量更新,避免覆盖已有数据 - 添加资料完整性检查,为后续完善资料流程做准备 - 统一错误处理机制,提供友好的错误信息 **使用的技术栈:** - SpringBoot 2.x - MyBatis-Plus - RestTemplate - JWT认证 - 微信小程序API **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/dto/WxLoginDTO.java` - 扩展微信登录参数 - `cs-server-api/src/main/java/com/company/genealogy/vo/UserLoginVO.java` - 添加资料完整性标识 - `cs-server-api/src/main/java/com/company/genealogy/service/WxApiService.java` - 新增微信API服务接口 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/WxApiServiceImpl.java` - 实现微信API调用 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/AuthServiceImpl.java` - 完善微信登录逻辑 - `cs-server-api/src/main/java/com/company/genealogy/entity/User.java` - 添加更新时间字段 - `cs-server-api/src/main/java/com/company/genealogy/config/WebConfig.java` - 添加RestTemplate配置 - `cs-server-api/src/main/resources/application.yml` - 添加微信小程序配置 **功能特性:** - 🔐 完整的微信登录流程,支持新用户注册和老用户登录 - 📱 自动获取和更新微信用户信息(昵称、头像等) - ✅ 资料完整性检查,为后续完善资料流程做准备 - 🛡️ 完善的错误处理和异常管理 - 🔄 支持用户信息的增量更新 - 📊 返回详细的登录状态和用户信息 **结果:** 成功完善了微信登录功能,实现了完整的微信API调用、用户信息处理、资料完整性检查等功能。代码编译通过,为后续的小程序开发提供了完整的登录基础。 ### 2025-01-16 145000 - RestTemplate JSON解析问题修复 **会话主要目的:** 修复微信API调用中RestTemplate无法解析JSON响应的问题,确保微信登录功能正常工作。 **完成的主要任务:** 1. **问题分析**: - 发现错误:`Could not extract response: no suitable HttpMessageConverter found for response type [interface java.util.Map] and content type [text/plain]` - 原因:RestTemplate默认无法直接解析JSON响应为Map类型 - 影响:微信登录功能无法正常工作 2. **解决方案实现**: - 修改 `WxApiServiceImpl.getOpenidByCode()` 方法 - 使用 `restTemplate.getForEntity(url, String.class)` 获取String响应 - 使用 `ObjectMapper` 手动解析JSON字符串为Map - 添加更详细的错误处理和响应验证 3. **配置完善**: - 在 `WebConfig` 中添加 `ObjectMapper` Bean - 确保JSON解析器正确配置 4. **错误处理优化**: - 添加响应体为空的检查 - 提供更详细的错误信息 - 区分不同类型的错误情况 **关键决策和解决方案:** - 采用手动JSON解析方式,避免RestTemplate的HttpMessageConverter限制 - 使用ObjectMapper进行JSON解析,提供更好的错误处理 - 添加多层错误检查,确保响应数据的完整性 - 保持与微信API的兼容性,正确处理各种响应情况 **使用的技术栈:** - SpringBoot 2.x - RestTemplate - Jackson ObjectMapper - 微信小程序API **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/service/impl/WxApiServiceImpl.java` - 修复JSON解析问题 - `cs-server-api/src/main/java/com/company/genealogy/config/WebConfig.java` - 添加ObjectMapper配置 **修复内容:** - 将 `restTemplate.getForObject(url, Map.class)` 改为 `restTemplate.getForEntity(url, String.class)` - 使用 `ObjectMapper.readValue()` 手动解析JSON响应 - 添加响应体为空的检查 - 优化错误信息处理 **结果:** 成功修复了RestTemplate JSON解析问题,微信登录功能现在可以正常工作。代码编译通过,API调用能够正确解析微信返回的JSON响应。 ### 2025-01-16 150000 - 认证鉴权系统重构 **会话主要目的:** 重构认证鉴权系统,使其更符合陈氏族谱系统的业务逻辑,支持家族和分支级别的权限控制,提升系统的安全性和可维护性。 **完成的主要任务:** 1. **重构UserDetailsServiceImpl**: - 修改用户查找逻辑,支持通过用户ID和用户名两种方式查找 - 添加用户状态检查,禁用状态用户无法登录 - 扩展权限体系,添加用户类型、家族、分支级别的权限 - 使用用户ID作为principal,与JWT token保持一致 2. **优化JwtAuthenticationFilter**: - 修改认证逻辑,从JWT中获取用户ID而不是用户名 - 添加异常处理,避免认证失败影响正常请求 - 提升错误日志记录,便于问题排查 3. **完善SecurityConfig**: - 重新设计URL权限控制,按功能模块分类 - 区分小程序用户和后台管理员的权限 - 添加更细粒度的接口权限控制 - 保持向后兼容性 4. **创建自定义权限评估器**: - 实现 `GenealogyPermissionEvaluator`,支持家族和分支级别权限 - 支持基于对象的权限检查 - 提供灵活的权限控制机制 5. **创建安全上下文工具类**: - 实现 `SecurityContextUtil`,提供便捷的用户信息获取方法 - 支持角色检查、家族权限检查、分支权限检查 - 提供当前用户ID、家族ID、分支ID的获取方法 **关键决策和解决方案:** - **统一用户标识**:使用用户ID作为主要标识,与JWT token保持一致 - **多级权限体系**:角色权限 + 用户类型权限 + 家族权限 + 分支权限 - **灵活权限控制**:支持基于URL的权限控制和基于对象的权限控制 - **异常安全处理**:认证失败不影响正常业务流程 - **工具类封装**:提供便捷的安全上下文访问方法 **使用的技术栈:** - Spring Security 5.x - JWT认证 - 自定义权限评估器 - 反射机制(权限检查) **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/service/impl/UserDetailsServiceImpl.java` - 重构用户详情服务 - `cs-server-api/src/main/java/com/company/genealogy/config/JwtAuthenticationFilter.java` - 优化JWT认证过滤器 - `cs-server-api/src/main/java/com/company/genealogy/config/SecurityConfig.java` - 完善安全配置 - `cs-server-api/src/main/java/com/company/genealogy/config/GenealogyPermissionEvaluator.java` - 新增自定义权限评估器 - `cs-server-api/src/main/java/com/company/genealogy/common/SecurityContextUtil.java` - 新增安全上下文工具类 **权限体系设计:** - **角色权限**:ROLE_ADMIN、ROLE_USER、ROLE_MINIAPP - **用户类型权限**:ROLE_MINIAPP、ROLE_ADMIN - **家族权限**:CLAN_{clanId} - **分支权限**:BRANCH_{branchId} **功能特性:** - 🔐 **多级权限控制**:支持角色、用户类型、家族、分支四个层级的权限 - 🛡️ **安全认证**:基于JWT的无状态认证,支持用户状态检查 - 🎯 **精确权限**:支持基于对象的权限检查,如家族成员只能访问本家族数据 - 🛠️ **便捷工具**:提供丰富的安全上下文工具方法 - 📊 **灵活配置**:支持细粒度的URL权限控制 - 🔄 **向后兼容**:保持现有接口的兼容性 **使用示例:** ```java // 检查当前用户是否是管理员 if (SecurityContextUtil.isAdmin()) { // 管理员操作 } // 检查当前用户是否有指定家族权限 if (SecurityContextUtil.hasClanPermission(clanId)) { // 家族相关操作 } // 获取当前用户的家族ID Optional clanId = SecurityContextUtil.getCurrentUserClanId(); ``` **结果:** 成功重构了认证鉴权系统,建立了完善的多级权限控制体系。系统现在支持家族和分支级别的权限控制,提供了丰富的安全工具类,大大提升了系统的安全性和可维护性。代码编译通过,为后续的业务开发提供了强大的权限控制基础。 ### 2025-01-16 151500 - 数据库表结构修正 **会话主要目的:** 根据认证鉴权系统的需求,修正数据库表结构,确保数据库设计与代码实现完全匹配,解决角色编码不一致等问题。 **完成的主要任务:** 1. **修正角色编码**: - 将数据库中的角色编码从 `ROLE_ADMIN`、`ROLE_CLAN_LEADER` 等修正为 `ADMIN`、`MINIAPP`、`USER` - 与代码中使用的角色编码保持一致 - 更新初始角色数据,简化角色体系 2. **统一字段格式**: - 修正用户表中 `clan_id` 和 `branch_id` 字段的格式 - 确保所有字段命名和类型的一致性 - 修正索引名称,与表名保持一致 3. **更新UserDetailsServiceImpl**: - 修改角色权限映射,使用 `role.getCode()` 而不是 `role.getName()` - 确保权限字符串的生成与数据库中的角色编码一致 4. **优化初始数据**: - 简化角色体系:ADMIN(超级管理员)、MINIAPP(小程序用户)、USER(普通用户) - 调整角色-菜单关系,符合新的权限体系 - 移除不必要的复杂角色设计 **关键决策和解决方案:** - **统一角色编码**:数据库和代码使用相同的角色编码,避免映射错误 - **简化权限体系**:从复杂的多角色设计简化为三个核心角色 - **保持向后兼容**:确保现有功能不受影响 - **字段格式统一**:确保数据库字段格式的一致性 **使用的技术栈:** - MySQL 8.0 - MyBatis Plus - Spring Security - JWT认证 **修改的文件:** - `cs-server-api/db_schema.sql` - 修正数据库表结构和初始数据 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/UserDetailsServiceImpl.java` - 更新角色权限映射 **数据库表结构优化:** - ✅ **用户表 (user)**:支持家族和分支权限,用户类型和状态检查 - ✅ **角色表 (role)**:统一角色编码,支持权限标识 - ✅ **用户角色关联表 (user_role)**:支持多对多关系 - ✅ **菜单表 (menu)**:支持权限标识和菜单类型 - ✅ **角色菜单关联表 (role_menu)**:支持角色与菜单的关联 **角色权限体系:** - **ADMIN**:超级管理员,拥有所有权限 - **MINIAPP**:小程序用户,可查看家族信息和参与审核 - **USER**:普通用户,基础查看权限 **功能特性:** - 🔄 **统一编码**:数据库和代码使用相同的角色编码 - 🎯 **简化权限**:从复杂多角色简化为三个核心角色 - 📊 **完整支持**:支持用户类型、家族、分支级别的权限 - 🛡️ **状态检查**:支持用户状态验证 - 🔗 **关联完整**:用户-角色-菜单关联体系完整 **数据库设计亮点:** - **多级权限支持**:用户表包含 `clan_id` 和 `branch_id`,支持家族和分支权限 - **用户类型区分**:`user_type` 字段区分小程序用户和后台用户 - **状态管理**:`status` 字段支持用户状态控制 - **角色体系**:通过 `user_role` 表实现灵活的角色分配 - **菜单权限**:通过 `role_menu` 表实现细粒度的菜单权限控制 **结果:** 成功修正了数据库表结构,解决了角色编码不一致的问题。数据库设计现在完全符合认证鉴权系统的需求,支持多级权限控制,为系统的安全性和可维护性提供了坚实的基础。代码编译通过,数据库结构优化完成。 ### 2025-01-16 152000 - 角色编码体系重新设计 **会话主要目的:** 按照数据库设计的思路重新设计角色编码体系,使用规范的ROLE_前缀格式,并相应更新代码逻辑,建立完整的五级角色权限体系。 **完成的主要任务:** 1. **重新设计角色编码体系**: - 使用规范的 `ROLE_` 前缀格式 - 建立五级角色体系:ROLE_ADMIN、ROLE_CLAN_LEADER、ROLE_BRANCH_ADMIN、ROLE_MINIAPP、ROLE_USER - 每个角色都有明确的权限边界和职责 2. **更新UserDetailsServiceImpl**: - 修改角色权限映射,直接使用数据库中的角色编码 - 移除多余的 `ROLE_` 前缀添加逻辑 - 确保权限字符串与数据库角色编码完全一致 3. **完善SecurityConfig**: - 更新URL权限控制,支持新的五级角色体系 - 细化不同角色的接口访问权限 - 建立更精确的权限控制策略 4. **扩展SecurityContextUtil**: - 添加族长、分支管理员、普通用户的角色检查方法 - 增加管理权限和分支管理权限的组合检查方法 - 提供更丰富的权限判断工具 5. **优化GenealogyPermissionEvaluator**: - 更新权限评估逻辑,支持族长权限 - 完善家族和分支级别的权限控制 - 建立更灵活的权限评估机制 **关键决策和解决方案:** - **规范角色编码**:使用 `ROLE_` 前缀,符合Spring Security标准 - **五级角色体系**:从简单三角色扩展到完整的五级角色体系 - **权限边界清晰**:每个角色都有明确的权限范围和职责 - **代码逻辑统一**:所有代码都使用相同的角色编码格式 **使用的技术栈:** - Spring Security 5.x - JWT认证 - 自定义权限评估器 - 反射机制(权限检查) **修改的文件:** - `cs-server-api/db_schema.sql` - 重新设计角色编码和权限分配 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/UserDetailsServiceImpl.java` - 更新角色权限映射 - `cs-server-api/src/main/java/com/company/genealogy/config/SecurityConfig.java` - 完善URL权限控制 - `cs-server-api/src/main/java/com/company/genealogy/common/SecurityContextUtil.java` - 扩展权限检查工具 - `cs-server-api/src/main/java/com/company/genealogy/config/GenealogyPermissionEvaluator.java` - 优化权限评估逻辑 **五级角色权限体系:** - **ROLE_ADMIN**:超级管理员,拥有所有权限 - **ROLE_CLAN_LEADER**:族长,拥有除系统管理外的所有权限 - **ROLE_BRANCH_ADMIN**:分支管理员,可管理本分支成员 - **ROLE_MINIAPP**:小程序用户,可查看家族信息和参与审核 - **ROLE_USER**:普通用户,基础查看权限 **权限分配策略:** - **超级管理员**:所有菜单和功能权限 - **族长**:除系统管理外的所有权限,可管理家族和分支 - **分支管理员**:基础查看、成员管理、审核权限 - **小程序用户**:查看权限和审核权限 - **普通用户**:基础查看权限 **功能特性:** - 🎯 **五级角色体系**:完整的角色权限层次结构 - 🔐 **规范编码格式**:使用标准的 `ROLE_` 前缀 - 📊 **精确权限控制**:每个角色都有明确的权限边界 - 🛠️ **丰富工具方法**:提供多种权限检查组合方法 - 🔄 **灵活权限评估**:支持基于对象的权限检查 - 📋 **清晰权限分配**:角色-菜单关系明确,权限分配合理 **使用示例:** ```java // 检查当前用户是否是族长 if (SecurityContextUtil.isClanLeader()) { // 族长操作 } // 检查当前用户是否有管理权限 if (SecurityContextUtil.hasAdminPermission()) { // 管理员或族长操作 } // 检查当前用户是否有分支管理权限 if (SecurityContextUtil.hasBranchAdminPermission()) { // 分支管理操作 } ``` **数据库设计亮点:** - **规范角色编码**:使用 `ROLE_` 前缀,符合Spring Security标准 - **完整角色体系**:五级角色覆盖所有业务场景 - **精确权限分配**:角色-菜单关系明确,权限分配合理 - **灵活权限控制**:支持家族和分支级别的权限控制 **结果:** 成功重新设计了角色编码体系,建立了完整的五级角色权限体系。系统现在使用规范的 `ROLE_` 前缀格式,支持精确的权限控制和灵活的权限评估。代码编译通过,角色权限体系设计完成,为陈氏族谱系统提供了强大而规范的安全控制机制。 ### 2025-01-16 153000 - 分支关联查询功能开发 **会话主要目的:** 解决前端成员管理页面中分支选择没有根据家族选择进行关联查询的问题,实现家族和分支的级联选择功能。 **完成的主要任务:** 1. **前端API接口扩展**: - 在 `web-admin/src/api/branch.js` 中添加 `getBranchesByClanId` 方法 - 支持根据家族ID获取对应的分支列表 2. **前端页面逻辑优化**: - 修改 `web-admin/src/views/member/Index.vue` 中的家族和分支选择逻辑 - 为家族选择添加 `@change` 事件监听 - 分支选择添加 `:disabled` 属性,未选择家族时禁用 - 使用 `filteredBranchList` 替代 `branchList` 显示分支选项 3. **后端接口开发**: - 在 `BranchController` 中添加 `/clan/{clanId}` 接口 - 在 `BranchService` 接口中添加 `getBranchesByClanId` 方法 - 在 `BranchServiceImpl` 中实现根据家族ID查询分支列表的逻辑 4. **用户体验优化**: - 家族选择变化时自动清空分支选择 - 分支选择在未选择家族时禁用 - 编辑成员时自动加载对应的分支列表 - 新增成员时正确初始化分支选择状态 **关键决策和解决方案:** - **级联选择设计**:家族选择变化时自动更新分支选项 - **状态管理优化**:使用 `filteredBranchList` 管理当前可用的分支列表 - **用户体验提升**:分支选择在未选择家族时禁用,避免无效选择 - **数据一致性**:确保编辑时能正确回显家族和分支的关联关系 **使用的技术栈:** - Vue.js 2.x - Element UI - Spring Boot - MyBatis Plus - RESTful API **修改的文件:** - `web-admin/src/api/branch.js` - 添加根据家族ID获取分支列表的API方法 - `web-admin/src/views/member/Index.vue` - 优化家族和分支的级联选择逻辑 - `cs-server-api/src/main/java/com/company/genealogy/controller/BranchController.java` - 添加根据家族ID获取分支列表的接口 - `cs-server-api/src/main/java/com/company/genealogy/service/BranchService.java` - 添加服务接口方法 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/BranchServiceImpl.java` - 实现根据家族ID查询分支列表的逻辑 **功能特性:** - 🔗 **级联选择**:家族选择变化时自动更新分支选项 - 🎯 **精确过滤**:只显示当前选择家族下的分支 - 🛡️ **状态控制**:未选择家族时分支选择禁用 - 🔄 **自动回显**:编辑时正确显示家族和分支的关联关系 - 📱 **用户体验**:直观的级联选择界面,操作流畅 **API接口设计:** ```javascript // 前端API调用 getBranchesByClanId(clanId) { return request({ url: `/api/v1/branches/clan/${clanId}`, method: 'get' }); } // 后端接口 @GetMapping("/clan/{clanId}") public ApiResponse> getBranchesByClanId(@PathVariable Long clanId) ``` **前端实现逻辑:** ```javascript // 家族选择变化时的处理 async onClanChange(clanId) { this.form.branchId = ''; // 清空分支选择 this.filteredBranchList = []; if (clanId) { const data = await getBranchesByClanId(clanId); this.filteredBranchList = data || []; } } ``` **数据库查询逻辑:** ```java @Override public List getBranchesByClanId(Long clanId) { QueryWrapper queryWrapper = new QueryWrapper<>(); queryWrapper.eq("clan_id", clanId); queryWrapper.orderByAsc("name"); return this.list(queryWrapper); } ``` **结果:** 成功实现了家族和分支的级联选择功能,解决了分支选择没有根据家族选择进行关联查询的问题。用户现在可以直观地选择家族,然后从对应的分支列表中选择合适的分支,大大提升了用户体验和数据录入的准确性。代码编译通过,功能测试完成。 ### 2025-01-16 154000 - 分页查询性能优化 **会话主要目的:** 解决MemberController中分页逻辑不合理的问题,将逻辑分页改为数据库分页查询,提高大数据量场景下的查询性能。 **完成的主要任务:** 1. **后端服务层优化**: - 在 `MemberService` 接口中添加 `getMemberListWithPage` 方法 - 在 `MemberServiceImpl` 中实现数据库分页查询逻辑 - 使用MyBatis Plus的 `Page` 对象进行分页 2. **数据访问层扩展**: - 在 `MemberMapper` 接口中添加 `selectMemberListWithPage` 方法 - 在 `MemberMapper.xml` 中添加对应的SQL实现 - 保持与现有查询相同的关联查询逻辑 3. **控制器层重构**: - 修改 `MemberController` 中的 `list` 方法 - 移除逻辑分页代码,直接使用数据库分页查询 - 简化代码逻辑,提高执行效率 4. **性能优化策略**: - 从全量查询改为分页查询 - 减少内存占用和网络传输 - 提高大数据量场景下的响应速度 **关键决策和解决方案:** - **数据库分页**:使用MyBatis Plus的分页插件,在数据库层面进行分页 - **保持功能一致**:分页查询保持与原有查询相同的关联查询和条件过滤 - **性能优先**:避免全量查询后再逻辑分页的性能问题 - **代码简化**:移除复杂的手动分页逻辑 **使用的技术栈:** - MyBatis Plus 分页插件 - Spring Boot - MySQL 数据库分页 - RESTful API **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/service/MemberService.java` - 添加分页查询接口 - `cs-server-api/src/main/java/com/company/genealogy/service/impl/MemberServiceImpl.java` - 实现分页查询逻辑 - `cs-server-api/src/main/java/com/company/genealogy/mapper/MemberMapper.java` - 添加分页查询方法 - `cs-server-api/src/main/resources/mapper/MemberMapper.xml` - 添加分页查询SQL实现 - `cs-server-api/src/main/java/com/company/genealogy/controller/MemberController.java` - 重构分页查询逻辑 **性能优化对比:** **优化前(逻辑分页):** ```java // 查询全部数据 List memberList = memberService.getMemberList(name, gender, clanId, branchId); // 手动分页 int start = (page - 1) * size; int end = Math.min(start + size, memberList.size()); List pageList = memberList.subList(start, end); ``` **优化后(数据库分页):** ```java // 直接使用数据库分页查询 IPage result = memberService.getMemberListWithPage(page, size, name, gender, clanId, branchId); ``` **SQL查询优化:** ```xml ``` **功能特性:** - ⚡ **高性能**:使用数据库分页,避免全量查询 - 🎯 **精确分页**:在数据库层面进行分页,结果准确 - 📊 **大数据支持**:支持大量数据的快速分页查询 - 🔄 **功能一致**:保持与原有查询相同的关联查询和过滤条件 - 💾 **内存优化**:减少内存占用,提高系统稳定性 **性能提升效果:** - **查询速度**:大数据量场景下查询速度提升显著 - **内存占用**:避免全量数据加载到内存 - **网络传输**:只传输当前页数据,减少网络开销 - **系统稳定性**:避免内存溢出风险 **结果:** 成功优化了分页查询逻辑,将逻辑分页改为数据库分页查询。在大数据量场景下,查询性能得到显著提升,内存占用大幅减少,系统稳定性得到保障。代码结构更加清晰,维护性更好。 ### 2025-01-16 154500 - 编辑成员时分支反显问题修复 **会话主要目的:** 解决编辑成员时分支字段没有自动反显的问题,确保编辑模式下分支数据能够正确加载和显示。 **完成的主要任务:** 1. **前端逻辑优化**: - 修改 `onClanChange` 方法,在编辑模式下不清空分支选择 - 优化 `edit` 方法,确保分支数据正确加载和类型匹配 - 修改表单初始值,确保ID字段类型一致(null而不是空字符串) 2. **数据类型处理**: - 统一ID字段类型为数字类型 - 添加类型转换和匹配逻辑 - 确保前后端数据类型一致 3. **调试信息增强**: - 添加详细的调试日志 - 帮助诊断分支数据加载问题 - 便于问题排查和验证 4. **用户体验优化**: - 修复分支字段反显问题 - 确保编辑时数据完整性 - 提升表单操作体验 **关键决策和解决方案:** - **模式区分**:区分新增和编辑模式,编辑时不清空分支选择 - **类型匹配**:确保前端ID字段类型与后端一致 - **数据验证**:检查分支ID是否在加载的分支列表中 - **调试支持**:添加详细日志便于问题诊断 **使用的技术栈:** - Vue.js 2.x - Element UI - JavaScript ES6+ - 前端调试技术 **修改的文件:** - `web-admin/src/views/member/Index.vue` - 优化编辑逻辑和分支反显 **问题分析:** **原问题:** - 编辑成员时分支字段显示"请选择" - 分支数据没有自动反显 - 家族切换时清空分支选择 **根本原因:** 1. **模式混淆**:新增和编辑模式都清空分支选择 2. **类型不匹配**:前端使用字符串,后端使用数字 3. **数据加载时机**:分支数据加载后没有正确匹配 **解决方案:** **1. 模式区分优化:** ```javascript // 只有在新增模式下才清空分支选择 if (!this.showEdit) { this.form.branchId = null; } ``` **2. 类型匹配处理:** ```javascript // 将分支ID转换为数字类型进行比较 const branchIdNum = Number(this.form.branchId); const branchExists = this.filteredBranchList.some(branch => Number(branch.id) === branchIdNum ); ``` **3. 数据初始化优化:** ```javascript // 修改初始值,确保类型一致 form: { id: null, clanId: null, branchId: null, fatherId: null, motherId: null, spouseId: null, // ... 其他字段 } ``` **功能特性:** - ✅ **正确反显**:编辑时分支字段正确显示 - 🔄 **模式区分**:新增和编辑模式分别处理 - 🎯 **类型匹配**:确保前后端数据类型一致 - 🐛 **调试支持**:添加详细日志便于问题排查 - 💾 **数据完整性**:确保编辑时数据不丢失 **修复效果:** - **用户体验**:编辑时分支字段正确反显 - **数据一致性**:前后端数据类型统一 - **操作流畅性**:避免不必要的数据清空 - **调试便利性**:添加详细日志便于问题排查 **测试验证:** - ✅ 编辑成员时分支字段正确显示 - ✅ 家族切换时编辑模式不清空分支 - ✅ 新增模式正常清空分支选择 - ✅ 数据类型匹配正确 - ✅ 调试信息输出正常 **结果:** 成功修复了编辑成员时分支字段没有自动反显的问题。现在编辑成员时,分支字段能够正确显示对应的分支名称,用户体验得到显著提升。同时优化了数据类型处理,确保前后端数据一致性。 --- ### 会话总结(2024-07-16 164000) - 主要目的:优化前端成员管理页面的用户体验,增加查询条件重置按钮。 - 完成的主要任务:在web-admin/src/views/member/Index.vue页面的搜索表单中新增"重置"按钮,点击后可清空所有查询条件并刷新成员列表。 - 关键决策和解决方案:采用Element UI的el-button组件,重置searchForm对象并重新加载数据。 - 使用的技术栈:Vue2、Element UI。 ### 会话总结(2024-07-16 164500) - 主要目的:优化成员管理页面的分支查询条件,确保分支下拉能根据家族选择动态联动。 - 完成的主要任务:恢复家族查询条件,家族选择后分支下拉自动筛选,仅显示对应家族下的分支,未选家族时禁用分支选择。 - 关键决策和解决方案:采用前端联动方式,家族变化时动态请求分支并重置分支选项,提升查询准确性和用户体验。 - 使用的技术栈:Vue2、Element UI。 ## 会话总结(2024-07-16 170000) ### 主要目的 - 实现家谱树状图多配偶、长幼排序、主视角关系等高级展示与编辑功能,前后端全链路适配。 ### 完成的主要任务 1. 数据库表结构升级: - tb_member 增加 child_order 字段。 - 新增 tb_member_spouse 多对多配偶关系表。 2. 后端: - 新增 FamilyTreeNodeWithRelationVO,支持多配偶、长幼排序、关系类型。 - 新增 /api/v1/family/tree-with-relation 接口,递归组装家族树。 - 新增 MemberSpouseMapper、批量维护配偶关系接口 /api/v1/member-spouse/batch-update。 3. 前端: - treeData 适配新VO,树状图支持多配偶、长幼、主视角展示。 - MemberForm 支持多配偶选择、排行输入。 - 新增/编辑成员时自动批量维护配偶关系。 - 右侧详情展示所有配偶、排行、关系类型。 ### 关键决策和解决方案 - 采用多对多表支持一夫多妻/一妻多夫,接口全量覆盖式批量维护。 - 前端与后端接口解耦,兼容原有功能,便于平滑升级。 - 采用递归VO和自定义label/tooltip,提升树状图可读性和美观性。 ### 技术栈 - Spring Boot 2.x - MyBatis-Plus - Vue2 + Element-UI + ECharts ### 涉及文件 - cs-server-api/db_schema.sql - cs-server-api/src/main/java/com/company/genealogy/entity/Member.java - cs-server-api/src/main/java/com/company/genealogy/entity/MemberSpouse.java - cs-server-api/src/main/java/com/company/genealogy/vo/FamilyTreeNodeWithRelationVO.java - cs-server-api/src/main/java/com/company/genealogy/service/FamilyTreeService.java - cs-server-api/src/main/java/com/company/genealogy/service/impl/FamilyTreeServiceImpl.java - cs-server-api/src/main/java/com/company/genealogy/mapper/MemberSpouseMapper.java - cs-server-api/src/main/java/com/company/genealogy/controller/FamilyTreeController.java - cs-server-api/src/main/java/com/company/genealogy/controller/MemberController.java - web-admin/src/api/familytree.js - web-admin/src/views/familytree/FamilyTreeGraph.vue - web-admin/src/views/familytree/Editor.vue - web-admin/src/views/familytree/MemberForm.vue ## 会话总结 - 2024-12-19 143022 ### 会话主要目的 实现成员子女排序功能,解决新增或修改成员时没有维护子女先后次序(长子、次子等)的问题。 ### 完成的主要任务 #### 后端实现 1. **自动分配子女排序号** - 在 `MemberAuditServiceImpl.addChildMember()` 中添加自动分配 `childOrder` 的逻辑 - 新增 `getNextChildOrder()` 方法,查询同一父母下现有最大排序号并+1 - 在 `MemberServiceImpl.importMembers()` 中为导入的成员自动分配子女排序号 2. **子女排序管理接口** - 新增 `MemberService` 接口方法:`getChildrenByParentId()`, `updateChildOrder()`, `reorderChildren()` - 在 `MemberController` ### 2025-01-16 143000 - 修复左侧菜单显示问题 **会话主要目的:** 解决前端左侧菜单不显示的问题 **完成的主要任务:** 1. 分析前端路由配置,发现路由没有使用MainLayout布局组件 2. 修复路由配置,为需要认证的路由添加MainLayout作为父组件 3. 修复MainLayout组件中的菜单加载逻辑,正确导入getUserMenuTree函数 4. 添加错误处理,当菜单加载失败时使用默认菜单 5. 修复登出功能,使用正确的clearAuth方法 **关键决策和解决方案:** - 使用嵌套路由结构,将MainLayout作为父路由,其他页面作为子路由 - 在MainLayout组件中添加try-catch错误处理,确保菜单始终能显示 - 提供默认菜单作为备用方案 **使用的技术栈:** - Vue Router嵌套路由 - Vuex状态管理 - Element UI组件库 - Axios HTTP请求 **修改的文件:** - `web-admin/src/router/index.js` - 修复路由配置,添加MainLayout布局 - `web-admin/src/layout/MainLayout.vue` - 修复菜单加载逻辑和错误处理 - `web-admin/src/views/dashboard/Index.vue` - 添加测试区域验证修复效果 **问题原因:** 路由配置中没有使用MainLayout组件作为布局容器,导致左侧菜单无法显示。 **解决方案:** 1. 将需要认证的路由配置为MainLayout的子路由 2. 确保MainLayout组件正确加载菜单数据 3. 添加错误处理机制,提供默认菜单作为备用 ### 2025-01-16 144500 - 修复JWT token处理Bearer前缀问题 **会话主要目的:** 修复JWT工具类中处理token时没有截取Bearer前缀的问题 **完成的主要任务:** 1. 在JwtUtil类中添加extractTokenFromAuthorization方法,统一处理Bearer前缀 2. 修改所有JWT token处理方法,支持带Bearer前缀的token 3. 添加空值检查和错误处理,提高代码健壮性 4. 更新方法注释,明确说明支持Bearer前缀 **关键决策和解决方案:** - 在JwtUtil类中统一处理Bearer前缀,避免在每个调用点重复处理 - 保持向后兼容性,同时支持带Bearer前缀和不带前缀的token - 添加完善的空值检查和异常处理 **使用的技术栈:** - Spring Boot JWT处理 - Spring Security认证 - Redis token管理 **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/common/util/JwtUtil.java` - 添加Bearer前缀处理逻辑 **问题原因:** JWT工具类中的方法直接使用传入的token,没有处理Authorization头中的"Bearer "前缀,导致token解析失败。 **解决方案:** 1. 添加extractTokenFromAuthorization方法统一处理Bearer前缀 2. 修改所有token处理方法,先提取clean token再进行处理 3. 添加完善的空值检查和异常处理机制 ### 2025-01-16 145000 - 修复路由配置和菜单路径匹配问题 **会话主要目的:** 修复菜单点击后页面空白的问题,确保路由配置与后端菜单数据匹配 **完成的主要任务:** 1. 添加缺失的路由配置,包括clan、branch、spouse、familynews等路由 2. 添加系统管理子路由:/system/user、/system/role、/system/menu 3. 修复MainLayout组件中的菜单路径匹配问题 4. 处理仪表盘路径不匹配问题(后端返回/dashboard,前端路由为/) **关键决策和解决方案:** - 在MainLayout组件中添加路径映射逻辑,将/dashboard映射为/ - 确保所有后端返回的菜单路径都有对应的前端路由配置 - 保持路由结构与菜单层级一致 **使用的技术栈:** - Vue Router动态路由配置 - Element UI菜单组件 - 前端路由守卫 **修改的文件:** - `web-admin/src/router/index.js` - 添加缺失的路由配置 - `web-admin/src/layout/MainLayout.vue` - 修复菜单路径匹配逻辑 **问题原因:** 1. 前端路由配置中缺少后端菜单数据中对应的路由 2. 菜单组件的index属性与路由路径不匹配 3. 仪表盘路径不一致(后端/dashboard vs 前端/) **解决方案:** 1. 添加所有缺失的路由配置 2. 在菜单渲染时处理路径映射 3. 确保菜单项的index与路由路径完全匹配 ### 2025-01-16 145500 - 修复token过期处理问题 **会话主要目的:** 修复token过期后没有主动刷新token的问题,优化token过期处理逻辑 **完成的主要任务:** 1. 实现完善的自动token刷新机制,包括请求队列管理 2. 恢复JWT token过期时间为30秒,用于测试自动刷新功能 3. 添加业务错误401和HTTP错误401的统一处理 4. 实现token刷新后的请求重试机制 5. 添加详细的调试日志,便于测试token自动刷新 **关键决策和解决方案:** - 实现请求队列机制,避免多个请求同时刷新token - 区分业务错误401和HTTP错误401的处理逻辑 - 使用独立的axios实例刷新token,避免循环调用 - 添加重试标记,防止无限重试 - 完善错误处理和日志输出 **使用的技术栈:** - Axios拦截器和请求队列 - JWT token自动刷新 - Promise异步处理 - 前端错误处理和重试机制 **修改的文件:** - `web-admin/src/api/request.js` - 实现完善的token自动刷新机制 - `cs-server-api/src/main/resources/application.yml` - 恢复30秒token过期时间用于测试 **问题原因:** 1. 缺少完善的token自动刷新机制 2. 没有处理多个并发请求的token刷新 3. 缺少请求重试和队列管理 **解决方案:** 1. 实现请求队列机制,统一管理token刷新 2. 区分业务错误和HTTP错误的处理 3. 添加重试标记和错误处理 4. 完善日志输出便于调试 5. 使用独立axios实例避免循环调用 ### 2025-01-16 150000 - 完善token过期检测和自动刷新机制 **会话主要目的:** 修复token过期后无法检测到过期状态,导致无法自动刷新token的问题 **完成的主要任务:** 1. 修改后端JWT过滤器,当token验证失败时返回401错误 2. 完善前端响应拦截器,正确处理业务错误401和HTTP错误401 3. 修改业务代码,添加token刷新后的重试逻辑 4. 添加详细的调试日志,便于跟踪token刷新过程 5. 实现token刷新后的请求重试机制 **关键决策和解决方案:** - 后端JWT过滤器在token验证失败时主动返回401错误 - 前端区分业务错误401和HTTP错误401的处理逻辑 - 在业务代码中添加TOKEN_REFRESHED错误的处理 - 使用try-catch包装API调用,处理token刷新后的重试 - 添加详细的调试日志输出 **使用的技术栈:** - Spring Security JWT过滤器 - Axios拦截器和错误处理 - Vue.js异步请求处理 - 前端错误重试机制 **修改的文件:** - `cs-server-api/src/main/java/com/company/genealogy/common/filter/JwtAuthenticationFilter.java` - 修改JWT过滤器返回401错误 - `web-admin/src/api/request.js` - 完善token过期检测和刷新逻辑 - `web-admin/src/views/spouse/Index.vue` - 添加token刷新后的重试逻辑 **问题原因:** 1. 后端JWT过滤器在token验证失败时没有返回401错误 2. 前端无法检测到token过期状态 3. 缺少token刷新后的请求重试机制 4. 业务代码没有处理token刷新的情况 **解决方案:** 1. 后端JWT过滤器主动返回401错误 2. 前端完善401错误的检测和处理 3. 在业务代码中添加token刷新重试逻辑 4. 添加详细的调试日志便于问题排查