头条【vue+fastapi 】全栈教学项目系列之《07_功能测试与学生验收清单》 本文是头条【vuefastapi 】全栈教学项目系列之《功能测试与学生验收清单》配套开源项目均已开源欢迎 Star / Fork前端仓库Vue3 Vitehttps://gitee.com/rukei/toutiao_frontend ·git clone gitgitee.com:rukei/toutiao_frontend.git后端仓库FastAPIhttps://gitee.com/rukei/toutiao ·git clone gitgitee.com:rukei/toutiao.git✅ 功能测试与学生验收清单目的系统化检验学习成果确保每个功能都能正常运行使用方式完成开发后逐项测试可自查、可打分测试说明如何使用本清单1. 按模块顺序逐一测试 2. 每个测试用例都有明确的操作步骤 3. 通过打 ✓失败打 ✗ 4. 记录遇到的问题和解决方案 5. 最后统计得分评估掌握程度评分标准等级得分率说明 优秀95-100%完全掌握可以独立开发类似项目 良好85-94%基本掌握少数功能需要回顾✅ 及格70-84%核心功能通过需要加强练习⚠️ 需努力70%建议重新学习对应章节测试环境确认开始测试前请确认后端服务已启动python main.py访问http://localhost:8000/docs正常前端服务已启动npm run dev访问http://localhost:5173正常MySQL数据库已创建并连接正常Redis服务已启动浏览器已打开开发者工具F12用于查看网络请求一、用户系统测试25分1.1 用户注册8分测试用例1.1.1正常注册3分项目内容前置条件数据库中没有该用户名操作步骤1. 打开浏览器访问http://localhost:5173/register2. 输入用户名testuser013. 输入密码1234564. 输入手机号138001380015. 点击注册按钮预期结果提示注册成功自动跳转到登录页或首页实际结果☐ 通过 / ☐ 不通过备注__________________测试用例1.1.2用户名已存在2分项目内容前置条件已有用户testuser01操作步骤1. 进入注册页面2. 输入相同用户名testuser013. 点击注册按钮预期结果提示用户名已被注册不跳转实际结果☐ 通过 / ☐ 不通过备注__________________测试用例1.1.3表单验证3分序号操作预期结果得分1用户名留空点击注册提示请输入用户名☐ 1分2用户名输入1个字符提示用户名长度不够☐ 1分3密码输入3位提示密码至少6位☐ 1分小计得分___/8分1.2 用户登录7分测试用例1.2.1正常登录3分项目内容操作步骤1. 访问http://localhost:5173/login2. 输入刚注册的用户名密码3. 点击登录按钮预期结果登录成功跳转到首页sessionStorage中有token关闭标签页即清除请求头携带Authorization验证方法F12 → Application → Session Storage 查看F12 → Network 查看请求头实际结果☐ 通过 / ☐ 不通过备注__________________测试用例1.2.2密码错误2分项目内容操作步骤输入正确的用户名错误的密码预期结果提示用户名或密码错误实际结果☐ 通过 / ☐ 不通过测试用例1.2.3空表单提交2分项目内容操作步骤不输入任何内容直接点击登录预期结果表单验证提示不会发送请求实际结果☐ 通过 / ☐ 不通过小计得分___/7分1.3 个人信息管理5分测试用例1.3.1获取用户信息2分项目内容操作步骤登录后访问/profile或调用GET /api/user/info预期结果返回当前登录用户的完整信息不含密码实际结果☐ 通过 / ☐ 不通过测试用例1.3.2修改个人信息3分项目内容操作步骤1. 进入编辑资料页2. 修改昵称为新昵称3. 填写个人简介4. 点击保存预期结果提示更新成功再次进入页面显示新信息实际结果☐ 通过 / ☐ 不通过小计得分___/5分1.4 修改密码5分测试用例1.4.1正常修改密码3分项目内容操作步骤1. 在设置页或Profile页找到修改密码入口2. 输入旧密码1234563. 输入新密码6543214. 确认新密码6543215. 提交预期结果提示密码修改成功使用新密码可以登录实际结果☐ 通过 / ☐ 不通过测试用例1.4.2旧密码错误2分项目内容操作步骤输入错误的旧密码预期结果提示旧密码错误实际结果☐ 通过 / ☐ 不通过小计得分___/5分用户系统总分___/25分二、新闻系统测试32分2.1 新闻分类5分测试用例2.1.1获取分类列表3分项目内容操作步骤访问GET /api/news/categories或在首页查看标签栏预期结果返回9个分类头条、社会、国内、国际、娱乐、体育、军事、科技、财经验证点每个分类有 id 和 name 字段实际结果☐ 通过 / ☐ 不通过测试用例2.1.2分类切换2分项目内容操作步骤在首页点击不同的分类标签预期结果新闻列表刷新为对应分类的内容URL参数可能变化实际结果☐ 通过 / ☐ 不通过小计得分___/5分2.2 新闻列表10分测试用例2.2.1列表展示4分序号检查项标准得分1显示封面图图片正确加载无裂图☐ 1分2显示标题文字完整不过长截断☐ 1分3显示元信息作者、阅读量、时间等☐ 1分4列表布局排版整齐间距合理☐ 1分测试用例2.2.2分页加载3分项目内容操作步骤向下滚动到页面底部预期结果自动加载下一页新闻新内容追加到列表底部不是替换没有更多了提示出现实际结果☐ 通过 / ☐ 不通过测试用例2.2.3下拉刷新3分项目内容操作步骤在新闻列表区域下拉手机手势或鼠标拖拽预期结果出现刷新动画列表数据重新加载回到顶部显示最新数据实际结果☐ 通过 / ☐ 不通过小计得分___/10分2.3 新闻详情10分测试用例2.3.1详情展示5分序号检查项标准得分1标题完整显示完整新闻标题☐ 1分2作者信息显示作者名称、来源☐ 1分3封面图大图显示清晰☐ 1分4正文渲染Markdown正确渲染标题、列表、代码块等☐ 1分5阅读量1每次查看后阅读量增加☐ 1分测试用例2.3.2详情页交互3分项目内容操作步骤1. 点击收藏图标2. 点击点赞按钮3. 点击分享按钮预期结果收藏图标变色/状态变化点赞数增加或有动画反馈分享选项弹出实际结果☐ 通过 / ☐ 不通过测试用例2.3.3评论功能2分项目内容操作步骤1. 在评论区输入评论内容2. 点击发送3. 查看评论是否出现在列表中预期结果评论发表成功显示在评论列表时间戳正确实际结果☐ 通过 / ☐ 不通过小计得分___/10分测试用例2.3.4异常处理 — API失败2分项目内容前置条件模拟网络异常断开网络 或 API 返回非200状态码操作步骤1. 从新闻列表点击进入一条新闻详情2. 观察页面状态预期结果不永久卡在加载中…“显示明确的错误提示如加载失败请重试”出现重新加载按钮点击可重试实际结果☐ 通过 / ☐ 不通过此用例覆盖 Bug #4旧代码中 API 失败时newsDetail始终为空对象v-else永远显示加载中…无法退出。小计得分___/12分2.4 新闻发布5分管理员功能测试用例2.4.1发布新闻3分项目内容前置条件已登录且有发布权限操作步骤1. 进入文章管理/发布页面2. 选择分类3. 填写标题、摘要、正文Markdown格式4. 可选上传封面图5. 点击发布预期结果提示发布成功返回新闻ID在新闻列表中可以看到新发布的新闻实际结果☐ 通过 / ☐ 不通过测试用例2.4.2编辑和删除2分项目内容操作步骤1. 找到自己发布的新闻2. 点击编辑修改标题3. 保存后检查是否更新4. 尝试删除预期结果编辑后内容更新删除后列表中不再显示或状态变为未发布实际结果☐ 通过 / ☐ 不通过小计得分___/5分新闻系统总分___/32分三、互动功能测试20分3.1 收藏功能8分测试用例3.1.1添加收藏3分项目内容操作步骤1. 进入任意新闻详情页2. 点击收藏图标星形预期结果图标变为实心/高亮色提示收藏成功API调用POST /api/favorite/add成功验证方法F12 → Network 查看请求实际结果☐ 通过 / ☐ 不通过测试用例3.1.2取消收藏2分项目内容操作步骤再次点击已收藏的图标预期结果图标恢复空心提示取消收藏成功API调用DELETE /api/favorite/remove成功实际结果☐ 通过 / ☐ 不通过测试用例3.1.3收藏列表3分项目内容操作步骤1. 收藏几条不同新闻2. 进入我的收藏页面预期结果显示所有已收藏的新闻每条显示标题、封面、收藏时间可以取消收藏或直接查看详情实际结果☐ 通过 / ☐ 不通过小计得分___/8分3.2 浏览历史7分测试用例3.2.1自动记录历史3分项目内容操作步骤1. 登录状态下浏览几条不同新闻2. 进入浏览历史页面预期结果自动记录浏览过的新闻按时间倒序排列最近在前每条记录有时间戳验证点API调用POST /api/history/add在每次查看详情时触发实际结果☐ 通过 / ☐ 不通过测试用例3.2.2历史列表功能2分项目内容操作步骤1. 查看历史列表2. 点击某条历史记录3. 尝试清空历史预期结果点击可跳转到对应新闻详情清空后列表为空提示清空成功实际结果☐ 通过 / ☐ 不通过测试用例3.2.3重复浏览处理2分项目内容操作步骤多次浏览同一条新闻预期结果不产生重复记录或更新该条记录的时间戳实际结果☐ 通过 / ☐ 不通过小计得分___/7分3.3 评论功能5分测试用例3.3.1发表评论3分项目内容操作步骤1. 在新闻详情页的评论区输入内容2. 点击发送预期结果评论出现在列表中显示用户昵称和时间输入框被清空边界测试尝试提交空内容 → 应该被阻止实际结果☐ 通过 / ☐ 不通过测试用例3.3.2评论展示2分项目内容操作步骤查看有多条评论的新闻预期结果评论按时间顺序排列格式清晰易读支持分页或滚动加载如果评论很多实际结果☐ 通过 / ☐ 不通过小计得分___/5分互动功能总分___/20分四、AI问答功能测试10分4.1 基础对话6分测试用例4.1.1发送消息3分项目内容前置条件已配置有效的OpenAI API Key操作步骤1. 进入AI问答页面2. 在输入框输入问题如你好3. 点击发送预期结果消息出现在对话列表右侧用户气泡Loading状态显示AI回复出现左侧机器人气泡实际结果☐ 通过 / ☐ 不通过☐ 未配置API Key跳过此测试测试用例4.1.2多轮对话3分项目内容操作步骤连续进行3-5轮对话预期结果每轮都能正常收发AI能理解上下文如问它呢能知道指代什么对话历史完整保留在界面上实际结果☐ 通过 / ☐ 不通过小计得分___/6分4.2 异常处理4分测试用例4.2.1API Key无效2分项目内容操作步骤使用无效的API Key发送消息预期结果显示友好的错误提示不会白屏或崩溃提示检查API Key配置实际结果☐ 通过 / ☐ 不通过测试用例4.2.2网络异常2分项目内容操作步骤断网状态下发送消息预期结果提示网络错误消息可能保存在本地待重发界面不会卡死实际结果☐ 通过 / ☐ 不通过小计得分___/4分AI问答总分___/10分五、系统功能测试16分5.1 主题切换5分测试用例5.1.1亮色/暗色切换3分项目内容操作步骤1. 进入设置页面2. 找到主题开关3. 切换开关状态预期结果整体配色立即变化背景色浅色↔深色文字颜色深色↔浅色所有页面都生效不只是设置页实际结果☐ 通过 / ☐ 不通过测试用例5.1.2主题持久化2分项目内容操作步骤1. 切换到暗色模式2. 刷新页面F5预期结果保持暗色模式不需要重新切换验证方法检查localStorage中的theme值实际结果☐ 通过 / ☐ 不通过小计得分___/5分5.2 国际化5分测试用例5.2.1语言切换3分项目内容操作步骤1. 进入设置页面2. 点击语言选择3. 切换到English预期结果所有可见文本变成英文TabBar文字Home, Category…导航栏标题、按钮、提示等全部变化实际结果☐ 通过 / ☐ 不通过测试用例5.2.2语言持久化2分项目内容操作步骤1. 切换到英文2. 刷新页面预期结果保持英文界面不需要重新切换实际结果☐ 通过 / ☐ 不通过测试用例5.2.3切换流畅度 — 无页面闪烁1分项目内容操作步骤1. 进入设置页面2. 在中文/英文之间来回切换预期结果切换瞬间完成页面不闪烁不出现全页刷新文本即时切换无白屏/闪烁实际结果☐ 通过 / ☐ 不通过此用例覆盖 Bug #8旧代码中window.location.reload()导致每次语言切换都会全页刷新体验极差。小计得分___/6分5.3 导航与路由5分测试用例5.3.1TabBar导航2分项目内容操作步骤依次点击底部4个Tab预期结果页面正确切换高亮状态跟随变化URL路径对应改变实际结果☐ 通过 / ☐ 不通过测试用例5.3.2页面跳转与返回3分序号操作预期结果得分1首页→详情→返回回到首页原位置☐ 1分2我的→登录→返回回到我的页面☐ 1分3未登录点收藏跳转到登录页☐ 1分小计得分___/5分系统功能总分___/16分六、性能与兼容性额外加分项10分6.1 加载性能4分序号测试项标准得分1首屏加载3秒☐ 1分2API响应500ms本地☐ 1分3图片懒加载滚动到才加载☐ 1分4骨架屏/Loading等待时有反馈☐ 1分6.2 移动端适配3分序号测试项标准得分1手机浏览器打开Chrome移动端模拟/F12设备工具栏☐ 1分2触摸手势下拉刷新、左滑等可用☐ 1分3字体大小可读不需放大☐ 1分6.3 错误处理3分序号测试项标准得分1404页面访问不存在路径有友好提示☐ 1分2网络断开有离线提示☐ 1分3服务器错误不白屏有错误提示☐ 1分性能与兼容性总分___/10分附加分总分统计模块满分得分得分率一、用户系统25______%二、新闻系统32______%三、互动功能20______%四、AI问答10______%五、系统功能16______%六、性能兼容附加10______%总计103 (10)______%成绩等级评定 优秀 (95-100%) ████████████████████ 完全掌握 良好 (85-94%) ██████████████████░ 很棒继续加油 ✅ 及格 (70-84%) ████████████████░░░ 基本掌握查漏补缺 ⚠️ 需努力 (70%) █████████████░░░░░ 建议重温对应章节问题记录表在测试过程中遇到的所有问题都记录在这里方便后续复盘。#时间模块问题描述解决方案状态1☐已解决2☐已解决3☐已解决4☐已解决5☐已解决学习建议根据测试结果的改进方向如果用户系统失分多重点复习 JWT认证流程练习 Pydantic 数据验证检查前后端联调逻辑如果新闻系统失分多复习分页查询的实现检查 Markdown 渲染配置练习 Vant List 组件用法如果互动功能失分多复习关联数据的CRUD操作检查异步操作的时序问题练习前端状态管理如果系统功能失分多复习 CSS 变量和主题切换检查 i18n 配置练习 Vue Router 守卫文档版本v1.0更新日期2026年7月适用项目toutiao_heima 新闻头条全栈项目