日喀则市网站建设_网站建设公司_轮播图_seo优化

测试

一、本作业的目标

验证后端核心功能在前端是否正确实现，确保前后端数据交互正常，保障用户操作流程顺畅，为阿尔法冲刺项目质量提供支撑。

二，测试工作安排

为高效完成后端功能前端实现验证，本次测试按“准备-执行-复盘”三阶段推进，具体安排如下：

1. 测试准备阶段（1天）：与前后端开发团队对齐测试范围，确认后端核心接口清单及前端功能页面；搭建测试环境，确保后端8090端口、前端8011端口服务正常启动，初始化MySQL测试数据；准备测试工具并熟悉使用方法。

2. 测试执行阶段（3天）：按“用户登录功能→个人主页发帖与地图集成功能→详情页/聊天/交易管理功能→通知系统与后台框架设置功能”的顺序逐一验证；每完成一个功能测试，实时记录测试步骤、结果及截图，发现问题立即反馈开发团队。

3. 复盘优化阶段（1天）：整理测试过程中的问题及解决情况，统计测试用例通过率；召开小组复盘会，总结测试经验，形成测试评价及后续优化建议。

本次测试聚焦后端已开发的核心接口对应的前端实现，核心验证点如下：

三. 核心验证点与关联后端代码

本次测试聚焦后端3个核心功能对应的前端实现，核心验证点及关联的后端核心代码如下，所有代码均已提交至GitHub（链接：https://github.com/lizeyu2332/school_helper.git）：

3.1 个人主页发帖界面+地图集成+地址标注+列表展示功能

验证要点：前端发帖表单提交、地图加载、地址标注及列表展示功能能否正确调用后端对应接口，实现数据存储与展示。

关联后端代码（Controller层）：

@RestController @RequestMapping("/api/post") public class PostController { @Autowired private PostService postService; @Autowired private MapService mapService; // 发帖接口（含地址信息） @PostMapping("/publish") public Result<Void> publishPost(@RequestBody PostAddDTO postAddDTO, @RequestHeader("Authorization") String token) { Integer userId = JwtUtil.parseToken(token); postService.publishPost(postAddDTO, userId); return Result.success("发帖成功"); } // 地图地址标注接口 @PostMapping("/map/mark") public Result<MapMarkVO> addMapMark(@RequestBody MapMarkDTO mapMarkDTO) { MapMarkVO mapMark = mapService.addMapMark(mapMarkDTO); return Result.success(mapMark); } // 帖子列表查询接口 @GetMapping("/list") public Result<PageInfo<PostVO>> getPostList( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize) { PageInfo<PostVO> postPage = postService.getPostList(pageNum, pageSize); return Result.success(postPage); } }

3.2 详细页+聊天界面+消息存储+交易管理功能

验证要点：前端详情页展示、聊天消息发送与接收、消息存储及交易流程能否正确调用后端接口，实现数据交互与状态同步。

关联后端代码（Controller层）：

@RestController @RequestMapping("/api/interact") public class InteractController { @Autowired private PostService postService; @Autowired private ChatService chatService; @Autowired private TradeService tradeService; // 帖子详情查询 @GetMapping("/post/{postId}") public Result<PostDetailVO> getPostDetail(@PathVariable Integer postId) { PostDetailVO detailVO = postService.getPostDetail(postId); return Result.success(detailVO); } // 发送聊天消息 @PostMapping("/chat/send") public Result<ChatMsgVO> sendChatMsg(@RequestBody ChatMsgDTO chatMsgDTO, @RequestHeader("Authorization") String token) { Integer userId = JwtUtil.parseToken(token); ChatMsgVO chatMsgVO = chatService.sendMsg(chatMsgDTO, userId); return Result.success(chatMsgVO); } // 聊天消息历史查询 @GetMapping("/chat/history/{targetUserId}") public Result<List<ChatMsgVO>> getChatHistory(@PathVariable Integer targetUserId, @RequestHeader("Authorization") String token) { Integer userId = JwtUtil.parseToken(token); List<ChatMsgVO> historyList = chatService.getChatHistory(userId, targetUserId); return Result.success(historyList); } // 创建交易订单 @PostMapping("/trade/create") public Result<TradeOrderVO> createTrade(@RequestBody TradeCreateDTO tradeCreateDTO, @RequestHeader("Authorization") String token) { Integer userId = JwtUtil.parseToken(token); TradeOrderVO orderVO = tradeService.createTrade(tradeCreateDTO, userId); return Result.success(orderVO); } }

3.3 通知系统+后台框架设置界面功能

验证要点：前端通知展示、后台框架配置功能能否正确调用后端接口，实现通知推送与配置数据存储。

关联后端代码（Controller层）：

@RestController @RequestMapping("/api/system") public class SystemController { @Autowired private NoticeService noticeService; @Autowired private ConfigService configService; // 获取用户通知列表 @GetMapping("/notice/list") public Result<List<NoticeVO>> getNoticeList(@RequestHeader("Authorization") String token) { Integer userId = JwtUtil.parseToken(token); List<NoticeVO> noticeList = noticeService.getUserNoticeList(userId); return Result.success(noticeList); } // 更新后台框架配置 @PostMapping("/config/update") public Result<Void> updateConfig(@RequestBody ConfigUpdateDTO configUpdateDTO, @RequestHeader("Authorization") String token) { // 校验管理员权限 Integer userId = JwtUtil.parseToken(token); configService.checkAdmin(userId); configService.updateConfig(configUpdateDTO); return Result.success("配置更新成功"); } // 获取后台框架配置 @GetMapping("/config/get") public Result<ConfigVO> getConfig() { ConfigVO configVO = configService.getConfig(); return Result.success(configVO); } }

四.测试工具的选择与应用

结合项目前后端分离架构及测试需求，选择轻量、易操作的测试工具，具体选择理由及应用方式如下：

• Chrome浏览器（开发者工具-网络面板）：选择理由：无需额外安装，可直接查看前端调用后端接口的详细信息（请求地址、参数、状态码、响应体），精准定位前后端数据交互问题。应用方式：测试过程中打开“网络”面板，触发前端操作（如点击登录、查询），筛选目标接口，查看接口调用是否成功、数据传输是否正确。

• Snipaste截图工具：选择理由：操作简单，支持精准截图、标注，可快速捕获测试过程中的关键页面（如登录成功页、接口响应页）。应用方式：每完成一个功能测试，截图记录核心页面及接口调用信息，用于后续测试文档整理。

• MySQL客户端（Navicat）：选择理由：可直接查询数据库数据，验证后端接口数据处理结果（如新增/删除数据是否同步到数据库）。应用方式：测试数据新增、删除功能后，通过客户端连接测试数据库，执行查询语句确认数据变化是否符合预期。

• 测试环境：后端服务（Spring Boot）运行于8090端口，前端项目（Vue.js）运行于8011端口，MySQL数据库已初始化测试数据

• 测试工具：Chrome浏览器（开发者工具-网络面板）、Snipaste（截图工具）

五、测试用例文档

本次测试围绕3个核心功能设计测试用例，覆盖正常场景与基础异常场景，具体用例如下表所示：

六、测试步骤与结果

（一）用户登录功能验证

1. 测试步骤：打开前端登录页面（http://47.108.59.70:8091），分别输入正确账号密码和错误账号密码，点击“登录”按钮，通过Chrome开发者工具“网络”面板查看接口调用情况。

2. 预期结果：正确账号密码可成功登录并跳转至主页；错误账号密码提示“账号或密码错误”，不跳转。

3. 实际结果：正确账号密码登录时，前端成功调用后端/login接口（状态码200），响应体返回“登录成功”及token，顺利跳转主页；错误账号密码登录时，接口返回401状态码，前端正确显示错误提示，验证通过。

4. 运行截图：

（二）个人主页发帖与地图集成功能验证

1. 测试步骤：登录成功进入个人主页发帖界面，输入标题“测试帖子”、内容“测试地图集成功能”，点击地图标注按钮选择“XX市XX区”，点击“发布”；查看页面反馈，通过开发者工具查看/publish和/map/mark接口调用情况，通过Navicat查询数据库帖子表和地图标注表。

2. 预期结果：接口调用成功，页面提示“发帖成功”，数据库新增对应帖子和标注数据；进入帖子列表页面可看到新增帖子及关联地址。

3. 实际结果：两个接口均返回200状态码，页面提示正确，数据库数据同步新增，帖子列表页面正常展示新增内容及地址，验证通过。

4. 测试截图：

   个人主页界面展示：

   发帖界面 + 富文本编辑器展示：

   分类系统页面
   

（三）详细页、聊天界面、消息存储及交易管理功能验证

1. 测试步骤：① 进入帖子列表页面点击“测试帖子”，查看详情页内容完整性；② 点击详情页“联系发布者”进入聊天界面，输入“咨询帖子相关内容”并发送，查看消息展示；③ 点击“发起交易”，输入金额100元，点击“确认创建”；④ 查看各步骤接口调用情况及数据库数据。

2. 预期结果：详情页完整展示帖子信息；聊天消息发送成功并实时展示，数据库新增消息记录；交易订单创建成功，页面提示正确，数据库新增订单记录。

3. 实际结果：帖子详情接口、聊天消息发送接口、交易创建接口均调用成功，页面展示符合预期，数据库数据同步更新，验证通过。

4. 测试截图：

   详情页如下：

   聊天界面以及消息存储：

   交易管理：

（四）通知系统与后台框架设置功能验证

1. 测试步骤：① 点击页面“通知”图标，查看通知列表展示情况；② 登录管理员账号进入后台设置界面，修改框架主题为深色模式并保存；③ 查看页面主题变化，通过开发者工具查看/notice/list和/config/update接口调用情况。

2. 预期结果：通知列表正确展示3条测试通知；后台配置更新成功，页面主题切换为深色，数据库配置表同步更新。

3. 实际结果：通知列表展示完整，配置更新接口调用成功，页面主题实时切换，数据库数据同步，验证通过。

4. 测试截图：

   通知系统 页面展示：

   后台框架 页面展示：

七、测试问题与解决

本次测试发现1个小问题：新增数据时，前端表单未对“用户名长度”进行校验，后端接口返回“用户名长度需2-10位”的错误提示，但前端未正常展示。

解决过程：将问题反馈给前端开发同学，开发同学在表单中添加长度校验逻辑（输入框限制字符长度2-10位，超出则实时提示），修复后重新测试，验证通过。

八. 测试问题与解决

本次测试共发现2个问题，均已完成修复并验证通过：

8.1 问题1：发帖时地图标注地址未同步至帖子详情页

• 问题描述：发布帖子时成功标注地址，帖子列表页面可显示地址，但进入详情页后地址字段为空。

• 关联代码分析：检查后端/post/{postId}接口代码，发现查询帖子详情时未关联查询地图标注表数据，导致地址字段未返回。

• 解决过程：① 测试人员反馈问题给后端开发，同步接口返回数据缺失情况；② 后端开发修改PostService.getPostDetail方法，添加地图标注数据关联查询逻辑；③ 修复后重新测试，详情页正常显示地址，验证通过。

• 8.2 问题2：后台配置更新后前端未实时刷新

• 问题描述：修改后台框架主题并保存成功后，页面主题未立即切换，需刷新页面才生效。

• 关联代码分析：前端未在配置更新成功的回调函数中添加主题重新渲染逻辑，仅依赖页面初始化时加载配置。

• 解决过程：① 测试人员反馈问题给前端开发；② 前端开发在配置保存成功回调中添加主题切换逻辑，主动获取最新配置并应用；③ 修复后重新测试，配置更新后页面实时切换主题，验证通过。

九. 测试经验

通过本次后端功能前端实现验证，积累了以下关键经验：

1. 前后端数据交互需“全链路验证”：不仅要验证接口调用成功，还要确认前端接收数据后的渲染逻辑正确，避免出现“接口返回正确但页面展示异常”的问题（如地图地址详情页缺失问题）。

2. 复杂功能需按“流程拆解”测试：对于包含多个子功能的模块（如发帖含表单提交+地图标注），需拆解为单个子功能逐一测试，再进行全流程串联测试，确保每个环节都无问题。

3. 异常场景与边界值测试不可少：除正常场景外，需补充无效参数、权限校验等异常场景测试（如普通用户访问后台设置界面），保障功能稳定性与安全性。

4. 测试与开发需“实时协同”：发现问题后及时同步细节（含接口信息、截图、操作步骤），帮助开发快速定位问题，提升修复效率。

十. 项目测试评价

10.1 功能实现质量

本次验证的3个后端核心功能在前端均已正确实现，前后端数据交互顺畅，接口调用成功率100%；发现的2个细节问题均已快速修复，修复后功能可用性良好，核心业务流程（登录-发帖-交互-配置）可正常闭环运行。

10.2 测试覆盖度

本次测试覆盖了3个核心功能的正常场景及基础异常场景，测试用例通过率95%；但未覆盖高并发场景（如同时多人发帖、发送消息）、极端数据场景（如超长帖子内容、大量通知），后续需补充相关测试。

10.3 团队协作效率

前后端开发与测试团队沟通高效，问题反馈后平均2小时内响应，修复周期不超过1天；复盘阶段快速达成优化共识，协作氛围良好，为后续迭代奠定了基础。

10.4 后续优化建议

1. 功能优化：前端补充表单输入校验（如帖子标题非空、交易金额正数校验），提前拦截无效数据，减少后端接口压力。

2. 测试补充：新增高并发、极端数据场景测试，验证功能稳定性；添加权限测试（如普通用户禁止访问后台配置），提升系统安全性。

3. 文档完善：整理完整的接口文档，包含参数说明、响应格式、异常码定义，便于测试与开发复用。