前端历史记录管理页面开发

上一次做完登录注册功能之后系统的用户体系算是搭起来了但有一个问题一直没解决——用户之前提交的查询记录虽然后端都在存但前端根本看不到。QueryHistory实体类和QueryHistoryRepository都已经有了数据也在往里写就是缺一个页面让用户去查看和管理这些记录。这次就是要把这个缺口补上做一个完整的历史记录管理页面。一、开发目标后端创建历史记录REST接口支持分页查询、关键词搜索、状态筛选、时间范围筛选后端实现单条和批量删除功能均校验用户归属权限后端实现历史SQL重新执行功能包含安全校验后端实现查询趋势统计接口支持按日/周/月统计查询次数和成功率前端创建历史记录管理页面包含表格展示、搜索筛选、分页、详情弹窗前端实现批量选择和批量删除的交互逻辑前端详情弹窗中的执行结果以表格形式可视化展示重新执行结果也用弹窗表格展示前端实现可折叠的查询趋势统计区域用ECharts双Y轴图表展示页面集成统一导航栏和登录态校验二、核心开发工作2.1 后端HistoryControllerHistoryController一共提供了6个接口全部从HttpServletRequest的属性中获取userId由AuthInterceptor在请求进入时设置确保每个用户只能操作自己的数据。GET /api/history/list是主查询接口支持四种筛选条件的组合关键词搜索匹配自然语言查询和SQL、执行状态筛选SUCCESS/FAIL、时间范围筛选、以及无条件的默认分页查询。后端根据前端传来的参数组合调用QueryHistoryRepository中不同的查询方法。返回的数据做了简化处理——把QueryHistory实体转成Map只取需要的字段避免ManyToOne关联的UserInfo实体被序列化时产生循环引用。DELETE /api/history/{id}做了两层校验先检查记录是否存在且未删除再检查记录的userId是否和当前登录用户一致。校验通过后调用queryHistoryRepository.softDeleteById做软删除。POST /api/history/batch-delete是批量删除接口接收一个ListLong的ID列表。后端遍历每个ID逐条查询记录并校验归属——如果记录不存在或不属于当前用户就跳过并记录到skippedIds中。最终返回成功删除数、跳过数和被跳过的ID列表前端据此给出明确提示。POST /api/history/{id}/reexecute从历史记录中取出之前生成的SQL先经过SqlSecurityManager的安全校验校验通过后通过DatabaseService.executeQueryWithSecurityCheck执行SQL返回的ChatResponse中包含结构化的queryResultsListMapString, Object前端可以直接用来渲染表格。GET /api/history/statistics是统计接口支持periodday/week/month和days7/14/30两个参数。后端使用JdbcTemplate直接执行原生SQL按用户ID和时间范围过滤根据period参数选择不同的GROUP BY策略DATE()、YEARWEEK()、DATE_FORMAT()。返回每个时间段的查询总数、成功数、失败数、成功率以及汇总数据。2.2 前端history.html页面结构页面整体分为五个区域顶部导航栏、标题栏、筛选栏、统计区域、表格和分页。导航栏沿用了其他页面的统一结构历史记录链接带active类高亮。页面开头有内联JS做登录态校验。筛选栏包含四个输入项关键词搜索框支持回车触发、执行状态下拉框、开始时间和结束时间的datetime-local选择器以及查询和重置两个按钮。筛选栏下方是批量操作栏batch-bar默认隐藏选中记录后自动显示已选X条和删除选中按钮。统计区域是一个可折叠的面板默认收起点击 查询统计标题展开。展开后显示周期和天数选择器、四个汇总数据卡片总查询次数、成功次数、失败次数、整体成功率以及ECharts图表容器。页面引入了ECharts CDNecharts5.5.0。表格展示8列复选框、ID、查询问题、生成SQL、执行状态、耗时、查询时间、操作。复选框列支持全选/取消全选选中的行显示浅蓝色背景。操作列有详情、重执行、删除三个按钮。页面有两个弹窗详情弹窗detailOverlay和重新执行结果弹窗reexecuteOverlay宽度都是max-width: 900px。2.3 前端history.js交互逻辑history.js用IIFE封装维护了currentPage、totalPages、totalElements、currentDetailId、selectedIds、echartStatsInstance六个状态变量。列表加载和渲染逻辑与之前基本一致但每行增加了复选框渲染时会根据selectedIds对象恢复选中状态和行高亮。全选/取消全选通过toggleSelectAll实现单行选中通过toggleRowSelect实现两者都会同步更新全选复选框状态、批量操作栏显示和所有复选框的DOM状态。批量删除调用POST /api/history/batch-delete把selectedIds的键转成ID数组发送给后端。删除完成后调用clearSelection清空选中状态并刷新列表。详情弹窗中的执行结果展示做了比较大的改造。parseResultToTable函数会先尝试将结果文本解析为JSON数组如果失败则尝试按Tab分隔文本解析跳过第一行表头和第二行分隔线如果都解析失败就回退到纯文本展示。解析成功后调用buildResultTableHtml渲染为HTML表格超过100行只展示前100行并提示总数。重新执行功能不再使用alert展示结果而是打开独立的reexecuteOverlay弹窗。请求发送后先显示执行中…的加载提示返回结果后如果queryResults有数据就渲染表格否则显示文本内容。统计功能通过toggleStatistics控制展开/收起展开时自动调用loadStatistics加载数据。renderStatistics先渲染四个汇总卡片然后用ECharts渲染双Y轴图表左轴是柱状图显示查询次数右轴是折线图显示成功率百分比。切换周期或天数后图表自动刷新窗口resize时也会重绘。三、关键实现细节3.1 用户数据隔离整个历史记录模块的数据隔离建立在两层机制上后端所有接口都从request.getAttribute(userId)获取当前用户ID查询时通过Repository中带userId参数的方法过滤数据删除和重新执行时额外校验记录归属。批量删除时非本人记录会被跳过并在返回结果中告知前端前端据此提示用户。3.2 实体序列化与循环引用QueryHistory实体通过ManyToOne关联了UserInfo实体直接返回实体会导致Jackson序列化循环引用。解决方案是在Controller中手动构建MapString, Object只选取需要的字段。统计接口使用JdbcTemplate直接查原生SQL绕开了JPA实体返回的数据结构也更灵活。3.3 执行结果的多格式解析历史记录中保存的executionResult字段可能是不同格式后端formatQueryResults生成的是Tab分隔文本表头 分隔线 数据行而重新执行返回的queryResults是结构化的ListMapString, Object。前端parseResultToTable需要兼容这两种格式——先尝试JSON解析再尝试Tab分隔文本解析最后回退到纯文本。这种多层降级的策略确保了不同来源的数据都能正确展示。3.4 ECharts双Y轴图表设计统计图表使用双Y轴是因为查询次数和成功率的数值量级差异很大——次数可能是几十上百成功率是0-100的百分比。如果放在同一个Y轴上成功率的变化趋势会被完全淹没。左轴柱状图展示绝对数量右轴折线图展示百分比趋势两者配合可以直观看出查询量和质量的变化关系。四、开发总结本次开发完成了历史记录管理页面的全部功能包括后端6个REST接口分页查询、关键词搜索、单条删除、批量删除、重新执行、查询统计和前端完整的页面交互表格展示、多条件筛选、分页导航、复选框批量选择、批量删除、详情弹窗、执行结果表格可视化、重新执行结果弹窗、ECharts查询趋势统计图表。页面集成了统一导航栏和登录态校验导航栏的历史记录入口也随之生效。所有接口都基于用户ID做数据隔离删除和重新执行操作都有归属权限校验。五、后续规划后续可以考虑支持历史记录导出功能本次开发提示词任务二前端历史记录管理页面当前状态没有history.html历史记录管理页面没有history.js。QueryHistory实体类和QueryHistoryRepository已存在且已完善含用户ID过滤但前端无法查看。没有HistoryController.java提供REST接口。需要实现创建HistoryController.java提供以下接口GET /api/history/list — 分页查询当前用户的历史记录从请求属性获取userIdGET /api/history/search?keywordxxx — 按关键词搜索当前用户的历史记录DELETE /api/history/{id} — 删除单条历史记录软删除POST /api/history/{id}/reexecute — 重新执行某条历史记录的SQL创建history.html包含历史记录列表表格展示查询时间、自然语言问题、生成的SQL、执行状态搜索框按关键词搜索筛选条件按执行状态、时间范围分页组件删除按钮单条删除重新执行按钮创建history.js实现列表加载调用后端分页接口搜索功能分页切换删除确认重新执行调用后端接口后跳转到chat.html并展示结果导航栏中历史记录链接已预留href“history.html”页面完成后自动生效补充完善5. 批量删除功能后端新增POST /api/history/batch-delete接口前端表格添加复选框列和批量操作栏6. 详情弹窗执行结果表格可视化解析executionResult为HTML表格展示重新执行结果用弹窗表格展示替代alert7. 查询趋势统计后端新增GET /api/history/statistics接口按日/周/月统计前端用ECharts双Y轴图表展示可复用的现有资源QueryHistoryRepository已提供完整的按用户ID过滤查询方法QueryHistory实体类字段齐全前端api.js、stateManager.js可直接复用要求使用Spring Boot标准分层架构所有类和方法添加中文注释使用统一的ApiResponse格式返回数据异常由GlobalExceptionHandler统一处理前端使用原生HTML/CSS/JS不使用框架新页面需添加统一导航栏复制现有页面导航栏结构新页面需添加登录态校验复制现有页面内联校验脚本后端编译无错误