# English Vocab **Repository Path**: whpa24soft/English ## Basic Information - **Project Name**: English Vocab - **Description**: English Vocab是面向专升本、大学英语四级、六级学习者的全栈单词练习平台。支持多词库管理、多样化练习模式、错题归集、学习数据统计，配备账号登录权限控制与数据持久化存储。 - **Primary Language**: TypeScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: http://t9768fda.natappfree.cc - **GVP Project**: No ## Statistics - **Stars**: 20 - **Forks**: 0 - **Created**: 2026-06-09 - **Last Updated**: 2026-09-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 英语单词学习系统 ## 一、项目简介 本项目是一套前后端分离的全栈英语词汇学习平台，面向专升本、大学英语四级、六级及英语入门学习者，集成多套标准词库、多样化练习模式、错题管理、学习数据统计等功能，支持账号登录注册，数据持久化存储，同时配置网址可直接使用。 --- ## 二、技术栈 | 层级 | 技术 | |------|------| | 前端框架 | React 19 + TypeScript | | 构建工具 | Vite 6 | | CSS 框架 | Tailwind CSS v4 | | UI 组件 | Radix UI + Lucide Icons | | 路由 | React Router v7 | | 后端框架 | Node.js + Express 4 + TypeScript | | ORM | Prisma 6 | | 数据库 | SQLite（数据持久化，重启/刷新不丢失） | | 认证 | JWT + bcryptjs | | 并发启动 | concurrently | - 本地前端端口：**5173** - 本地后端端口：**3888** - 网址：**[http://ev.liveling.top/](http://42.194.143.31/)** --- ## 三、核心功能模块 ### 1. 账号系统 - 支持用户注册、登录、退出登录 - 完善登录态路由守卫，修复注册后跳转白屏问题，注册成功可正常跳转至首页 - 全局登录权限校验，未登录拦截受限页面访问 - 新用户注册后自动分配专升本、四级、六级三大预置词库 ### 2. 个人中心 - 展示个人学习数据：**总答题数**、**今日答题数**、**答题正确率**等统计信息 - 统计数据全部来自 SQLite 数据库，刷新/重启不丢失 ### 3. 错题本 - 归集全词库错题，支持按词库筛选 - 练习中答错的单词自动收录 - 点击「开始复习」自动跳转练习页，并默认选中错题练习模式 - 其他入口（导航栏/直接访问）不自动勾选，保持默认状态 ### 4. 单词库管理 #### 内置官方标准词库 | 词库 | 单词数 | 说明 | |------|--------|------| | 专升本 | 3,548 | 面向专升本考试，覆盖 A-Z 核心词汇 | | 英语四级 | 2,349 | 四级专属核心词，与专升本去重 | | 英语六级 | 1,264 | 六级学术高阶词，与专升本、四级去重 | | 入门 1000 词 | 1,000 | 英语入门基础词汇，程序自动匹配标准国际音标 | #### 通用功能 - 支持手动新增、删除单词，操作可撤销 - 单词默认 A-Z 排序展示 - 支持关键词搜索、首字母筛选、分页展示（单页最多 30 条） - 支持自定义新建/删除词库 - **全词库已清除词性字段及词性标注，所有页面不再展示词性** ### 5. 练习中心 提供三种练习模式，逻辑区分明确： | 模式 | 说明 | |------|------| | 顺序练习 | 按词库 A-Z 顺序依次出题；自动记忆上次学习进度，再次进入从下一个单词继续；返回配置页自动刷新进度 | | 随机练习 | 随机出题，打乱顺序强化记忆，无进度记忆 | | 错题练习 | 仅调取对应词库错题出题，集中攻克薄弱环节 | - 支持同时选择多个词库 - 可自定义练习题目数量（5 - 100 题，步长 5） - 答题后显示正确率统计和结果回顾 --- ## 四、部署与访问方式 ### 本地访问 ```bash # 安装依赖 npm install && cd server && npm install # 初始化数据库 npx prisma db push && npx prisma generate # 一键启动（推荐） npm run dev:all ``` 启动后访问 `http://localhost:5173`，后端 API 运行在 `http://localhost:3888`。 > 默认提供演示账号：`demo` / 密码 `123456`（内含完整的专升本、四级、六级词库数据） ### 外网访问 项目可通过公网地址直接访问： > 🔗 **[http://ev.liveling.top/](http://42.194.143.31/)** ## 五、项目优化与问题修复 1. 完成前后端联动启动配置（`npm run dev:all`），一键运行项目 2. 修复注册成功后页面白屏、无法自动跳转首页的问题：增加异常捕获、状态同步、路由容错，注册后强刷跳转确保状态一致 3. 优化页面跳转逻辑：返回配置页自动刷新顺序练习进度提示 4. 数据库及前端统一移除所有单词词性数据与展示，练习题选项自动过滤词性标注 5. 入门 1000 词支持外部 TXT 文件导入，程序自动匹配标准国际音标 6. 修复内网穿透域名下资源加载及跨域问题 7. 修复顺序练习进度提示不自动刷新的问题 8. 新用户注册自动从主词库复制完整单词数据，避免词库为空 --- ## 六、运行说明 1. 环境要求：**Node.js** >= 18，**npm** >= 9 2. 启动方式：进入 `server/` 目录执行 `npm run dev:all`（同时启动前后端），或分别启动 3. 注册/登录账号即可进入系统使用全部学习功能 4. 所有数据自动保存至 SQLite 数据库，无需额外配置 ### 可选脚本 ```bash cd server npm run db:studio # 数据库图形化管理界面 npm run dev # 仅启动后端 npm run build # 生产构建 ``` --- ## 七、项目结构 ``` EngLearn/ ├── src/ # 前端源码 │ ├── App.tsx # 路由定义 │ ├── pages/ # 页面组件 │ │ ├── Login.tsx # 登录页 │ │ ├── Register.tsx # 注册页 │ │ ├── Mine.tsx # 个人中心 │ │ ├── WrongBook.tsx # 错题本 │ │ ├── WordLibrary.tsx # 单词库列表 │ │ ├── WordLibraryDetail.tsx # 词库详情（单词管理） │ │ └── Practice.tsx # 练习中心 │ ├── components/ # 通用组件 │ │ ├── auth/ # 鉴权组件 │ │ ├── layout/ # 布局组件 │ │ ├── practice/ # 练习组件 │ │ ├── shared/ # 共享组件 │ │ └── ui/ # 基础 UI 组件 │ ├── contexts/ # React Context │ ├── lib/ # 工具库（API 客户端、测验逻辑） │ └── types/ # TypeScript 类型定义 ├── server/ # 后端源码 │ ├── src/ │ │ ├── index.ts # 服务入口 │ │ ├── routes/ # API 路由 │ │ │ ├── auth.ts # 认证 │ │ │ ├── libraries.ts # 词库管理 │ │ │ ├── words.ts # 单词管理 │ │ │ ├── practice.ts # 练习 + 进度 │ │ │ ├── wrongWords.ts # 错题管理 │ │ │ ├── attempts.ts # 答题记录 │ │ │ └── stats.ts # 学习统计 │ │ ├── lib/ # Prisma 客户端 + JWT │ │ └── middleware/ # 鉴权中间件 │ └── prisma/ │ └── schema.prisma # 数据库模型 ├── vite.config.ts ├── package.json └── README.md ```