项目名称：EasyLearn 英语学习平台 版本：V1.0 文档清单：1. 系统架构设计文档｜2. 产品原型方案 (含页面清单 + 线框说明)｜3. 用户操作手册｜4. 软件测试文档 定位：B2C Web 端英语自学平台，支持单词背诵、听力练习、阅读训练、题库刷题、学习数据统计、会员体系。

一、系统架构设计文档

1. 项目概述

1.1 项目背景

面向学生、职场自学人群，打造轻量化在线英语学习网站；提供单词、听力、阅读、真题练习、学习打卡、进度报表等核心功能。支持免费用户与付费会员区分权限。

1.2 建设目标

1. 多模块英语在线练习，随时随地网页学习
2. 自动记录学习进度、错题本、遗忘复习
3. 后台可管理词库、题库、听力素材、课程
4. 会员权限管控、支付购买、订单管理
5. 学习数据分析可视化看板

1.3 目标用户

• 中小学生、大学生四六级、考研英语
• 职场成人：雅思托福、日常口语自学人群

1.4 功能范围

用户端 (前台)

1. 用户模块：注册、登录、找回密码、个人中心、头像修改
2. 单词学习：词书选择、单词背诵、艾宾浩斯复习、单词收藏、错题单词
3. 听力训练：音频播放、听力习题、字幕开关、调速播放
4. 阅读练习：阅读理解文章 + 配套题目
5. 题库刷题：专项练习、模拟试卷、计时考试、自动判分
6. 错题本：自动收录错题、重做错题
7. 学习打卡、学习日历、学习时长统计、数据报表
8. 会员中心：会员套餐、购买会员、订单查询
9. 文章资讯、英语干货社区

管理后台 (运营端)

1. 用户管理：用户列表、禁用账号
2. 词库管理：词书、单词批量导入、增删改查
3. 题库管理：听力 / 阅读 / 单选题目上传、批量导入
4. 素材管理：音频文件、阅读文章管理
5. 会员商品管理：套餐配置、价格
6. 订单管理、支付流水
7. 数据看板：网站访问量、用户学习数据统计

2. 技术架构设计

2.1 技术选型方案

前后端分离架构 | 层级 | 技术栈方案 | |—|—| | 前端 | Vue3 + Vite + Element‑Plus + ECharts (学习图表)；适配 PC 端，响应式兼容平板浏览器 | | 后端 | SpringBoot3 / Node.js (NestJS) 二选一；RESTful API| | 数据库 | MySQL 8.0（业务数据：用户、单词、题目、订单、学习记录）| | 缓存 | Redis：登录会话、热点词书缓存、限流、艾宾浩斯复习任务缓存 | | 文件存储 | 阿里云 OSS / MinIO：听力音频、图片素材 | | 部署 | Nginx 反向代理；Docker 容器部署；后端 API 服务独立部署 | | 第三方服务 | 短信验证码、微信 / 支付宝支付 (会员)、JWT 身份鉴权 |

2.2 分层架构图

客户端层(Web浏览器)
        ↓
Nginx(静态资源、反向代理、负载均衡)
        ↓
前端应用(Vue3)
        ↓
API网关层(鉴权、限流、跨域)
        ↓
业务服务层
 ├─用户服务
 ├─单词学习服务
 ├─听力阅读服务
 ├─题库考试服务
 ├─会员&订单服务
 └─统计报表服务
        ↓
数据持久层
 ├─MySQL(主业务库)
 └─Redis缓存
        ↓
对象存储：音频、图片资源文件

2.3 数据库核心表设计（核心）

1. sys_user 用户表：id、账号、密码 (加密)、昵称、头像、手机号、会员到期时间、创建时间
2. word_book 词书表：词书 id、名称、简介、单词总数、分类 (四级 / 考研)、是否免费
3. word_info 单词表：id、词书 id、英文单词、音标、中文释义、例句、音频地址
4. user_word_record 用户单词学习记录：用户 id、单词 id、记忆状态、上次复习时间、下一次复习时间、熟练度
5. listen_material 听力素材表：标题、音频 url、原文文本、难度
6. exam_question 题目题库表：题干、选项 A‑D、正确答案、解析、题目类型、难度、所属题库
7. user_exam_record 用户做题记录、错题记录表
8. member_package 会员套餐表：套餐名称、时长、价格、权限说明
9. user_order 订单表

3. 安全设计

1. 用户密码 BCrypt 加密存储，禁止明文
2. JWT 令牌鉴权，接口防越权访问
3. 文件上传校验后缀，禁止上传可执行脚本
4. SQL 防注入，后端参数校验
5. 支付订单签名校验，防止篡改价格

4. 部署环境规划

• 开发环境：本地 Docker
• 测试环境：测试服务器
• 生产环境：云服务器 + OSS 存储音频资源
• 备份策略：MySQL 每日定时备份

5. 接口规范

• 统一返回 JSON 格式：code、msg、data
• 统一状态码：200 成功，401 未登录，403 权限不足，500 服务器异常

二、产品原型图设计文档（文字原型 + 页面清单，可直接导入 Axure/Figma 制作）

无图片原型，提供完整页面清单 + 页面布局描述，UI 设计师可直接出原型图

2.1 网站导航菜单（顶部导航栏）

首页｜单词背诵｜听力训练｜阅读练习｜题库刷题｜学习中心｜会员中心｜登录 / 注册

2.2 页面清单 & 线框原型说明

页面 1：首页（首页钩子页）

布局：

1. 顶部导航栏
2. Banner 大图：英语学习宣传标语，2 个按钮：立即开始学习、查看词库
3. 功能模块卡片区：4 个卡片【单词背诵】【听力练习】【阅读训练】【真题题库】
4. 热门词书推荐列表（四六级，考研，雅思等）
5. 学习数据案例展示、会员套餐介绍
6. 底部页脚：版权、关于我们

页面 2：注册登录页

左右分栏布局：

• 左侧：宣传配图
• 右侧表单：手机号 + 验证码登录；账号密码登录；注册入口；忘记密码

页面 3：单词词书选择页

• 筛选栏：难度分类（小学、高中、四级、六级、考研、雅思）、免费 / 会员词书筛选
• 卡片列表：每个卡片展示词书名、单词总数、简介、【开始学习】按钮

页面 4：单词背诵学习页（核心页面）

全屏学习卡片模式

1. 当前单词卡片：英文单词、音标
2. 按钮：显示释义；音频播放
3. 熟练度选择按钮：认识 / 模糊 / 不认识（用于艾宾浩斯复习算法）
4. 底部进度条：已学 / 总单词数量
5. 侧边栏：单词收藏按钮

页面 5：单词复习页

自动筛选到达复习周期的单词，布局和背诵页一致

页面 6：听力练习页面

1. 音频播放器：播放 / 暂停、倍速选择 0.75‑1.5 倍
2. 字幕区域：可点击显示 / 隐藏听力原文
3. 下方配套选择题
4. 提交答案，查看解析

页面 7：阅读练习页面

• 左侧：英文阅读长文
• 右侧：配套阅读理解题目

页面 8：题库刷题 / 模拟考试页

• 计时倒计时组件
• 题目区域、选项
• 上一题、下一题、交卷按钮
• 提交后自动出分、错题解析页面

页面 9：个人学习中心

左侧侧边菜单：

• 学习仪表盘（ECharts 图表：每日学习时长打卡日历）
• 我的错题本
• 我的收藏单词
• 学习历史记录
• 个人资料设置

页面 10：会员购买页面

会员套餐卡片（月卡、季卡、年卡），价格，权益说明，立即下单，支付弹窗

页面 11：管理后台首页

后台侧边菜单 + 数据看板（用户数量、订单数据） 后台子页面：用户管理、词书管理、题库管理、素材上传、订单管理

2.3 原型交付建议工具

Figma / Axure RP；按照以上页面清单绘制低保真线框图。

三、用户操作手册

1. 手册说明

本文档面向网站普通学习者用户，讲解完整使用流程。

2. 注册与登录

1. 打开网站首页，点击右上角【注册】
2. 输入手机号，获取短信验证码，设置登录密码完成注册
3. 返回登录页，输入账号密码登录网站；忘记密码可通过手机号重置

3. 单词背诵操作流程

1. 登录后，顶部导航点击【单词背诵】
2. 在词书列表，筛选目标词库，点击【开始学习】
3. 进入单词卡片页面，先看英文单词，点击喇叭播放发音
4. 点击【显示释义】查看中文解释和例句
5. 根据掌握程度点击：认识 / 模糊 / 不认识；系统会根据艾宾浩斯算法自动安排复习时间
6. 学习完成后自动保存进度；下次进入词书会继续上次进度学习
7. 遇到重要单词，点击【收藏】加入收藏夹，可在个人中心查看收藏单词

4. 听力训练

1. 导航栏选择【听力训练】
2. 选择听力素材，进入练习页
3. 点击播放按钮播放音频；可调整播放倍速
4. 答题完成，提交查看答案解析
5. 做错题目自动加入错题本

5. 阅读练习与题库刷题

1. 点击【阅读练习】，选择文章进行阅读 + 答题
2. 【题库刷题】分为专项练习和模拟考试；模拟考试开启倒计时，时间结束自动交卷
3. 提交试卷后，查看得分，查看错题解析；错题保存至错题本

6. 错题本使用

1. 进入【个人中心】→【我的错题】
2. 可筛选单词错题、听力错题、阅读错题
3. 点击重做，再次练习错题，掌握后可移除出错题列表

7. 学习打卡 & 数据查看

1. 每日完成任意学习任务自动打卡
2. 仪表盘查看近 30 天学习时长统计图、打卡日历，查看自己学习进度

8. 会员购买

1. 点击【会员中心】，查看各个会员套餐权益
2. 选择套餐，点击立即购买，跳转支付
3. 支付成功后立即解锁会员专属词书、题库、听力素材

9. 个人设置

个人中心可修改昵称、上传头像、修改登录密码、退出登录。

10. 常见问题 FAQ

1. Q：学习进度丢失怎么办？ A：必须登录账号学习，进度保存在账号下；游客学习不会保存进度。
2. Q：会员到期后已学单词会消失吗？ A：学习记录永久保留，只是会员专属素材无法继续访问。

四、软件测试文档

1. 测试概述

1.1 测试目的

验证英语学习网站所有功能正常、页面兼容性、数据正确性、安全性；上线前发现并修复缺陷。

1.2 测试环境

• 浏览器：Chrome、Edge、Firefox
• 分辨率：1920*1080 PC 端；1280 平板分辨率
• 测试服务器地址：测试环境 URL
• 测试账号：普通免费账号、会员账号、后台管理员账号

1.3 测试类型

功能测试、兼容性测试、性能测试、安全测试

2. 测试用例

模块 1：注册登录模块

表格

模块 2：单词学习模块

表格

模块 3：听力练习模块

表格

模块 4：题库 & 模拟考试模块

表格

模块 5：错题本、学习数据模块

表格

模块 6：会员权限测试

表格

3. 兼容性测试

1. Chrome 浏览器最新版：所有页面布局正常、按钮可点击
2. Edge 浏览器：全部功能正常
3. Firefox 浏览器：音频播放、图表渲染无异常
4. 缩放浏览器窗口 1280px 宽度，页面布局无错乱

4. 性能测试项

1. 首页加载完成时间 ≤ 2 秒
2. 打开单词学习页面响应速度 ≤ 1 秒
3. 并发 50 个用户同时学习单词无报错、无卡顿

5. 安全测试用例

1. 未登录用户直接访问学习中心后台 URL → 被拦截跳转登录页
2. 修改浏览器参数，尝试访问别人的学习记录 → 禁止越权查看
3. 恶意脚本输入昵称 → XSS 过滤，特殊字符转义

6. 缺陷管理

缺陷等级划分：

• 严重：核心功能无法使用（单词打不开、做题提交失败）→ 必须修复才可上线
• 一般：功能可用，页面显示 bug → 迭代修复
• 优化建议：UI 体验优化，后期版本优化

7. 测试结论

所有测试用例执行完毕；无严重 Bug，功能全部正常、兼容性达标，则可上线发布。