Bug
前端
用户设置相关
| bug说明 | 修复方法 | 修复结果 | 
| 用户修改头像后导航不同步更新 | 修改用户头像后刷新this.$store中的图像路径 | 成功 | 
| 左侧侧边栏第一次无自适应,后续自适应排版 | 去除后续自适应,统一改为遮挡型导航 | 成功 | 
| 上传头像过程中退出,仅重回设置界面才会更新头像 | 添加全局storage存储头像路径 | 成功 | 
| 设置默认词图单词数量在进入页面时就显示警告 | 将规则检查变为懒检查,仅在提交时触发 | 成功 | 
缓存相关
| bug说明 | 修复方法 | 修复结果 | 
| 编辑词图推出后最新修改时间未改变 | 重新回到我的词图界面后刷新更新时间 | 成功 | 
| 从社区fork词图后我的词图界面无显示 | 重新回到我的词图界面后清空缓存重新请求 | 成功 | 
词图相关
| bug说明 | 修复方法 | 修复结果 | 
| 我的词图中svg预览大小不一、存在白边 | canvas截图时设定固定尺寸 | 成功 | 
| 教程进行到中途退出后回从头开始 | 新增用户教程学习状态机,记忆用户浏览进度 | 成功 | 
| 显示单词列表时缺失“熟识”状态单词的显示 | 补充缺失分支 | 成功 | 
| 测试时浮窗显示前于视觉中心移动导致浮窗位置不正确 | 浮窗显示设置睡眠时间,待以动结束后苏醒显示 | 成功 | 
| 截取svg缩略图时背景图片仅部分被包含 | 记忆背景图片坐标,在截图时设置 | 成功 | 
| 对不同分辨率的背景图片的普适性较差 | 修改为提供动态图床由用户选择的方式实现背景图转换,控制图片分辨率一致 | 成功 | 
| 测试时键盘监听不够敏感,出现光标切换异常等不顺滑清空 | 将监听方式由keyup改为keydown,并特判开头等特殊情况的光标位置 | 成功 | 
| 已完成加词的词图可以添加自定义单词 | 根据当前词图状态判断是否开启自定义选项 | 成功 | 
社区相关
| bug说明 | 修复方法 | 修复结果 | 
| 预览词图时单词列表无法获取api正常返回值 | 新增预览专用api,取消相关用户权限检查 | 成功 | 
| 词图排序修改后不及时改变,刷新后才能修改 | 在切换子页面时刷新缓存 | 成功 | 
| 自定义搜索加词时查询过慢,智能联想延迟较大 | 取消对单词含义的获取,仅获取单词本身 | 成功 | 
后端
| bug 概述 | 修复过程 | 修复结果 | 
| 计算形近词表时用时过长 | 添加哈希索引 | 在较短时间内计算出所需词表 | 
| 计算形近词表时返回了一些并不形近的词 | 相同哈希值不足以判断,使用 difflib 进一步判断单词间的相似性 | 大部分单词较为相似 | 
| 随机生成在过大压力下速度过慢 | 删除了冗余计算内容 | 所有生成模式都有了较高的生成速度 | 
| http 交互存在一定安全隐患 | 实现 https 协议的重定向,并申请相应 CA 证书 | 用户可更加安全地设置密码、访问数据 | 
| 后端原静态资源需通过 Django 进行请求得到,效率较低,且在生产模式下无法正常运作 | 通过 nginx 实现动静资源分离 | 生产模式下高效正常运作 | 
| IP 地址采用点分十进制表示,不利于用户记忆 | 完成备案申请 | 可以通过域名 jqkey.xyz 进行访问。 | 
场景测试
| 用户信息 | 用户情况 | 
| 姓名 | 田旭尧 | 
| 身份 | 可怜高中生,高考近在眼前 | 
| 使用动机 | 高考英语单词必须得全部背过呀 | 
| 典型场景 | 每周末在家抽出 3~4h 专门背单词 | 
| 用户偏好 | 使用整块的时间系统化背单词,且对每个单词的掌握程度要求高 | 
| 用户痛点 | 碎片化的背单词法不适用于一直坐着学习的高考党;纸质书籍笨重,没有交互;天天看书看得好累,要是有更 fashion 的学习方式换换脑子就好了 | 
| 预期使用场景 | 每天有固定的时间使用该软件来背单词,通过设置词图中单词的个数激励自己每天的背词数量,并且根据统计信息界面的艾宾浩斯曲线来进行复习。 | 
| 实现该用户需求的功能 | 1. 可以设置每个词图的单词数量上限,帮助用户达到每天的学习目标(痛点 1) 2. 统计信息界面对遗忘程度进行展示,时刻关注还未掌握的单词,掌握学习进度(痛点 2) 3. 复习模式帮助用户针对词图单位进行复习,还可以进行拼写测试 | 
| 用户信息 | 用户情况 | 
| 姓名 | 田昶舜 | 
| 身份 | 某校非英语专业大二学生 | 
| 使用动机 | 英语不太好,想多背一些单词冲刺四六级,但是没有什么动力 | 
| 典型场景1 | 在宿舍突然想背单词,打开 APP 使用一些背词功能 | 
| 典型场景2 | 在食堂,饭太烫闲着无聊没事干,背几个单词 | 
| 用户偏好 | 几乎不背单词,或偶尔零碎地背单词(非主要受众) | 
| 用户痛点 | 不知道怎么复习/背单词,想要短时高收入 | 
| 预期使用场景 | 偶尔在四六级之前较为系统地背一些单词 | 
| 实现该用户需求的功能 | 1. 可以自定义词图背景,挑一些喜欢的图片记忆单词,趣味性 2. 通过用户社区功能,查看他人优秀的词图和背景,激励自己;还可以点赞、fork(bai piao) 别人的优秀词图 | 
| 用户信息 | 用户情况 | 
| 姓名 | 田昶禹 | 
| 身份 | 某校考研党,英语单词量不高,需要大量提升 | 
| 使用动机 | 想要在半年里把考研单词记熟,每天抽出一定时间专门背单词 | 
| 典型场景1 | 复习数一数二腻了,背背单词学学英语换换脑子 | 
| 典型场景2 | 突然被某篇鸡汤激励到,立誓背完考研单词,然后背了五分钟 | 
| 用户偏好 | 偶尔会专门背记单词,主要时间不会用太多,但会用系统化的时间专门记忆单词 | 
| 用户痛点 | 单词量较大,碎片化背单词过于低效;且容易注意力不集中、记忆不长久 | 
| 预期使用场景 | 由于大学时间比较自由,因此需要依靠激励机制来鼓励自己每天进行背单词。获得激励之后,每天确定背词小目标并完成。 | 
| 实现该用户需求的功能 | 1. 日历图展示打卡情况,饼状图展示背词进度,状态统计展示背词曲线,激励用户每天进行单词学习(典型场景 2) 2. 我的词图界面可以预览每个词图的背诵进度条,激励用户消除红色、橙色的部分,让整个词图进度条都呈现美丽的绿色 | 
| 用户信息 | 用户情况 | 
| 姓名 | 田永晓 | 
| 身份 | 某校英语专业或出锅留学生 | 
| 使用动机 | 有大量背单词的需求,常啃红宝书等词书,普通的碎片化记忆模式 APP 不适合了 | 
| 典型场景1 | 某一天要背好多单词,不想背着一大摞书去图书馆,硬啃,普通的背单词软件过于碎片化,满足不了需求 | 
| 典型场景2 | 看了个英文电影,想把电影里整理出来的单词加入候选背单词列表中 | 
| 用户偏好 | 系统化背单词,即专门抽出时间阅读书籍、影视并记忆有关单词 | 
| 用户痛点 | 纸质书籍重且较不方便、没有交互;大量学习中产生的零散单词除了手写记录难以集中背诵,且无法自定义位置;希望能提供基于词根词缀、近反义词的推荐背诵词 | 
| 预期使用场景 | 对单词的专业性和难度有独特的要求,且由于背单词的重要性,需要使用特殊技巧来增强单词记忆。每天需要背单词的时间很长,觉得枯燥乏味难以集中精力。但是词图的多样化编辑功能可以让用户设计属于自己的词图,在背单词的过程中加入设计环节,帮助用户记忆的同时增加趣味性,让用户可以长时间背单词并减少疲劳感。 | 
| 实现该用户需求的功能 | 1. 提供随机生成、顺序生成、词根词缀、近反义词、形近词汇、同类词汇等多种生成推荐词表方式,供用户建立词根词缀的概念及联想记忆(痛点 3) 2. 画布的 zoom 功能、可拖拽功能提供极大的操作空间(痛点 1、2)  3. 支持 9 种词书的选择(痛点 1) 4. 工具栏可以设置每个单词的样式 5. 提供自定义加词功能,对于突然联想到的单词可以随时加入词图中 | 
压力测试
由于 Beta 阶段添加的 API 大部分为较小量级的 API,于是返回长度最长的 API 仍旧为查看统计信息 API。
Beta 阶段添加了对于形近词、同类词的支持,获得新词表的 API 使用复杂度略高于其他 API 的算法。故使用获得新词表的 API 进行测试,词图大小设置为 50。
另外,使用了静态资源分离和图床策略,对于相对而言大小较大的背景图片不再从服务器直接通过 API 获取,故在此不进行压力测试。
老用户的统计信息的数据量仍然很大,受服务器条件限制,成功率同 Alpha 阶段类似:
| API | 用户数 | 时间 | 业务数 | 成功率 | 传输效率 | 总数据传输 | 响应时间 | 实际最高并发连接数 | 最长传输时间 | 最短传输时间 | 
| 查看统计信息 | 255 | 60s | 89 | 26% | 1.50trans/s | 1.73M | 16.33s | 24.53 | 30.01s | 0.82s | 
| 查看统计信息 | 255 | 30s | 92 | 100% | 3.09trans/s | 1.79M | 15.85s | 48.96 | 29.73s | 0.00s | 
| 获得形近词表 | 255 | 60s | 892 | 100% | 14.91trans/s | 0.05M | 14.64s | 218.21 | 28.42s | 0.46s | 
| 获得同类词表 | 255 | 60s | 1155 | 100% | 19.36trans/s | 0.07M | 11.61s | 224.79 | 25.11s | 0.30s | 
获得形近词表的 API 对于哈希值计算开销较大,在添加哈希索引前最短传输时间达到了 3s 以上,添加哈希索引后仍旧有 0.46s 较高的延时。相较而言,获得同类词表查询次数就更少一些,效率也更高。
同时,对于其他情况进行压力测试,首先对随机生成进行测试,这里词图大小也是 50:
| API | 用户数 | 时间 | 业务数 | 成功率 | 传输效率 | 总数据传输 | 响应时间 | 实际最高并发连接数 | 最长传输时间 | 最短传输时间 | 
| 获得随机词表 | 255 | 60s | 86 | 26% | 1.44trans/s | 0.09M | 16.33s | 57.80 | 30.01s | 0.44s | 
仔细查看代码发现,是多种生成方式叠加的时候产生了计算冗余。去除计算冗余之后,进行压力测试:
| API | 用户数 | 时间 | 业务数 | 成功率 | 传输效率 | 总数据传输 | 响应时间 | 实际最高并发连接数 | 最长传输时间 | 最短传输时间 | 
| 获得顺序词表 | 255 | 60s | 1196 | 100% | 19.93trans/s | 0.72M | 11.18s | 222.87 | 23.12s | 0.46s | 
| 获得随机词表 | 255 | 60s | 1198 | 100% | 19.99trans/s | 0.71M | 11.18s | 223.37 | 25.28s | 0.19s | 
| 获得近义词表 | 255 | 60s | 608 | 94% | 10.17trans/s | 0.35M | 17.76s | 180.60 | 30.00s | 0.24s | 
| 获得词根词表 | 255 | 60s | 1177 | 100% | 19.67trans/s | 0.74M | 11.55s | 227.12 | 24.52s | 0.30s | 
产生近义词表的生成方式对于数据量要求较大,故资源消耗较高;总体来看,对压力适应性较好。
单元测试
后端进行了 API 的单元测试,覆盖率 70%。
没有达到较高覆盖率的原因有三:
- 使用双重校验,每一个 API 都使用解析 token 和解析用户两步进行,保证了用户隐私的安全性,但同时难以构造测试用例对于能够通过 token 解析但是通不过用户解析的场景,故每一个 API 都无法测试这一点;
- 部分 API 使用与其他 API 类似的结构,仅更改了部分影响内容(如修改字体、修改大小等),对于此类问题由于时间限制等原因没有进行完备的测试;
- 对于登陆和注销有关权限 API,进行了较为完备的场景测试,没有进行单元测试。
测试矩阵
为了着重展示 Beta 阶段功能测试结构,将 Alpha 阶段各功能的回归测试结果汇总为 Alpha 阶段功能 一条展示。
| 浏览器 | 版本 | Alpha阶段功能 | 我的词图 | 个人设置 | 分享社区 | 修改词图背景 | 自定义加词 | 测试模块 | 统计信息 | 
| Google Chrome | 90.0.4430.93 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
| Microsoft Edge | 90.0.818.56 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
| 360浏览器 | 13.0.2220.0 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
| Firefox | 88.0.1 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
| Safari(平板) | 604.1 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
| QQ浏览器(平板) | 11.4.8.4762 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 
UI和操作测试
| 浏览器 | 屏幕分辨率 | 基本功能 | 页面布局 | 操作流畅度 | 
| Chrome 90.0.4430.93 | 1920*1080 | 正常 | 正常 | 比较流畅 | 
| Edge 90.0.818.56 | 1920*1080 | 正常 | 正常 | 流畅 | 
| Edge 90.0.818.56 | 2560*1440 | 正常 | 正常,侧边栏略窄 | 流畅 | 
| Chrome 90.0.4430.93 | 2560*1440 | 正常 | 正常,侧边栏略窄 | 流畅 | 
| Firefox 88.0.1 | 2560*1440 | 正常 | 正常,侧边栏略窄 | 流畅 | 
| Firefox 83.0 | 1920*1080 | 正常 | 正常 | 比较流畅 | 
| 360安全浏览器 13.1.1302.0 | 1920*1080 | 正常 | 正常 | 比较流畅 | 
出口条件
前端
| 要求 | 完成情况 | 完成度打分(满分10分) | 
| 整体 UI 美观 | 对包括字体在内的ui元素进行了进一步优化,对我的词图界面、词图添加了过渡动画 | 9 | 
| 教程清晰 | 保留gif教程界面。另外添加基于状态机的引导性教程指引。 | 9 | 
| 用户操作顺滑 | 对键盘的监听顺滑,用户对词图的编辑顺滑,过渡动画顺滑,添加缓存减少平均请求时间。但由于系统承载力原因,单张图片上传较慢,api获取词图背景较慢 | 8 | 
| 词图功能完善 | 已完成对词图背景自定义、自定义加词等功能的完善,用户对词图的可编辑程度已基本达到最高等级 | 9 | 
| 用户记忆状态展现详尽、可读性高 | 统计信息界面新增各词书背诵比例和整体单词状态的示意图,丰富用户可查看的信息 | 8 | 
| 充分利用PC端的优势,和手机端相比有强大的不可替代性 | 词图可以通过zoom、拖拽等方式无限放大,充分利用大屏优势。复习测试部分充分利用pc端键盘优势,让用户可以用打字的方式巩固记忆。 | 9 | 
| 进行部分要求审查 | 完善对用户名、密码、词图单词数量、词图名称等基本限制的前端审查,进行用户权限管理。 | 8 | 
| 各屏幕分遍率、放大缩小、分屏的兼容 | 词图尺寸跟随屏幕和侧边栏尺寸进行自适应,导航栏根据屏幕自适应为底部导航栏。侧边栏不随设备分辨率而出现、消失。 | 7 | 
后端
| 要求 | 完成情况 | 完成度打分(满分10分) | 
| 数据库设计完备 | 能够支持前端询问,同时支持推荐算法、测试算法、用户使用信息记录的数据库设计 | 9 | 
| 进行权限处理 | 用户登录获得密钥,进而才可使用各种功能,保证数据安全性 | 9 | 
| 进行邮箱验证 | 用户需要通过邮箱验证才可使用软件,减少恶意用户 | 8 | 
| 单词数据 | 770570 个单词,覆盖面较广;其中 20651 个单词具有中英文例句 | 9 | 
| 词书数据 | 导入了四级、六级、专业四八级、考研、雅思、托福、GRE、MBA、红宝书等词书 | 8 | 
| 近反义词等推荐算法 | 共有 5060 个单词可进行近反义词推荐;共有 9326 个单词可进行同词根词缀推荐;可以进行形近单词推荐;可以进行同类单词推荐;推荐算法自由选择 | 9 | 
综上,基本完成 Beta 阶段的出口要求。