Bug
前端
主页、登录、注册、导航
| bug说明 |
修复方法 |
修复结果 |
| 导航栏有时不显示用户姓名 |
修改用户信息的获取逻辑与存储方式 |
成功 |
| 展示词图界面导航栏居右失败 |
在组件中增加自适应相关设置 |
成功 |
| 用户名不符合限制却能成功注册 |
修复表单有效性检查的错误逻辑 |
成功 |
| 表单输入不符合限制时，可以使用回车发送表单 |
在回车事件绑定的方法中增加有效性检查 |
成功 |
| 密码符合要求后重复输入为空即可注册 |
修复了表单检查规则，使其初值不再为 undefined |
成功 |
| 页面刷新后词图名称丢失 |
监听页面 unload 事件，用 localstorage 存储词图名 |
成功 |
| 教程 gif 出现闪烁 |
调整 gif 在页面中的大小，使其不再需要放大 |
成功 |
| 主页导航栏明暗主题不能随滚动切换 |
修改获取页面滚动高度的方式 |
成功 |
用户中心
| bug说明 |
修复方法 |
修复结果 |
| “所有词图”文件夹不唯一 |
测试与后端链接情况并进行错误处理 |
成功 |
| 名称为空的词图预览与其他不一致 |
增加词图名称限制，不可为空 |
成功 |
| 页面刷新后侧边栏始终聚焦在第一行 |
修改导航栏 list 的书写方式，使用 to 属性绑定 |
成功 |
| 统计信息界面单词排序逻辑错误 |
修改表单计算方法进行正确排序 |
成功 |
| 我的词图界面全选删除后部分词图依然存在 |
修复全选操作的影响范围 |
成功 |
| 文件夹重名后建立正确文件夹依然报错 |
修改错误信息条传值逻辑 |
成功 |
| 修改密码后跳转到登录界面却仍然存在登陆状态 |
跳转前补充清空 localstorage 等 token 信息 |
成功 |
| 修改密码时新密码不符合要求也可以提交 |
设置表单监听各表单项的检查 |
成功 |
| 修改密码时没有重复输入新密码也可以提交 |
取消表单的懒检查特性，进行持续检查 |
成功 |
词图相关
| bug说明 |
修复方法 |
修复结果 |
| 单词浮窗内容过长而超出卡片边界 |
将卡片 width 固定，height 自适应延申 |
成功 |
| 单词侧边栏单词长度超长后换行 |
设置断点，当单词长度达到阈值后缩小字号 |
成功 |
| 单词侧边栏显示释义无换行 |
通过替换换行符+使用插槽渲染 html 实现换行 |
成功 |
| 新建词图后出现 404 无法获取预览图 |
后端预存默认 svg 供新词图使用 |
成功 |
| 单词加入词图后不移动则无法加入 |
添加在用户加入词图后即发送单词位置请求 |
成功 |
| 下划线、删除线等设置失败 |
将设置逻辑由取反改为传值 |
成功 |
| 词图 zoom 后单词浮窗位置野蜂飞舞 |
通过获取当前 zoom 参数计算单词相对位置并设置浮窗位置 |
成功 |
| show 界面无法显示词图名称 |
通过 API 通信获取当前路由 id 的词图名称并进行显示 |
成功 |
| 复习模式最后一个单词无法查看详解 |
设置复习到最后一个单词时仍然显示查看详解 |
成功 |
| 模式最后一个单词查看详解后浮窗无法消失 |
点击完成后自动收起当前单词浮窗 |
成功 |
| 同一单词重复加入词图 |
加入词图后设置加入按钮为 disabled 状态防止重复加入 |
成功 |
| 单词浮窗中翻译没有渲染出换行效果 |
添加替换换行符+使用插槽渲染 html 实现换行 |
成功 |
待解决问题：
| bug说明 |
修复方法 |
修复结果 |
| 首页侧边栏首次进入不会讲右侧顶向右侧自适应，之后可以 |
暂无 |
待修复 |
后端
| bug 概述 |
修复过程 |
修复结果 |
| API post 使用 body 传参，而后端使用的是 request.POST.get('xxx') |
改为先解析 body 再进行取值 |
前后端正常通信 |
| 解析用户名调用函数时，错把 username 误认为是 user_id，导致参数传错 |
对于 username user 进行明确区分和定义 |
能够正常的解析 user |
| 前端暂没有实现词图描述功能，导致系统错误 |
允许描述为空，更新数据库和 API 调用方法 |
前后端正常通信 |
| 获取推荐词表时出现错误 |
明确定义生成模式、数据类型、返回的是 id 还是 name；明确产生集合和计算集合 |
能够正常生成合理的推荐词表 |
| 给用户的 token 可能超时 |
添加 refresh_token |
正常刷新 |
| get post 在同一个 url 上，但解析时没有区分开 |
合并为 wrapped_api，分别处理 |
能够正常处理 API |
| get 不存在 body，而是使用参数传递 |
将 body 转为参数处理 |
能够正常处理 get |
| owner、user 命名不统一导致各处不一致 |
严格按照数据库定义进行处理 |
能够正常区分 |
| filter().first()、get() 对于报错、update 行为不同 |
需要不存在报错或确定存在时，可使用 get；其他时候使用 filter.first 并进行判断 2；update 视情况改为修改参数后 save() |
行为正确 |
| 在获得列属性时，直接 values_list() 返回的是元组而不是单个值 |
添加处理 values_list(xx, flat=True)；在获得多列时不能通过属性而要通过下标获得 |
能够正确返回单个值 |
| 删除词图时，需要先移动到回收站，如果词图在回收站里才彻底删除 |
加入特判 |
选中词图如果部分在回收站，则只删除该部分，其余进入回收站 |
| django 自动存储的时间和前端显示时间不同 |
进行 .strftime 处理 |
前端显示为 %Y-%m-%d %H:%M |
| 时间为 UTC，和北京时间不同 |
返回给前端时进行 +8h 操作 2 |
前端显示正确值 |
| 错误处理时对于信息的传值类型定义有误 |
进行统一 |
正确进行错误处理 |
| 集合使用 remove 报错导致无法继续执行 |
使用 discard 除去可能不存在的实体 |
能够正确执行删除操作 |
| 生成的推荐词汇可能不在用户正在背的词书中 |
加入判断条件 2 |
生成的推荐词汇均在用户所想背的词书中 |
| 用户登录时可能输入用户名或者邮箱 |
分别进行查询，有一个即可登陆成功 |
输入用户名或邮箱均可登陆成功 |
| 当选择有序模式时，在某些情况可能生成的词表为无序 |
对于可能为无序的列表进行预排序 |
有序模式下所有情况返回的词表均为有序 |
| 词图对应单词状态的个数错误 |
添加遗忘的用户 id 限制 |
正确获取词图对应每种状态的单词数目 |
| 当用户复习单词数为 0 时，直接相除计算遗忘率会导致除 0 溢出 |
对分母为 0 的情况进行特判 |
行为正确 |
| Django models 中存储时间为相对时间，datetime 默认时间为绝对时间，二者无法直接计算 |
先将相对时间转换为绝对时间后再进行计算 |
正确执行 |
| 用户创建一张新词图后直接退出，则新词图的缩略图为黑色 |
在用户发送词图创建请求时，即在后端构造一张默认词图 svg |
可正常显示词图预览 |
场景测试
| 用户信息 |
用户情况 |
| 姓名 |
田旭尧 |
| 身份 |
可怜高中生，高考近在眼前 |
| 使用动机 |
高考英语单词必须得全部背过呀 |
| 典型场景 |
每周末在家抽出 3~4h 专门背单词 |
| 用户偏好 |
使用整块的时间系统化背单词，且对每个单词的掌握程度要求高 |
| 用户痛点 |
碎片化的背单词法不适用于一直坐着学习的高考党；纸质书籍笨重，没有交互；天天看书看得好累，要是有更 fashion 的学习方式换换脑子就好了 |
| 预期使用场景 |
每天有固定的时间使用该软件来背单词，通过设置词图中单词的个数激励自己每天的背词数量，并且根据统计信息界面的艾宾浩斯曲线来进行复习。 |
| 实现该用户需求的功能 |
1. 可以设置每个词图的单词数量上限，帮助用户达到每天的学习目标（痛点 1） 2. 统计信息界面对遗忘程度进行展示，时刻关注还未掌握的单词（痛点 2） 3. 复习模式帮助用户针对词图单位进行复习 |
| 用户信息 |
用户情况 |
| 姓名 |
田昶禹 |
| 身份 |
某校考研党，英语单词量不高，需要大量提升 |
| 使用动机 |
想要在半年里把考研单词记熟，每天抽出一定时间专门背单词 |
| 典型场景1 |
复习数一数二腻了，背背单词学学英语换换脑子 |
| 典型场景2 |
突然被某篇鸡汤激励到，立誓背完考研单词，然后背了五分钟 |
| 用户偏好 |
偶尔会专门背记单词，主要时间不会用太多，但会用系统化的时间专门记忆单词 |
| 用户痛点 |
单词量较大，碎片化背单词过于低效；且容易注意力不集中、记忆不长久 |
| 预期使用场景 |
由于大学时间比较自由，因此需要依靠激励机制来鼓励自己每天进行背单词。获得激励之后，每天确定背词小目标并完成。 |
| 实现该用户需求的功能 |
1. 日历图展示打卡情况，激励用户每天进行单词学习（典型场景 2） 2. 我的词图界面可以预览每个词图的背诵进度条，激励用户消除红色、橙色的部分，让整个词图进度条都呈现美丽的绿色 |
| 用户信息 |
用户情况 |
| 姓名 |
田永晓 |
| 身份 |
某校英语专业或出锅留学生 |
| 使用动机 |
有大量背单词的需求，常啃红宝书等词书，普通的碎片化记忆模式 APP 不适合了 |
| 典型场景1 |
某一天要背好多单词，不想背着一大摞书去图书馆，硬啃，普通的背单词软件过于碎片化，满足不了需求 |
| 典型场景2 |
看了个英文电影，想把电影里整理出来的单词加入候选背单词列表中 |
| 用户偏好 |
系统化背单词，即专门抽出时间阅读书籍、影视并记忆有关单词 |
| 用户痛点 |
纸质书籍重且较不方便、没有交互；大量学习中产生的零散单词除了手写记录难以集中背诵，且无法自定义位置；希望能提供基于词根词缀、近反义词的推荐背诵词 |
| 预期使用场景 |
对单词的专业性和难度有独特的要求，且由于背单词的重要性，需要使用特殊技巧来增强单词记忆。每天需要背单词的时间很长，觉得枯燥乏味难以集中精力。但是词图的多样化编辑功能可以让用户设计属于自己的词图，在背单词的过程中加入设计环节，帮助用户记忆的同时增加趣味性，让用户可以长时间背单词并减少疲劳感。 |
| 实现该用户需求的功能 |
1. 提供随机生成、顺序生成、词根词缀、近反义词等多种生成推荐词表方式，供用户建立词根词缀的概念及联想记忆（痛点 3） 2. 画布的 zoom 功能、可拖拽功能提供极大的操作空间（痛点 1、2） 3. 支持 9 种词书的选择（痛点 1） 4. 工具栏可以设置每个单词的样式 |
压力测试
对于所有 API 进行行为分析（具体分析表格请助教老师移步 gitlab 察看）：
| API |
最大长度（数量级） |
查询数据库次数 |
| 词图中单词状态改变 |
301 |
5 |
| SVG 上传 |
913 |
2 |
| 用户登入 |
74 |
1 |
| 查看所有词图 |
334 |
4 |
| 查看统计信息 |
2110 |
2 |
| 查看单词释义 |
537 |
1 |
在此，取较有代表性的 API，取一个较新的账户进行压力测试，测试结果如下：
| API |
用户数 |
时间 |
业务数 |
成功率 |
传输效率 |
总数据传输 |
响应时间 |
实际最高并发连接数 |
最长传输时间 |
最短传输时间 |
| 查看单词释义 |
255 |
60s |
11055 |
100% |
186.46trans/s |
5.64M |
0.08s |
14.87 |
5.06s |
0.00s |
| 查看统计信息 |
255 |
60s |
1038 |
100% |
17.50trans/s |
12.08M |
0.85s |
14.88 |
3.95s |
0.09s |
可以看到，对于新用户，查询的效率和并发的支持较好。
但是对于一个数据量较大的老用户（背单词数在 500 数量级），进行压力测试：
| API |
用户数 |
时间 |
业务数 |
成功率 |
传输效率 |
总数据传输 |
响应时间 |
实际最高并发连接数 |
最长传输时间 |
最短传输时间 |
| 查看统计信息 |
100 |
10s |
37 |
100% |
4.03trans/s |
1.56M |
5.04s |
20.32 |
8.9s |
0.00s |
| 查看统计信息 |
100 |
60s |
293 |
100% |
4.94trans/s |
12.38M |
16.77s |
82.92 |
22.61s |
1.31s |
| 查看统计信息 |
200 |
10s |
37 |
100% |
4.03trans/s |
1.56M |
5.63s |
22.71 |
9.04s |
0.00s |
| 查看统计信息 |
200 |
60s |
278 |
73.54% |
4.67trans/s |
11.75M |
23.06s |
107.78 |
30.50s |
1.69s |
| 查看统计信息 |
255 |
60s |
219 |
16.82% |
3.66trans/s |
9.42M |
23.51s |
85.94 |
49.08s |
4.29s |
| 查看所有词图 |
100 |
60s |
1562 |
100% |
26.07trans/s |
8.08M |
3.70s |
96.48 |
5.51s |
0.20s |
| 查看所有词图 |
200 |
60s |
1593 |
84.82% |
26.68trans/s |
8.29M |
6.27s |
167.18 |
29.70s |
0.21s |
| 查看所有词图 |
255 |
60s |
1659 |
22.40% |
20.37trans/s |
9.61M |
5.98s |
166.15 |
29.84s |
0.00s |
对于某一个 API，单位时间内能够完成的业务数是有限的。对于查看统计信息、查看所有词图两个与数据库交互较多，或计算过程较复杂的 API，我们无法支持过高的并发数：200 用户并发尚不会存在问题，但更多的用户则会造成大量请求因等待处理的 socket 队列满而被丢弃；同时，过多 Client 与 nginx 之间建立了连接。这一方面是后端处理数据时速度较慢，存在优化空间；另一方面是硬件设备条件限制；以及没有计算 nginx Client、并发队列和请求之间的数值关系。
在修改并发队列长度后进行测试，虽然总业务数增加了，但成功业务数没什么变化，因此成功率反而下降了：
| API |
用户数 |
时间 |
业务数 |
成功率 |
传输效率 |
总数据传输 |
响应时间 |
实际最高并发连接数 |
最长传输时间 |
最短传输时间 |
| 查看所有词图 |
255 |
60s |
1666 |
16.28% |
27.84trans/s |
10.15M |
8.41s |
233.99 |
23.31s |
0.00s |
在此基础上，修改 Nginx 的最大连接数（768$\rightarrow$1024），成功率大幅增加：
| API |
用户数 |
时间 |
业务数 |
成功率 |
传输效率 |
总数据传输 |
响应时间 |
实际最高并发连接数 |
最长传输时间 |
最短传输时间 |
| 查看统计信息（原） |
255 |
60s |
219 |
16.82% |
3.66trans/s |
9.42M |
23.51s |
85.94 |
49.08s |
4.29s |
| 查看所有词图（原） |
255 |
60s |
1659 |
22.40% |
20.37trans/s |
9.61M |
5.98s |
166.15 |
29.84s |
0.00s |
| 查看统计信息 |
255 |
60s |
155 |
38.27% |
2.59trans/s |
6.55M |
15.99s |
41.38 |
30.58s |
0.00s |
| 查看所有词图 |
255 |
60s |
1733 |
99.20% |
29.27trans/s |
8.97M |
8.04s |
235.42 |
10.47s |
0.00s |
其中，查看统计信息的压测报错 SIGPIPE: writing to a closed pipe/socket/fd (probably the client disconnected) 以及 [alert] socket: xxx select timed out: Connection timed out，暂未解决。
单元测试
由于本项目比较特殊，数据库为规模较大的预处理数据库，故仅进行了部分不依赖于词书、单词信息、近反义词、词根词缀等数据库的单元测试。
测试矩阵
功能性测试
| 浏览器 |
版本 |
登录注册 |
首页显示 |
分类处理 |
词图创建 |
词图复习 |
曲线计算 |
用户反馈 |
| Google Chrome |
90.0.4430.93 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
| Microsoft Edge |
90.0.818.56 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
| 360浏览器 |
13.0.2220.0 |
正常 |
正常 |
正常 |
正常 |
正常 |
要开 js 功能 |
正常 |
| Firefox |
88.0.1 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
正常 |
| Safari（平板） |
604.1 |
正常 |
正常 |
正常 |
无法拖拽、更改大小 |
无法拖拽、更改大小 |
正常 |
正常 |
| QQ浏览器（平板） |
11.4.8.4762 |
正常 |
正常 |
正常 |
无法拖拽、更改大小 |
无法拖拽、更改大小 |
正常 |
正常 |
UI和操作测试
| 浏览器 |
屏幕分辨率 |
基本功能 |
页面布局 |
操作流畅度 |
| Chrome 90.0.4430.93 |
1920*1080 |
正常 |
画布在100%显示时超出屏幕 |
比较流畅 |
| Edge 90.0.818.56 |
1920*1080 |
正常 |
画布在100%显示时超出屏幕 |
流畅 |
| 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 |
正常 |
侧边栏弹出时右侧不会自适应；画布在100%显示时超出屏幕 |
比较不流畅 |
| 360安全浏览器 13.1.1302.0 |
1920*1080 |
正常 |
画布在100%显示时超出屏幕 |
较流畅 |
出口条件
前端
| 要求 |
完成情况 |
下一步 |
| 整体 UI 美观 |
基本实现统一的 UI 风格，基本保证美观 |
进一步美化 UI 界面细节 |
| 教程清晰 |
在教程页面使用 gif 进行动态展示功能，相对完善 |
考虑新增用户首次进入编辑的指南 |
| 跳转逻辑合理 |
跳转按钮清晰，返回按钮逻辑明确 |
了解用户体验感受，适当修正逻辑 |
| 用户操作友好 |
多数操作按钮有提示或本身带有文字信息 |
收集用户反馈，对模糊的地方进行补充说明 |
| 进行部分要求审查 |
添加了对用户名、密码、词图单词数量、词图名称等基本限制的前端审查 |
收集用户反馈，对限制进行调整 |
| 各屏幕分遍率、放大缩小、分屏的兼容 |
对部分侧边栏和词图的大小进行了屏幕自适应，对导航栏进行了分屏位置切换 |
完善对屏幕的适应性，争取让适应更加流畅 |
后端
| 要求 |
完成情况 |
下一步 |
| 数据库设计完备 |
能够支持前端询问，同时支持推荐算法的数据库设计 |
进一步根据 beta 要求设计数据库 |
| 进行权限处理 |
用户登录获得密钥，进而才可使用各种功能，保证数据安全性 |
完善权限处理系统 |
| 进行邮箱验证 |
用户需要通过邮箱验证才可使用软件，减少恶意用户 |
完善邮箱验证内容、跳转方法 |
| 单词数据 |
770570 个单词，覆盖面较广；其中 20651 个单词具有中英文例句 |
进一步完善释义的存储方式、例句的合理性检查 |
| 词书数据 |
导入了四级、六级、专业四八级、考研、雅思、托福、GRE、MBA、红宝书等词书 |
进一步根据用户需求寻找并导入更多的词书 |
| 近反义词等推荐算法 |
共有 5060 个单词可进行近反义词推荐；共有 9326 个单词可进行同词根词缀推荐；推荐算法自由选择 |
加入更多推荐算法；增加近反义词、词根词缀列表；显式列出对比或关联 |
综上，基本完成 Alpha 阶段的出口要求。
