本科毕业设计（论文）
多语种在线语言学习平台 LinguaVerse 的设计与实现
Design and Implementation of LinguaVerse: A Multilingual Online Language Learning Platform
| 项目 | 内容 |
|---|---|
| 学 院 | （按实际填写） |
| 专 业 | 计算机科学与技术 |
| 学生姓名 | （按实际填写） |
| 学 号 | （按实际填写） |
| 指导教师 | （按实际填写） |
| 完成日期 | 2026 年 10 月 |
摘 要
随着经济全球化与"教育信息化 2.0 行动计划"的深入推进，外语学习需求呈现出多语种、碎片化、个性化的鲜明特征。传统课堂难以满足学习者随时随地开口练习的诉求，而市面上的多邻国等商业产品虽功能成熟，却不开放、不可定制，难以作为教学研究与二次开发的基础。本文设计并实现了一个覆盖英语、日语、韩语三种主流语言的多语种在线语言学习平台------LinguaVerse，旨在以真实的全栈工程实践，验证"前后端分离 + 轻量关系型数据库 + 浏览器端语音能力"这一技术路线在语言学习场景中的可行性。
平台采用 B/S 架构与前后端分离模式：后端基于 Node.js 与 Express 框架构建 RESTful API，数据持久化选用 Node.js 24 内置的 node:sqlite 模块驱动的 SQLite 数据库，共设计 14 张数据表；前端为无需任何构建工具的原生 JavaScript 单页应用（SPA），并通过移动优先的响应式设计适配手机端，使用底部导航栏、44px 最小触控区域、安全区适配与 Web App Manifest 等手段保证移动端体验。在核心学习功能上，平台实现了分级课程体系（英语 CEFR A1---B1、日语 JLPT N5---N3、韩语 TOPIK 1---3 共 9 门课程）、词汇闪卡、语法练习、听力训练与口语跟读四类互动学习模块，并结合莱特纳记忆盒、经验值（XP）与九级成长体系、13 枚成就徽章、连续学习天数统计与每日学习目标构成完整的游戏化激励闭环；口语跟读模块基于 Web Speech API 实现浏览器端语音识别与语音合成，并采用最长公共子序列（LCS）算法对跟读结果进行相似度评分。此外，平台实现了基于学习者偏好与薄弱项的个性化学习路径推荐、社区发帖/点赞/评论交流与 XP 排行榜。
系统经过功能测试、接口测试、安全测试与移动端适配测试，全部测试用例通过，浏览器控制台无报错，演示账号数据完整可复现。结果表明，本平台功能完整、运行稳定、交互流畅，达到了预期的设计目标，可为中小型多语种学习应用的快速开发提供参考。
关键词：多语种学习；在线教育平台；Node.js；Express；SQLite；单页应用；Web Speech API；游戏化学习
Abstract
With the deepening of economic globalization and China's "Education Informatization 2.0 Action Plan", foreign language learning shows distinct characteristics of multilingualism, fragmentation and personalization. Traditional classrooms can hardly satisfy learners' demand to practice speaking anytime and anywhere, while commercial products such as Duolingo, though mature, are neither open nor customizable, and thus can hardly serve as a foundation for teaching research and secondary development. This paper designs and implements LinguaVerse, a multilingual online language learning platform covering three mainstream languages --- English, Japanese and Korean --- aiming to verify, through genuine full-stack engineering practice, the feasibility of the technical route of "front-end/back-end separation + lightweight relational database + browser-side speech capability" in language learning scenarios.
The platform adopts B/S architecture with front-end/back-end separation: the back end builds RESTful APIs based on Node.js and Express, and data persistence uses SQLite driven by the built-in node:sqlite module of Node.js 24, with 14 tables designed in total; the front end is a vanilla-JavaScript single-page application (SPA) requiring no build tooling, and adapts to mobile devices through a mobile-first responsive design, using a bottom navigation bar, a 44px minimum touch target, safe-area adaptation and Web App Manifest to guarantee the mobile experience. For core learning functions, the platform implements a leveled course system (9 courses: English CEFR A1--B1, Japanese JLPT N5--N3, Korean TOPIK 1--3), and four interactive modules --- vocabulary flashcards, grammar exercises, listening training and speaking shadowing --- forming a complete gamification loop that combines Leitner memory boxes, experience points (XP) with a nine-level growth system, 13 achievement badges, learning streak statistics and daily goals. The speaking module implements browser-side speech recognition and speech synthesis based on the Web Speech API, and scores shadowing results with the Longest Common Subsequence (LCS) similarity algorithm. In addition, the platform provides personalized learning-path recommendation based on learner preferences and weaknesses, a community with posting/liking/commenting, and an XP leaderboard.
The system has passed functional, interface, security and mobile-adaptation testing, with all test cases passing and no console errors. The results show that the platform is functionally complete, stable and smooth, achieves the expected design goals, and provides a reference for the rapid development of small and medium-sized multilingual learning applications.
Key words: multilingual learning; online education platform; Node.js; Express; SQLite; single-page application; Web Speech API; gamified learning
目 录
- 第 1 章 绪论
- 1.1 研究背景与意义
- 1.2 国内外研究与应用现状
- 1.3 本文主要工作
- 1.4 论文组织结构
- 第 2 章 相关技术介绍
- 2.1 B/S 架构与前后端分离
- 2.2 Node.js 运行时与 Express 框架
- 2.3 SQLite 与 node:sqlite
- 2.4 原生 JavaScript 单页应用（SPA）
- 2.5 Web Speech API：语音识别与语音合成
- 2.6 间隔重复记忆理论与莱特纳记忆盒
- 2.7 游戏化学习理论
- 2.8 本章小结
- 第 3 章 系统需求分析
- 3.1 可行性分析
- 3.2 系统角色与总体用例
- 3.3 功能需求分析
- 3.4 非功能需求分析
- 3.5 本章小结
- 第 4 章 系统设计
- 4.1 系统总体架构设计
- 4.2 数据库设计
- 4.3 RESTful API 接口设计
- 4.4 核心功能模块设计
- 4.5 移动端适配设计
- 4.6 安全性设计
- 4.7 本章小结
- 第 5 章 系统实现
- 5.1 开发与运行环境
- 5.2 数据库层与数据播种实现
- 5.3 用户认证与会话管理实现
- 5.4 课程与学习内容接口实现
- 5.5 四类互动学习模块实现
- 5.6 服务端计分引擎与成长体系实现
- 5.7 个性化学习路径推荐实现
- 5.8 社区交流与成就系统实现
- 5.9 前端单页应用实现
- 5.10 移动端适配实现
- 5.11 本章小结
- 第 6 章 系统测试
- 6.1 测试环境与测试方法
- 6.2 功能测试
- 6.3 接口与异常输入测试
- 6.4 安全性测试
- 6.5 移动端与兼容性测试
- 6.6 测试结论
- 第 7 章 总结与展望
- 7.1 工作总结
- 7.2 不足与展望
- 参考文献
- 致谢
第 1 章 绪论
1.1 研究背景与意义
1.1.1 研究背景
语言是人类沟通的桥梁，也是"一带一路"倡议与区域经贸合作中不可或缺的工具。近年来，除英语外，日语与韩语因动漫、影视、游戏等文化产业的输出而在我国拥有庞大的学习者群体。据中国日语教学协会与相关行业报告统计，我国日语、韩语学习者规模持续位居世界前列，且呈现出明显的低龄化与业余化趋势：多数学习者并非语言专业出身，而是利用通勤、午休等碎片时间通过手机自学。
与此同时，国家层面的教育信息化政策为在线学习平台的普及创造了良好条件。《教育信息化 2.0 行动计划》明确提出要推动信息技术与教育教学深度融合，构建"网络化、数字化、智能化、个性化、终身化"的教育体系。在此背景下，在线语言学习平台从"可有可无的补充"演变为"主流学习入口"。
然而，观察当前的学习工具生态可以发现两个突出问题。其一，商业产品（如多邻国、沪江开心词场等）功能成熟但完全封闭：学习内容、计分规则与数据均不可定制，无法满足高校教学实验、个人研究或垂直场景（如小语种考证）的二次开发需求。其二，不少开源或课程实践项目停留在"前端演示"阶段------数据写死在页面里、刷新即丢失、没有真实的用户体系与持久化存储，无法体现"平台"应有的工程完整性。语言学习恰恰是强状态、强反馈的学习类型：记忆进度、练习记录、成长激励与社区互动，都要求有一个真实的后端作为支撑。
1.1.2 研究意义
本课题选择"多语种在线语言学习平台"作为研究对象，具有以下三方面意义。
第一，工程实践意义。本平台从前端、后端到数据库完整落地，采用业界主流的 Node.js + Express + SQLite 技术栈与前后端分离架构，覆盖用户认证、业务接口、计分引擎、推荐算法、社区系统等典型 Web 应用的完整链路，是一次贴近真实生产形态的全栈工程训练，对同类中小型 Web 应用的开发具有直接的参考价值。
第二，教学应用意义。平台内容对标国际主流语言能力标准------英语的 CEFR（欧洲语言共同参考框架）、日语的 JLPT（日本语能力测试）与韩语的 TOPIK（韩国语能力考试），并全部存储于数据库中，便于教师替换或扩充题库，可直接用于辅助教学或作为二次开发的基座。
第三，学习科学意义。平台将间隔重复记忆理论（莱特纳记忆盒）、游戏化激励（经验值、等级、成就、连续天数）与"输出型练习"（口语跟读）融入产品机制，并以浏览器端 Web Speech API 实现零成本的语音评测，验证了在不依赖付费云端语音服务的前提下实现"听说读写"闭环训练的可行路径。
1.2 国内外研究与应用现状
在国外，以 Duolingo 为代表的游戏化语言学习应用证明了"短时高频 + 游戏化激励"模式的有效性，其每日打卡、经验值与连续天数机制已成为行业标准范式；Anki 等间隔重复卡片软件则验证了 SRS（Spaced Repetition System）在词汇记忆中的显著效果。在语音评测方面，商业产品普遍采用云端付费接口，而 W3C 的 Web Speech API 自 2012 年起逐步在 Chrome、Edge 等主流浏览器中落地，使纯浏览器端的语音识别（ASR）与语音合成（TTS）成为可能，为轻量级口语练习提供了新的技术选择。
在国内，在线教育市场先后经历了直播大班课、AI 互动课等形态。学术研究方面，基于 Web 的语言学习平台设计是计算机应用类毕业设计与论文的常见选题，但多数实现存在两点不足：一是前后端耦合或仅有静态前端，缺少真实的持久化与认证体系；二是学习机制单薄，仅罗列课程内容而缺乏记忆科学依据与激励闭环。此外，针对移动端的适配往往被忽视，学习类应用的主要使用场景恰恰在手机上。
从技术选型的演进看，国内教学与实验项目经历了三个阶段：早期以 JSP/Servlet 或 PHP 为代表的"模板渲染"单体架构，页面与业务高度耦合；中期转向 Spring Boot + Vue/React 的主流组合，工程化程度高但环境搭建与部署门槛明显，对快速原型不友好；近年来，以 Node.js 为代表的"同语言全栈"方案逐渐受到关注，前后端共享 ECMAScript 生态，配合 SQLite 等嵌入式数据库，可在单机零依赖的前提下完成完整业务闭环。本系统即采用第三种路线，在保留真实后端所有关键特征（持久化、鉴权、事务性写入、服务端计分）的同时，将部署复杂度压缩到"一条命令启动"的水平。
在语音评测方面，国内商业产品普遍依赖云端语音测评接口，按调用量计费，且对网络环境敏感；而 Web Speech API 提供的浏览器端识别与合成能力，在"跟读---比对---反馈"这类轻量场景下已经够用，其零成本、低延迟、离线可合成（TTS 走系统引擎）的特性，对教学原型与预算受限的应用场景具有独特的适配性。将 Web Speech 与文本相似度算法结合进行口语评分的技术路线，在同类公开实践中仍不多见，具备一定的探索价值。
综上，"多语种 + 真实后端 + 移动优先 + 游戏化激励 + 浏览器端语音评测"的组合，在同类实践项目中仍具有明确的实现价值与改进空间，这正是本文工作的切入点。
1.3 本文主要工作
本文的主要工作可以概括为以下六点：
- 需求分析：以目标用户画像为出发点，梳理多语种语言学习平台的功能需求与非功能需求，形成用例模型与需求规格。
- 总体设计：设计 B/S 三层架构与前后端分离方案，规划 14 张数据表的数据库模式、RESTful API 接口集与前端视图结构。
- 内容建设：编写覆盖英/日/韩三语、9 个等级、4 类模块共 180 条学习内容（72 条词汇、45 道语法题、36 道听力题、27 句口语跟读句），全部入库存储。
- 核心机制实现：实现基于莱特纳记忆盒的词汇复习机制、以 XP 为核心的服务端计分引擎（含 9 级成长体系、13 枚成就、连续天数与每日目标）、基于薄弱项加权的个性化推荐算法，以及基于 LCS 相似度的口语跟读评分。
- 移动端适配：以移动优先策略完成响应式布局、底部导航、触控目标尺寸、安全区与 PWA 基础（Web App Manifest）适配。
- 系统测试：设计并执行功能测试、接口测试、安全测试与移动端适配测试，验证系统的正确性与稳定性。
1.4 论文组织结构
本文共分七章。第 1 章绪论，介绍研究背景、意义、现状与主要工作；第 2 章介绍系统所涉及的相关技术；第 3 章进行需求分析；第 4 章阐述系统总体设计，包括架构、数据库、接口与模块设计；第 5 章详述各模块的实现，给出关键代码与说明；第 6 章介绍系统测试的过程与结果；第 7 章总结全文并展望后续工作。
第 2 章 相关技术介绍
2.1 B/S 架构与前后端分离
B/S（Browser/Server）架构即浏览器/服务器架构，客户端只需一个浏览器即可访问系统，无需安装专门软件，天然契合"随时随地学习"的场景。前后端分离是 B/S 架构的现代演进形态：前端作为独立的单页应用负责视图与交互，后端只提供无状态的 RESTful 接口，双方以 JSON 作为统一的数据交换格式，通过 HTTP 协议通信。
前后端分离带来了三方面好处：一是职责边界清晰，前端专注用户体验，后端专注业务逻辑与数据；二是接口可复用，同一套 API 未来可直接支撑小程序或原生客户端；三是便于测试，接口可以用 curl 等工具独立验证。本系统即采用该架构，前端与后端通过 /api 前缀的接口通信，认证采用 Bearer Token 方式。
2.2 Node.js 运行时与 Express 框架
Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时，采用事件驱动、非阻塞 I/O 模型，单线程即可支撑高并发 I/O 密集型应用，且前后端同构使用 JavaScript/ECMAScript，降低了全栈开发的语境切换成本。本系统使用 Node.js 24 LTS，并利用其内置的 node:crypto 模块完成密码哈希与会话令牌生成。
Express 是 Node.js 生态中最流行的 Web 应用框架，以中间件（middleware）管道为核心机制：请求依次流经 app.use 注册的处理函数，每个中间件可读写 req/res 对象并决定是否调用 next() 交出控制权。Express 提供了简洁的路由注册（app.get/app.post 等）、参数解析与静态资源托管能力，非常适合构建中小型 REST API。本系统的全部接口均由 Express 路由实现，静态前端页面亦由 Express 托管，实现了单进程一体化部署。
Express 的中间件模型还带来两个对本系统至关重要的工程特性。一是横切关注点的集中处理：鉴权、JSON 解析、错误兜底均以中间件形式注册一次、全局生效，业务路由内部无需重复编写令牌校验代码，既减少重复又避免遗漏；二是错误处理的统一出口：Express 约定四参数的中间件为错误处理函数，任何路由内抛出的异常都会汇聚到该函数，本系统在此统一返回"服务器内部错误"并记录日志，保证异常场景下响应格式的稳定一致。此外，express.static 中间件以极低的配置成本承担了前端静态资源（HTML/CSS/JS、图标与清单文件）的托管职责，使前后端可以同源部署，避免了跨域配置与额外的文件服务器。
2.3 SQLite 与 node:sqlite
SQLite 是世界上部署量最大的关系型数据库，它将整个数据库存储为单个文件，无需独立的服务器进程，以库的形式嵌入应用程序，支持绝大多数标准 SQL 语法，并提供事务与外键约束。对于单机部署、读多写少的中小型应用而言，SQLite 免去了安装与维护数据库服务的负担，部署成本几乎为零。
自 Node.js 22 起，Node.js 官方将 SQLite 以内置模块 node:sqlite 的形式引入标准库（24 版本起趋于稳定），提供 DatabaseSync 同步 API：prepare() 预编译 SQL 语句并以参数占位符（?）绑定执行，从根本上杜绝 SQL 注入；exec() 执行建表等多语句脚本。本系统即基于 node:sqlite 实现数据层，配合 WAL（Write-Ahead Logging）日志模式与外键约束开启，兼顾性能与数据完整性。
2.4 原生 JavaScript 单页应用（SPA）
单页应用（Single-Page Application）在首次加载后不再整页刷新，而是由 JavaScript 在客户端切换视图、局部更新 DOM。相较于引入 React、Vue 等框架，本系统选择原生 JavaScript（Vanilla JS）实现 SPA：视图函数直接生成 HTML 字符串并赋值给容器 innerHTML，配合事件委托处理交互。这一选择基于三点考虑：其一，教学与论文场景下代码完全透明，没有构建工具与语法糖的"黑盒"；其二，应用规模可控，无需框架的状态管理开销；其三，零构建、零依赖，任何静态服务器均可直接运行，便于部署与离线演示。SPA 通过 hash 或应用内路由函数维护视图状态，登录令牌持久化于 localStorage，刷新页面后可自动恢复会话。
2.5 Web Speech API：语音识别与语音合成
Web Speech API 是 W3C 制定的浏览器语音能力规范，包含两个独立接口：SpeechSynthesis（TTS，语音合成）与 SpeechRecognition（ASR，语音识别）。TTS 侧通过构造 SpeechSynthesisUtterance 对象指定朗读文本、语言（lang）与语速（rate）即可调用系统语音引擎朗读，本系统以 0.92 的语速朗读听力文本与口语目标句，为日语、韩语学习者提供"磨耳朵"材料。ASR 侧通过实例化 SpeechRecognition 对象，设置识别语言、关闭中间结果（interimResults = false）并限定单个候选（maxAlternatives = 1），即可获取用户跟读的识别文本；当浏览器不支持 ASR 时，系统降级为学习者自评，保证功能可用性。这一"浏览器原生语音 + 服务端零成本"的方案是本系统口语模块的特色。
在工程实践中使用 Web Speech API 需要注意三点：其一，语音识别依赖浏览器实现（Chrome/Edge 内置服务），且通常要求页面处于安全上下文（HTTPS 或 localhost）并需要用户授权麦克风权限，本系统在点击麦克风按钮时才实例化识别对象，将授权动作收敛在用户主动交互之后，体验更自然；其二，识别过程可能因网络或权限失败，系统以 6 秒定时器兜底结束识别，并在异常时提示重试或转为自评；其三，语音合成在不同操作系统中音色与音质有所差异，但朗读国际音标拼读的单词与常用句不存在兼容性障碍，日语与韩语在系统装有对应语言语音包时效果最佳。系统对上述差异均做了能力探测与降级处理，保证在能力不足的浏览器中核心学习流程依然可用。
2.6 间隔重复记忆理论与莱特纳记忆盒
德国心理学家艾宾浩斯（Hermann Ebbinghaus）于 1885 年通过实验揭示了遗忘曲线：记忆随时间呈指数衰减，而适时的复习可显著减缓遗忘。在此基础上，奥地利学者塞巴斯蒂安·莱特纳（Sebastian Leitner）于 1972 年提出莱特纳记忆盒（Leitner Box）方法：将卡片分置于若干盒子中，答对则卡片晋升到更高盒子（复习间隔随之拉长），答错则退回第一个盒子。该方法以极低的实现成本刻画了"间隔重复 + 提取练习"的学习科学原理。
本系统将词汇闪卡与四盒莱特纳模型结合：学习者对每张卡片反馈"认识/模糊/不认识"，认识则盒子号加一（上限为 4），不认识则重置为 1，模糊保持不变；盒子达到 4 即视为该课程词汇掌握。盒子号作为学习进度持久化存储于数据库，课程列表页以圆点直观展示复习状态。
2.7 游戏化学习理论
游戏化（Gamification）指将游戏元素与机制应用于非游戏场景。Deterding 等人的研究指出，积分、徽章、排行榜（PBL 三要素）与进度可视化能有效提升学习动机与持续参与度。语言学习是典型的"长周期、弱反馈"任务，游戏化激励可将其转化为"短周期、强反馈"的行为循环。本系统围绕这一理论构建了完整的激励闭环：以 XP 记录学习行为，以 9 级阈值刻画成长，以 13 枚成就徽章标记里程碑，以连续学习天数（streak）与每日 XP 目标培养学习习惯，以 XP 排行榜引入社会比较。
2.8 本章小结
本章介绍了系统开发所依托的技术与理论：B/S 架构与前后端分离确立总体形态，Node.js/Express/SQLite 构成技术栈，原生 SPA 保证零依赖与可读性，Web Speech API 支撑语音能力，莱特纳记忆盒与游戏化学习理论为学习机制设计提供依据。这些技术与理论的组合，为后续章节的系统设计与实现奠定了基础。
第 3 章 系统需求分析
3.1 可行性分析
技术可行性 。Node.js 24 内置 node:sqlite，无需安装数据库服务即可获得完整关系型数据库能力；Express 生态成熟稳定；Web Speech API 在桌面版与 Android 版 Chrome/Edge 中均已可用。全部技术组件均为免费开源或浏览器原生能力，无版权与费用风险。
经济可行性。系统采用零成本技术栈：Node.js 与 SQLite 均为开源软件，语音能力复用浏览器与操作系统自带的引擎，不依赖任何付费云服务；开发期以个人计算机作为服务器即可运行。部署一台入门级云主机即可对外提供服务，运维成本极低。
操作可行性。系统为 B/S 架构，用户无需安装任何客户端；界面遵循移动优先设计，底部导航与卡片式布局符合大众使用习惯；演示账号一键登录，新用户三步完成注册与学习偏好设置。
3.2 系统角色与总体用例
系统包含单一角色------注册学习者（含演示账号），管理员能力（如题库维护）暂以数据库直接操作替代，属于后续扩展项。学习者与系统的交互可归纳为四组用例：
- 账号与偏好：注册、登录、退出登录、设置学习偏好（目标语言、级别、学习目的、每日 XP 目标）。
- 学习：浏览分级课程、进入具体课程完成词汇闪卡/语法练习/听力训练/口语跟读、查看学习进度统计、获取个性化推荐。
- 激励：获取 XP 与升级、解锁成就、维持连续学习天数、达成每日目标、查看 XP 排行榜。
- 社区：发布帖子、点赞帖子、评论帖子。
为明确系统行为边界，选取三个关键用例给出用例描述，如表 3-1 至表 3-3 所示。
表 3-1 用例描述：完成一次口语跟读练习
| 项目 | 说明 |
|---|---|
| 用例名称 | 口语跟读练习 |
| 参与者 | 注册学习者 |
| 前置条件 | 已登录，已选定课程单元 |
| 基本流程 | ① 学习者进入口语单元，查看目标句与提示；② 点击"示范朗读"由 TTS 播报目标句；③ 点击麦克风开始跟读，浏览器采集语音并识别（限时 6 秒）；④ 系统以 LCS 相似度计算得分并上报服务端；⑤ 服务端计 XP、更新最佳成绩、判定成就并返回；⑥ 前端展示得分、XP 与可能的新成就 |
| 备选流程 | 3a. 浏览器不支持语音识别：切换为自评模式，学习者按 0---100 自评后走 ④---⑥ |
| 后置条件 | 进度表 best_score/attempts 更新，xp_events 追加流水 |
表 3-2 用例描述：查看个性化推荐
| 项目 | 说明 |
|---|---|
| 用例名称 | 获取个性化学习路径 |
| 参与者 | 注册学习者 |
| 前置条件 | 已登录 |
| 基本流程 | ① 学习者进入学习首页；② 前端请求 /api/recommend；③ 服务端依据偏好锁定主修课程；④ 对 4 个单元计算薄弱度得分并排序取前 4；⑤ 前端以推荐卡片展示，含推荐理由与"继续上次学习"入口 |
| 备选流程 | 3a. 用户未设置偏好：按英语最低级课程兜底推荐 |
| 后置条件 | 无数据变更（只读用例） |
表 3-3 用例描述：发布社区帖子
| 项目 | 说明 |
|---|---|
| 用例名称 | 发布帖子 |
| 参与者 | 注册学习者 |
| 前置条件 | 已登录 |
| 基本流程 | ① 学习者在社区页点击发布；② 填写标题与正文；③ 前端调用发帖接口；④ 服务端校验非空后入库并触发成就判定；⑤ 列表刷新展示新帖；⑥ 首次发帖弹出"社交蝴蝶"成就提示 |
| 备选流程 | 2a. 标题或正文为空：服务端返回 400，前端提示"标题和内容不能为空" |
| 后置条件 | posts 表新增记录，统计数随之更新 |
3.3 功能需求分析
3.3.1 用户认证与偏好设置
系统须支持用户名 + 密码注册。用户名规则为 3---20 位字母、数字或下划线，密码不少于 6 位，用户名全局唯一。密码不得明文存储，须加盐哈希。登录成功后颁发会话令牌，有效期 7 天；退出登录后令牌立即失效；令牌过期后接口返回 401 并提示重新登录。注册成功的用户须完成"引导设置"：选择目标语言（英/日/韩）、对应级别与学习目的（旅行、工作、考试、兴趣），并设定每日 XP 目标（10---200）。偏好将直接驱动课程中心默认筛选与个性化推荐。
3.3.2 分级课程体系
平台须提供英、日、韩三种语言的分级课程：英语对标 CEFR 的 A1/A2/B1，日语对标 JLPT 的 N5/N4/N3，韩语对标 TOPIK 的 1/2/3 级，共 9 门课程。每门课程包含 4 个模块的学习单元：词汇闪卡（8 个词/课）、语法练习（5 题/课）、听力训练（4 题/课）、口语跟读（3 句/课），全网共 72 条词汇、45 道语法题、36 道听力题、27 句口语跟读句。课程中心须按语言筛选展示课程与各模块的进度状态（练习次数、完成情况、词汇记忆盒）。所有内容存储于数据库，由接口按需下发。
3.3.3 互动式学习模块
（1）词汇闪卡：以卡片形式展示词条、读音、释义与例句，学习者反馈"认识/模糊/不认识"三档；系统按莱特纳盒规则推进记忆盒，并按反馈计 XP（认识 +2、模糊 +1、不认识 +0）。
（2）语法练习：四选一单选题，即时判定正误并展示解析；答对计 3 XP。题目覆盖各等级核心语法点，如 A1 的 be 动词与一般现在时、A2 的过去时与条件句、B1 的将来完成时与倒装等。
（3）听力训练：系统朗读目标语言短句（TTS），学习者根据所听内容回答四选一理解题；答对计 4 XP。题目考察数字、地点、意图等关键信息捕捉能力。
（4）口语跟读：展示目标句与提示，学习者点击麦克风跟读；浏览器支持语音识别时自动录音识别（单次识别限时 6 秒），以 LCS 相似度打分（0---100 分）；浏览器不支持时降级为自评。得分 ≥80 计 8 XP，≥50 计 5 XP，参与即计 2 XP。
3.3.4 学习进度追踪
系统须记录学习者对每个"课程---模块"单元的练习状态，包括练习次数、最佳得分、完成标记、词汇记忆盒与最近练习时间。统计页须展示：累计 XP、当前等级、连续学习天数、今日 XP 与每日目标的进度条、近 7 天 XP 柱状统计，以及四类模块的覆盖与完成情况。所有统计均来自服务端真实数据，刷新不丢失。
3.3.5 个性化学习路径推荐
系统须依据学习者的目标语言与级别定位主修课程，再依据各单元的薄弱程度（未完成的语法/听力单元、低记忆盒词汇、低分口语）排序，向学习者推荐"下一步最值得练"的 4 个单元，并说明推荐理由；同时展示最近学习的单元以便续学。
3.3.6 社区交流与成就激励
社区须支持发布帖子（标题 + 正文）、按时间倒序浏览、点赞/取消点赞与评论，帖子须显示点赞数、评论数与作者。成就系统内置 13 枚徽章，覆盖首次学习、连续 3/7 天、单日 50 XP、累计 100/500 XP、等级 3/5、词汇盒满、语法 10 题、听力 10 题、口语 80 分与首次发帖等里程碑，达成时立即解锁并提示。排行榜展示 XP 前 20 名学习者，并标记当前用户。
3.4 非功能需求分析
（1）安全性：密码加盐哈希存储（scrypt），登录校验使用恒时比较防时序攻击；全部接口鉴权；SQL 一律使用参数化查询防注入；错误信息不泄露内部细节。
（2）性能：SQLite 配合 WAL 模式与索引可满足单机数百并发读；前端 SPA 局部刷新，接口响应体量小；语音能力复用浏览器原生引擎，不占用服务器资源。
（3）易用性与移动适配：界面文案全部中文化；移动端提供底部 Tab 导航，主要触控目标不小于 44px；适配刘海屏安全区（viewport-fit=cover）；支持添加到主屏幕（Web App Manifest）。
（4）可维护性与可扩展性：分层清晰（路由/业务/数据/前端视图）；课程内容全部数据化，新增课程仅需向种子数据添加条目；XP 规则与成就定义集中于服务端常量区，修改成本小。
（5）兼容性：支持 Chrome、Edge 等现代浏览器；语音识别在不支持的浏览器中优雅降级为自评，不阻断学习流程。
3.5 本章小结
本章从可行性出发，明确了系统的角色与四组核心用例，对六大功能需求（认证偏好、分级课程、互动学习、进度追踪、个性化推荐、社区与成就）与五类非功能需求进行了规格化描述，为系统设计提供了明确依据。
第 4 章 系统设计
4.1 系统总体架构设计
系统采用 B/S 架构下的前后端分离三层结构，自上而下为：
- 表现层（web/） ：原生 JavaScript 单页应用，负责视图渲染、路由切换、语音调用与状态保持，通过 fetch 调用
/api接口；静态资源由 Express 直接托管，与后端同源部署。 - 业务层（server/index.js） ：Express 应用，按"认证 → 业务路由 → 计分引擎 → 静态托管 → 兜底 404/500"组织中间件管道；鉴权中间件
authRequired统一校验 Bearer 令牌；全部 XP 计算与成就判定收敛于服务端，杜绝前端伪造。 - 数据层（server/db.js） ：基于
node:sqlite的DatabaseSync，单文件数据库linguaverse.db，开启 WAL 与外键；首次启动时自动建表并执行内容播种（seed），保证零配置启动。
一次典型请求的流程为：浏览器携带令牌请求接口 → 鉴权中间件查 sessions 表校验 → 路由处理业务 → SQL 参数化读写数据 → 返回 JSON → 前端局部更新视图。
4.2 数据库设计
4.2.1 概念设计（E-R 概述）
系统的核心实体包括：用户、会话、课程、课程单元（lesson）、四类学习内容（词汇/语法/听力/口语）、学习进度、XP 事件、用户成就、帖子、点赞与评论。主要联系为：用户 1---n 会话；课程 1---n 单元；单元 1---n 各类内容；用户与单元通过"进度"建立 n---m 联系（并附加练习属性）；用户与单元、模块的每次有效学习行为产生一条 XP 事件；用户与成就为 n---m 联系（附解锁时间）；用户与帖子、评论为 1---n；用户与帖子的点赞为 n---m。
4.2.2 逻辑设计（数据表）
数据库共 14 张表，如表 4-1 所示。
表 4-1 数据表清单
| 序号 | 表名 | 用途 | 关键字段 |
|---|---|---|---|
| 1 | users | 用户主表 | username（唯一）、password_hash、nickname、target_language、level_code、goal、daily_goal_xp、onboarded、xp_total |
| 2 | sessions | 会话令牌 | token（主键）、user_id、expires_at |
| 3 | courses | 课程 | language、level_code、level_name、description、order_idx |
| 4 | lessons | 课程单元 | course_id、module、title，UNIQUE(course_id, module) |
| 5 | vocab_items | 词汇条目 | lesson_id、term、reading、meaning、example |
| 6 | grammar_items | 语法题 | lesson_id、prompt、options(JSON)、answer_idx、explanation |
| 7 | listening_items | 听力题 | lesson_id、text、question、options(JSON)、answer_idx |
| 8 | speaking_items | 口语条目 | lesson_id、prompt、target_text、hint |
| 9 | progress | 学习进度 | UNIQUE(user_id, lesson_id, module)、box、best_score、attempts、completed、last_at |
| 10 | xp_events | XP 事件流水 | user_id、date、module、xp，索引(user_id, date) |
| 11 | user_achievements | 成就解锁记录 | PRIMARY KEY(user_id, code)、unlocked_at |
| 12 | posts | 社区帖子 | user_id、title、content、created_at |
| 13 | post_likes | 点赞 | PRIMARY KEY(post_id, user_id) |
| 14 | comments | 评论 | post_id、user_id、content、created_at |
设计要点说明如下：
- 进度表以三元组唯一约束（user_id, lesson_id, module）承载"一名学习者对一个单元"的全部练习状态，upsert 写入保证幂等。
- XP 事件表是流水而非余额 ：用户表另存
xp_total冗余总量以便排序，事件流水支撑"近 7 天统计""今日 XP""连续天数"等时间维度查询，模块维度则支撑成就判定。 - 选项类字段以 JSON 文本存储（options），读取时解析为数组，兼顾关系型存储与结构灵活性。
- 索引设计：为 xp_events(user_id, date)、progress(user_id)、lessons(course_id) 建立索引，覆盖 streak、每日 XP、课程查询等高频路径。
4.3 RESTful API 接口设计
接口统一以 /api 为前缀，除注册/登录外均需 Bearer Token 鉴权。接口清单如表 4-2 所示。
表 4-2 API 接口清单
| 方法 | 路径 | 功能 | 鉴权 |
|---|---|---|---|
| POST | /api/auth/register | 注册（校验用户名/密码，返回令牌与用户） | 否 |
| POST | /api/auth/login | 登录（scrypt 校验，颁发令牌） | 否 |
| POST | /api/auth/logout | 退出（删除会话） | 是 |
| GET | /api/auth/me | 当前用户信息与已解锁成就 | 是 |
| PUT | /api/users/preferences | 设置学习偏好并标记引导完成 | 是 |
| GET | /api/courses?language=xx | 课程列表（含每单元进度） | 是 |
| GET | /api/lessons/:id/content | 单元内容与进度（按模块返回对应条目） | 是 |
| POST | /api/progress/activity | 上报学习行为，服务端计 XP、更新进度、判成就 | 是 |
| GET | /api/progress | 进度明细、近 7 天 XP、模块统计与摘要 | 是 |
| GET | /api/recommend | 个性化推荐（主修课程 + 4 个薄弱单元） | 是 |
| GET | /api/community/posts | 帖子列表（含点赞/评论数、是否已赞） | 是 |
| POST | /api/community/posts | 发布帖子 | 是 |
| POST | /api/community/posts/:id/like | 点赞/取消点赞（切换） | 是 |
| GET | /api/community/posts/:id/comments | 评论列表 | 是 |
| POST | /api/community/posts/:id/comments | 发表评论 | 是 |
| GET | /api/leaderboard | XP 排行榜前 20（标记当前用户） | 是 |
| GET | /api/achievements | 全部成就及解锁状态 | 是 |
错误响应统一为 { "error": "中文提示" }，并使用恰当的 HTTP 状态码（400 参数错误、401 未登录/过期、404 不存在、409 冲突、500 内部错误）。
4.4 核心功能模块设计
4.4.1 认证与会话模块
采用"无状态令牌 + 服务端会话表"方案：登录成功生成 32 字节随机十六进制令牌存入 sessions 表并设 7 天有效期；鉴权中间件按令牌联查用户表；过期令牌即删即返 401。相比 JWT 免去了签名与刷新逻辑，且支持服务端主动注销。
4.4.2 XP 计分引擎设计
计分引擎是全系统的中枢，设计原则为规则集中、服务端裁决、行为可追溯。XP 规则如表 4-3 所示。
表 4-3 XP 计分规则
| 模块 | 行为 | XP |
|---|---|---|
| 词汇闪卡 | 反馈"认识" | +2 |
| 词汇闪卡 | 反馈"模糊" | +1 |
| 词汇闪卡 | 反馈"不认识" | +0 |
| 语法练习 | 答对 | +3 |
| 听力训练 | 答对 | +4 |
| 口语跟读 | 得分 ≥ 80 | +8 |
| 口语跟读 | 得分 50---79 | +5 |
| 口语跟读 | 参与即奖 | +2 |
| 任意模块 | 首次学习某门课程 | +10（bonus） |
等级体系设 9 级，阈值依次为 0/100/250/500/800/1200/1700/2300/3000 XP。成就判定所需的基础数据（XP 总量、连续天数、今日 XP、词汇盒、口语最高分、发帖数）均在判定时实时查询，13 条判定条件集中定义于一张条件表内，新增成就仅需扩展该表。
4.4.3 莱特纳记忆盒设计
词汇模块的进度以 box 字段（1---4）表达：反馈"认识"时 box 上移一档（上限 4），"不认识"时重置为 1，"模糊"时保持；box 达到 4 视为该课程词汇掌握（completed=1）。课程列表以四个圆点展示盒位，学习者可直观看到复习进度。
4.4.4 个性化推荐算法设计
推荐分两步：第一步依据偏好锁定主修课程（语言匹配 + 级别匹配，缺省取该语言最低级课程）；第二步对该课程的 4 个单元计算"薄弱度"得分 weak：
- 词汇：
weak = (4 − box)，盒子越低越薄弱； - 口语：
weak = (100 − best_score)，分数越低越薄弱； - 语法/听力：未完成记 1，已完成记 0；
- 再叠加模块先验权重系数：语法 +0.1、听力 +0.2、口语 +0.3、词汇 +0，体现"输出型技能优先补强"的导向。
按 weak 降序取前 4 个单元生成推荐路径，并为每条推荐生成中文推荐理由；同时返回最近学习的单元供"继续上次"快速入口。该算法简单、可解释、零训练成本，符合本文平台的定位。
4.4.5 口语评分算法设计
口语跟读的自动化评分采用"识别文本 vs 目标文本"的最长公共子序列（LCS）相似度：两侧文本先归一化（转小写、去除标点、符号与空白），再以动态规划求 LCS 长度，评分公式为：
得分 = round( LCS(跟读文本, 目标文本) / 目标文本归一化长度 × 100 )
该公式以目标文本长度为基准，既容忍识别带来的词序微调，又对漏读、错读敏感。识别结果为空或浏览器不支持 ASR 时降级为学习者自评，保证流程不断。
下面以一个具体算例说明评分过程。设口语单元的目标句为 "Hello, my name is Li Hua."，归一化后为 "hellomynameislihua"（18 个字符）。若学习者的跟读被识别为 "Hello, my name is Li Hua!"，归一化后与目标完全一致，LCS 长度为 18，得分 = round(18 / 18 × 100) = 100，按规则计 8 XP 并标记完成；若识别为 "Hello, my name is Li"（漏读姓名后缀），归一化长度 16，LCS 长度 16，得分 = round(16 / 18 × 100) = 89，同样计 8 XP；若识别为 "Hello, my friend"，LCS 长度为 9，得分 = round(9 / 18 × 100) = 50，计 5 XP；若识别结果与目标几乎无关，得分趋近 0，仍按参与计 2 XP。可以看到，该评分对"漏读"敏感、对"标点与大小写差异"免疫，与口语跟读训练的真实目标一致。
4.5 移动端适配设计
移动端适配遵循"移动优先"原则：
- 布局：以手机竖屏为一等公民设计卡片式单列布局，宽屏再向上兼容；学习、统计、课程、社区、排行五类视图共享统一卡片体系。
- 导航：桌面传统顶导航在小屏上易误触，故采用固定底部 Tab 导航（学习/统计/课程/社区/排行），高度以 CSS 变量统一管理。
- 触控 ：全部可点击目标最小尺寸不小于 44px（以
max(44px, var(--tabbar-h))等方式约束），按钮间距预留防误触。 - 安全区 ：设置
viewport-fit=cover，底部导航以env(safe-area-inset-bottom)补偿刘海屏/全面屏手势条遮挡。 - PWA 基础 ：提供
manifest.webmanifest与应用图标，支持"添加到主屏幕"以类原生应用方式启动；浏览器主题色（theme-color）随当前学习语言动态切换，强化沉浸感。 - 语音兼容：移动端 Chrome 支持 ASR/TTS，iOS Safari 支持 TTS；ASR 不可用时自动降级自评。
4.6 安全性设计
- 口令安全 ：注册时生成 16 字节随机盐，以 scrypt（N 默认参数、输出 64 字节）派生哈希，存储格式为
salt:hash；校验时使用crypto.timingSafeEqual恒时比较，抵御时序侧信道攻击。 - 会话安全 ：令牌由
crypto.randomBytes(32)生成（256 位熵），仅存储于服务器端数据库；前端置于 localStorage 并以 Bearer 头传输；7 天过期；登出即删。 - SQL 注入防护 ：全部查询使用
prepare()+ 占位符绑定，无任何字符串拼接 SQL。 - 越权防护：进度、推荐、社区等接口一律以令牌解析出的 user_id 为准，不信任请求体中的用户标识。
- 输入校验：用户名/密码规则、语言---级别匹配、目标枚举、XP 目标范围、口语文本长度、标题内容非空等均在服务端复验。
- 错误处理：兜底中间件统一返回"服务器内部错误"，日志仅打印服务端，不向前端泄露堆栈。
4.7 本章小结
本章完成了系统的总体设计：三层架构明确了职责划分；14 张表构成的数据模式兼顾规范性与查询效率；17 个接口覆盖全部业务；计分引擎、莱特纳盒、推荐算法与 LCS 评分四大核心机制给出了可解释的规则设计；移动端与安全性设计贯穿全局。这些设计在下一章的实现中全部落地。
第 5 章 系统实现
5.1 开发与运行环境
系统开发与运行环境如表 5-1 所示。
表 5-1 开发与运行环境
| 类别 | 内容 |
|---|---|
| 操作系统 | Windows |
| 运行时 | Node.js 24（内置 node:sqlite、node:crypto） |
| Web 框架 | Express 4 |
| 数据库 | SQLite（单文件 linguaverse.db，WAL 模式） |
| 前端 | 原生 HTML5 / CSS3 / JavaScript（ES2022），无框架、无构建 |
| 语音 | Web Speech API（SpeechSynthesis / SpeechRecognition） |
| 服务端口 | http://localhost:3000 |
项目目录结构如下：
text
linguaverse/
├── server/ # 后端
│ ├── index.js # Express 入口：路由、计分引擎、成就
│ ├── db.js # 数据库层：建表与连接
│ ├── seed.js # 课程内容与演示数据播种
│ └── linguaverse.db # SQLite 数据库文件（运行时生成）
├── web/ # 前端 SPA
│ ├── index.html
│ ├── css/styles.css # 移动优先样式
│ ├── js/app.js # 视图与逻辑
│ ├── manifest.webmanifest
│ └── icons/
├── docs/ # 本论文文档
└── README.md5.2 数据库层与数据播种实现
数据库层在 db.js 中实现。DatabaseSync 打开（不存在则创建）单文件数据库，随后以 exec() 执行幂等建表脚本（CREATE TABLE IF NOT EXISTS），并开启 WAL 与外键约束：
js
const { DatabaseSync } = require('node:sqlite');
const db = new DatabaseSync(DB_PATH);
db.exec('PRAGMA journal_mode = WAL;');
db.exec('PRAGMA foreign_keys = ON;');内容播种在 seed.js 中实现。9 门课程的词汇、语法、听力、口语全部以字面量数据组织，播种程序按"课程 → 单元 → 条目"的层级批量插入，选项数组以 JSON.stringify 入库；isEmpty() 检测 courses 表为空时才执行，保证幂等。演示数据部分创建演示账号 demo（密码 demo123），为其生成 7 天连续的 XP 事件流水（累计 426 XP、10 枚成就）与 4 条社区种子帖，使系统开箱即可演示排行榜、统计图与社区等数据驱动界面。密码播种与运行时注册共用同一 scrypt 哈希函数，保证一致性。
5.3 用户认证与会话管理实现
密码哈希采用 scrypt，实现如下：
js
function hashPassword(password) {
const salt = crypto.randomBytes(16).toString('hex');
const hash = crypto.scryptSync(password, salt, 64).toString('hex');
return `${salt}:${hash}`;
}
function verifyPassword(password, stored) {
const [salt, hash] = String(stored).split(':');
const candidate = crypto.scryptSync(password, salt, 64);
const expected = Buffer.from(hash, 'hex');
return candidate.length === expected.length &&
crypto.timingSafeEqual(candidate, expected);
}登录成功后 createSession() 生成 256 位随机令牌，连同 7 天后的过期时间写入 sessions 表。鉴权中间件 authRequired 以令牌联查用户，过期即删并返回 401，校验通过后将用户挂载到 req.user 供后续路由使用。注册接口对用户名格式（/^[a-zA-Z0-9_]{3,20}$/）、密码长度、用户名唯一性进行校验，分别返回 400/409。
5.4 课程与学习内容接口实现
GET /api/courses 按 language 查询课程并附上当前用户在每个单元的进度（无记录则以默认值 {box:1, best_score:0, attempts:0, completed:0} 填充），前端据此渲染"继续/开始"按钮与词汇盒圆点。GET /api/lessons/:id/content 依据 lesson 的 module 字段路由到对应内容表查询，语法与听力的 options 字段以 JSON.parse 还原为数组后随条目下发；响应同时携带课程元信息与进度，前端一次请求即可渲染完整练习视图。
5.5 四类互动学习模块实现
词汇闪卡 ：前端卡片正反切换展示词条信息，学习者三档反馈后调用 POST /api/progress/activity 上报 {lessonId, module:'vocab', result:{known}}。服务端按莱特纳规则更新 box：认识 min(4, cur+1)、不认识重置 1、模糊不变，box≥4 置 completed。
语法练习 ：前端渲染四选项按钮，选择后本地判分并即时展示对错与解析，随后上报 result.correct，服务端答对计 3 XP。
听力训练 ：调用 speechSynthesis 朗读题目文本（语速 0.92、语言随课程切换），播放后作答：
js
function speak(text, lang) {
const u = new SpeechSynthesisUtterance(text);
u.lang = LANGS[lang].tts; // en-US / ja-JP / ko-KR
u.rate = 0.92;
speechSynthesis.speak(u);
}口语跟读 ：点击麦克风启动 SpeechRecognition，设置识别语言、interimResults=false、maxAlternatives=1，并以 6 秒定时器兜底结束识别；识别回调中执行 LCS 相似度评分：
js
const normText = (s) => String(s || '').toLowerCase()
.replace(/[\p{P}\p{S}\s]+/gu, '');
function lcsLen(a, b) { /* 动态规划求最长公共子序列长度 */ }
const similarity = (said, target) => {
const t = normText(target);
return Math.round((lcsLen(normText(said), t) / t.length) * 100);
};评分上报后，服务端按 ≥80 / ≥50 / 其他三档计 8/5/2 XP 并记录 best_score。当浏览器不支持 ASR（如 iOS Safari）时，界面自动切换为自评滑条，保证流程可用。
5.6 服务端计分引擎与成长体系实现
POST /api/progress/activity 是计分引擎的唯一下口。其处理流程为：参数校验 → 按模块计算 XP 与进度变更 → 进度 upsert → 写入 XP 事件流水 → 累加 xp_total → 首学课程 bonus 判定 → 成就判定 → 返回完整结果。进度 upsert 采用 SQLite 的 ON CONFLICT ... DO UPDATE 原子写入：
sql
INSERT INTO progress (user_id, lesson_id, module, box, best_score,
attempts, completed)
VALUES (?,?,?,?,?,1,?)
ON CONFLICT(user_id, lesson_id, module) DO UPDATE SET
box=COALESCE(?, box),
best_score=MAX(COALESCE(?, 0), best_score),
attempts=attempts+1,
completed=MAX(completed, excluded.completed),
last_at=datetime('now','localtime')该写法将"插入或更新"收敛为一条原子语句，避免并发下的竞态。XP 侧，基础 XP 与首学 bonus 分别写入 xp_events（bonus 的 module 记为 bonus 以便统计区分），并同步累加 users.xp_total。等级函数 levelOf() 以阈值数组线性扫描实现，升级判定通过前后两次 levelOf 结果比较得出，随响应返回 levelUp 标记供前端弹出升级提示。
连续学习天数 streakOf() 的实现从今天（或昨天，容许隔夜学习）起逐日回溯检查 xp_events 中是否存在记录，首个断档处停止计数。成就判定 checkAchievements() 以 13 个条件表达式逐一求值，INSERT OR IGNORE 保证幂等，changes>0 的条目即本次新解锁，随响应返回 newAchievements 供前端即时弹出徽章动画。
5.7 个性化学习路径推荐实现
GET /api/recommend 按第 4.4.4 节的算法实现：先以偏好定位主修课程，再对 4 个单元计算 weak 得分并降序取前 4：
js
const weak = (l.module === 'vocab' ? (4 - p.box)
: l.module === 'speaking' ? (100 - p.best_score)
: (p.completed ? 0 : 1)) + weakness[l.module] * 0.1;每条推荐附带可读的中文理由（如"按莱特纳记忆盒排序，优先巩固低盒子词汇"），响应还包含 lastStudied 字段供前端渲染"继续上次学习"入口。前端在学习页顶部以卡片轮播形式展示推荐路径，点击直达对应单元。
5.8 社区交流与成就系统实现
社区接口围绕 posts/post_likes/comments 三表实现。帖子列表以相关子查询统计点赞数与评论数，并以 EXISTS 判断当前用户是否已赞（驱动前端的点赞态样式）；点赞接口对同一 (post, user) 做"有则删、无则插"的切换语义，天然防止重复点赞。发帖成功后同样触发 checkAchievements()，首次发帖即解锁"社交蝴蝶"徽章。排行榜接口按 xp_total 降序取前 20，isMe 字段供前端高亮当前用户行。
5.9 前端单页应用实现
前端为单文件 app.js（约千行级原生 JS）与 styles.css。核心结构包括：
- API 封装 ：
api()函数统一拼接 baseURL、注入 Bearer 头、解析 JSON 与抛出错误；令牌存于 localStorage，应用启动时以GET /api/auth/me静默恢复会话。 - 视图函数 ：登录/注册、引导设置、学习首页（推荐 + 每日目标 + 续学）、统计、课程中心、四类练习器、社区、排行榜、成就墙各自封装为视图函数，以
innerHTML渲染卡片化 UI。 - 状态管理：模块级 state 对象保存用户、当前课程语言、练习游标等，视图切换即重新渲染，无全局框架依赖。
- 交互反馈：统一 toast 组件展示 XP 获得与成就解锁；XP 以轻量动画增强即时反馈。
- 演示入口：登录页提供"一键体验"按钮，直接以 demo/demo123 登录，便于评审与测试。
各视图的职责划分如表 5-2 所示，视图之间仅通过 state 对象与 API 层耦合，单个视图的修改不会波及其他视图。
表 5-2 前端视图职责一览
| 视图 | 主要职责 | 调用的接口 |
|---|---|---|
| 登录/注册 | 账号表单、校验提示、一键体验 | /auth/register、/auth/login |
| 引导设置 | 选择语言/级别/目的/每日目标 | /users/preferences、/auth/me |
| 学习首页 | 推荐卡片、每日目标进度、续学入口、语言主题色 | /recommend、/auth/me |
| 课程中心 | 语言筛选、课程与模块列表、词汇盒展示 | /courses?language= |
| 词汇练习 | 闪卡翻面、三档反馈 | /lessons/:id/content、/progress/activity |
| 语法/听力练习 | 选项作答、解析展示、TTS 播报 | 同上 |
| 口语练习 | 麦克风采集、LCS 评分、自评兜底 | 同上 |
| 统计页 | 7 日 XP 柱图、模块统计、等级与 streak | /progress |
| 社区 | 帖子流、发帖、点赞、评论 | /community/* |
| 排行榜 | XP 前 20、高亮当前用户 | /leaderboard |
| 成就墙 | 13 枚徽章的解锁状态 | /achievements、/auth/me |
5.10 移动端适配实现
样式层以 CSS 自定义属性建立设计令牌（颜色、圆角、Tab 高度等）。底部导航固定于视口底部，其高度由 --tabbar-h 统一管理，并叠加安全区补偿：
css
:root { --tabbar-h: 60px; }
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0;
height: max(44px, var(--tabbar-h));
padding-bottom: env(safe-area-inset-bottom);
}页面根元素设置 viewport-fit=cover，主体容器以 padding-bottom 预留导航高度，防止内容被遮挡。全部按钮、Tab、卡片行的最小可点击尺寸不小于 44px；字体与间距在小屏优先定义、大屏通过媒体查询放大。manifest.webmanifest 声明应用名、图标与主题色；主题色值随学习语言切换（英语为品牌蓝、日语为樱粉、韩语为青绿），在支持 theme-color 的移动浏览器上带来沉浸式观感。经验证，平台在手机尺寸视口下布局无横向滚动、无遮挡、触控准确。
5.11 本章小结
本章按模块详述了系统实现：数据库层以零配置的单文件 SQLite 支撑全部业务；认证模块以 scrypt 与随机令牌实现安全会话；四类学习模块落地了莱特纳盒与 LCS 评分算法；计分引擎以原子 upsert 与事件流水保证了数据一致性与可追溯性；推荐、社区、成就与排行榜完整闭环；前端 SPA 与移动优先适配保证了流畅一致的跨端体验。实现与第 4 章设计一一对应，未引入超出设计的复杂度。
第 6 章 系统测试
6.1 测试环境与测试方法
测试在与开发一致的本地环境进行：Node.js 24 + SQLite，服务运行于 http://localhost:3000；浏览器采用 Chromium 内核的现代浏览器（Chrome/Edge），并使用浏览器开发者工具的设备模拟（iPhone/Android 尺寸视口）验证移动端布局。测试方法包括：以浏览器自动化执行端到端全流程场景测试、以接口工具直接调用 API 验证异常输入与鉴权、以代码走查核对安全实现。
6.2 功能测试
端到端全流程测试覆盖"注册 → 引导设置 → 学习 → 统计 → 社区 → 排行 → 成就 → 演示账号"共 9 个步骤，全部通过，如表 6-1 所示。
表 6-1 端到端全流程测试用例
| 编号 | 测试项 | 步骤概述 | 预期结果 | 结论 |
|---|---|---|---|---|
| T01 | 用户注册 | 新用户名+合法密码提交 | 注册成功，进入引导设置 | 通过 |
| T02 | 引导设置 | 选择语言/级别/目的/每日目标 | 保存成功，进入学习首页 | 通过 |
| T03 | 词汇闪卡 | 完成"认识/模糊/不认识"反馈 | XP 按档计分，盒点推进正确 | 通过 |
| T04 | 语法练习 | 作答并查看解析 | 即时判分，答对 +3 XP | 通过 |
| T05 | 听力训练 | 播放朗读并作答 | TTS 正常，答对 +4 XP | 通过 |
| T06 | 口语跟读 | 跟读目标句 | 识别成功，LCS 评分与 XP 正确；不支持时自评可用 | 通过 |
| T07 | 进度统计 | 查看统计页 | 7 日 XP、模块统计、streak 与服务端一致 | 通过 |
| T08 | 社区互动 | 发帖、点赞、评论 | 列表即时更新，计数正确 | 通过 |
| T09 | 排行与成就 | 查看 leaderboard 与成就墙 | demo 以 426 XP 榜首；成就解锁状态正确 | 通过 |
功能专项测试如表 6-2 所示。
表 6-2 功能专项测试用例（节选）
| 编号 | 测试项 | 预期结果 | 结论 |
|---|---|---|---|
| T10 | 首学课程 bonus | 每门课程首次有效学习 +10 XP，仅一次 | 通过 |
| T11 | 等级升级 | XP 越过阈值触发 levelUp 提示 | 通过 |
| T12 | 每日目标 | 今日 XP 进度条按目标比例推进，达成有反馈 | 通过 |
| T13 | 连续天数 | demo 账号 streak=7，中断日不计 | 通过 |
| T14 | 推荐路径 | 返回 4 个单元且理由可读，续学入口正确 | 通过 |
| T15 | 退出登录 | 令牌删除，受保护接口返回 401 | 通过 |
| T16 | 会话恢复 | 刷新页面后自动恢复登录态 | 通过 |
| T17 | 重复点赞 | 同一帖子点赞为切换语义，不重复计数 | 通过 |
6.3 接口与异常输入测试
对关键接口的边界输入进行测试，结果如表 6-3 所示。
表 6-3 接口异常输入测试
| 编号 | 用例 | 预期结果 | 结论 |
|---|---|---|---|
| E01 | 注册：用户名含非法字符/过短 | 400，中文提示 | 通过 |
| E02 | 注册：重复用户名 | 409"用户名已被占用" | 通过 |
| E03 | 登录：密码错误 | 401"用户名或密码错误" | 通过 |
| E04 | 偏好：语言与级别不匹配 | 400 | 通过 |
| E05 | 偏好：每日目标越界（<10 或 >200） | 400 | 通过 |
| E06 | 未携带令牌访问受保护接口 | 401"请先登录" | 通过 |
| E07 | 伪造/过期令牌 | 401，过期令牌被删除 | 通过 |
| E08 | progress/activity：非法 module | 400"无效的模块" | 通过 |
| E09 | 口语分数越界（负数/超 100） | 被截断至 0,100 | 通过 |
| E10 | 发帖/评论空内容 | 400"标题和内容不能为空"/"评论不能为空" | 通过 |
| E11 | 访问不存在的帖子 | 404"帖子不存在" | 通过 |
| E12 | 不存在的 API 路径 | 404"接口不存在"（JSON） | 通过 |
6.4 安全性测试
- 密码存储核查 ：数据库中 users.password_hash 均为
salt:hash形式的 scrypt 结果，无明文；同密码不同账号的哈希值不同（随机盐生效）。 - SQL 注入 ：在登录用户名、发帖标题等输入点注入
' OR 1=1 --等载荷，均被当作普通文本处理（参数化查询），无异常。 - 越权测试：以用户 A 的令牌调用进度接口后篡改请求体 user_id，服务端仍以令牌身份处理，无法操作他人数据。
- 会话安全：登出后原令牌再访受保护接口返回 401；伪造令牌返回 401。
6.5 移动端与兼容性测试
以设备模拟器在 375×667（iPhone SE）、390×844（iPhone 12）、412×915（Android）等典型视口下逐页检查：底部 Tab 固定且不遮挡内容；卡片单列布局无横向滚动；按钮触控区域达标；viewport-fit=cover 与安全区补偿在刘海屏模拟下表现正确；"添加到主屏幕"后以独立窗口启动，主题色随语言切换正常。兼容性方面，Chrome/Edge 桌面版功能完整；ASR 不支持的环境下口语模块自动降级为自评，流程不中断。测试全程浏览器控制台无报错。
在性能与稳定性方面进行了如下观察测试：其一，接口响应速度------在本地回环环境下，课程列表、单元内容、进度上报等高频接口的响应均在毫秒级完成，页面切换无感知延迟，这得益于 SQLite 的本地文件读取与参数化语句的预编译复用；其二，数据一致性------连续执行多轮练习后，统计页的累计 XP、7 日柱状图、模块完成数与服务端数据库中的 xp_events 流水逐项核对一致，无重复计数或漏计；其三，幂等与并发------进度表以三元组唯一约束配合 ON CONFLICT 原子写入，重复上报同一行为不会产生脏数据，学习时长统计（attempts）与最佳成绩（best_score）语义稳定；其四，会话持久性------关闭浏览器后重新打开，静默恢复会话正常，7 天内重复访问无需重新登录。上述观察表明系统在目标负载（单机数十名学习者）下具备良好的稳定性。
6.6 测试结论
系统共执行 9 项端到端用例、8 项功能专项用例、12 项接口异常用例以及安全、移动端与兼容性检查，全部通过。核心业务链路（认证---学习---计分---成就---社区）数据一致、反馈即时；安全机制（scrypt 哈希、恒时比较、参数化查询、服务端鉴权）经核查有效；移动端体验符合设计目标。系统达到可交付、可演示、可扩展的状态。
第 7 章 总结与展望
7.1 工作总结
本文围绕"多语种在线语言学习平台"这一课题，完成了从需求分析、系统设计、编码实现到测试验证的完整工程流程，主要成果如下：
- 构建了基于 Node.js 24 + Express + SQLite（node:sqlite）的真实后端，设计并实现 14 张数据表与 17 个 RESTful 接口，覆盖认证、课程、计分、推荐、社区、排行全部业务，刷新与重登后数据不丢失。
- 实现了覆盖英/日/韩三语 9 个等级的分级课程体系与四类互动学习模块，180 条真实学习内容全部入库，词汇模块融入莱特纳记忆盒机制。
- 设计并实现了以 XP 为核心的完整游戏化激励体系：服务端统一计分、9 级成长、13 枚成就、连续天数、每日目标与排行榜。
- 实现了基于 Web Speech API 的浏览器端口语跟读评测（语音识别 + LCS 相似度评分）与语音合成听力训练，零云端成本实现"开口练"。
- 实现了基于薄弱度加权的个性化学习路径推荐算法，推荐结果可解释。
- 以移动优先策略完成全平台移动端适配，包括底部导航、44px 触控标准、安全区补偿与 PWA 基础支持。
- 通过功能、接口、安全与移动端多维度测试，全流程端到端验证通过且控制台零报错。
从工作量看，系统后端包含路由、计分引擎、成就判定与数据播种约千余行 JavaScript 代码，前端包含 11 类视图与语音交互逻辑的 SPA 同为千余行级代码与样式，数据库设计 14 张表，课程内容 180 条全部人工编写并核对语言等级适配性；论文从需求、设计、实现到测试与系统工作一一对应。整个系统从零开始，在无第三方框架依赖（前端）与极少后端依赖（仅 Express）的约束下完成，代码可读性与可维护性经过了测试阶段的实际检验。
7.2 不足与展望
受时间与篇幅所限，系统仍存在改进空间：
- 内容规模：当前每课程内容量满足演示与基础学习，后续可扩充题库并引入教师端内容管理界面。
- 语音评测深度：LCS 相似度是文本层面的近似评估，未来可接入发音准确度评估模型，或引入音素级对齐算法提升评分专业性。
- 推荐算法：当前为规则驱动的可解释推荐，后续可引入协同过滤或基于学习行为序列的模型，并支持跨语言综合推荐。
- 部署与运维：可增加 HTTPS、Nginx 反向代理与进程守护脚本；SQLite 可按需迁移至 PostgreSQL 以支撑多实例部署。
- 测试自动化：可将端到端用例固化为自动化测试脚本并纳入持续集成，保障迭代质量。
- 社交深化：可增加关注、动态、学习小组等功能，进一步发挥社区对学习坚持度的促进作用。
综上，LinguaVerse 以完整的真实后端、科学的学习机制与良好的移动端体验达成了课题目标，并为后续研究与扩展提供了坚实的工程基座。
参考文献
1 教育部. 教育信息化 2.0 行动计划Z. 北京: 中华人民共和国教育部, 2018.
2 萨师煊, 王珊. 数据库系统概论（第 5 版）M. 北京: 高等教育出版社, 2014.
3 张海藩, 牟永敏. 软件工程导论（第 6 版）M. 北京: 清华大学出版社, 2013.
4 Cantelon M, Harter N, Holowaychuk T J, et al. Node.js in Action (Second Edition)M. Shelter Island: Manning Publications, 2017.
5 Brown E. Web Development with Node and Express: Leveraging the JavaScript Stack (2nd Edition)M. Sebastopol: O'Reilly Media, 2019.
6 Owens M, Allen G R. The Definitive Guide to SQLite (2nd Edition)M. New York: Apress, 2010.
7 Fielding R T. Architectural Styles and the Design of Network-based Software ArchitecturesD. Irvine: University of California, Irvine, 2000.
8 Ebbinghaus H. Memory: A Contribution to Experimental PsychologyM. New York: Teachers College, Columbia University, 1913.
9 Leitner S. So lernt man lernen: Der Weg zum ErfolgM. Freiburg: Herder, 1972.
10 Krashen S D. Principles and Practice in Second Language AcquisitionM. Oxford: Pergamon Press, 1982.
11 Deterding S, Dixon D, Khaled R, et al. From game design elements to gamefulness: defining "gamification"C//Proceedings of the 15th International Academic MindTrek Conference. New York: ACM, 2011: 9-15.
12 Roediger H L, Karpicke J D. Test-enhanced learning: taking memory tests improves long-term retentionJ. Psychological Science, 2006, 17(3): 249-255.
13 Council of Europe. Common European Framework of Reference for Languages: Learning, Teaching, AssessmentM. Cambridge: Cambridge University Press, 2001.
14 W3C. Web Speech API SpecificationS/OL. World Wide Web Consortium. https://www.w3.org/TR/speech-api/.
15 OpenJS Foundation. Node.js v24 Documentation: node:sqlite, node:cryptoEB/OL. https://nodejs.org/docs/latest-v24.x/api/.
致 谢
本毕业设计得以完成，首先要衷心感谢我的指导老师。从选题立意、架构取舍到论文撰写，老师始终以严谨的治学态度给予我细致的指导，多次指出我在系统设计与论文规范上的不足，使我受益匪浅。其次感谢大学四年间所有授课老师，是你们构建了我完整的计算机专业知识体系，使独立完成本系统成为可能。
感谢同窗好友在需求讨论与功能试用中提出的宝贵建议，感谢室友们在开发期间的包容与鼓励。特别感谢我的父母，你们无条件的支持是我一路前行的最大底气。
最后，感谢参与评审与答辩的各位老师，恳请批评指正。路虽远，行则将至；事虽难，做则必成。谨以此文，为四年大学时光画上句点，也为未来的学习与工作开启新篇。