# tami-vocabulary-book **Repository Path**: eveningwater/tami-vocabulary-book ## Basic Information - **Project Name**: tami-vocabulary-book - **Description**: 獭米英语单词本，管理你的单词库。该项目能够帮你在管理英语单词库的同时提供词汇测试，进一步帮你巩固词汇的掌握情况。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-09-09 - **Last Updated**: 2025-09-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 獭米英语单词本 一个现代化的英语单词学习和测试应用，支持单词管理、记忆状态跟踪和智能测试功能。 ## 项目简介 獭米英语单词本是一个现代化的全栈英语学习应用，采用 Node.js + Express 后端架构和 MongoDB 数据库，支持多用户系统和完整的用户认证机制。项目提供了完善的单词管理、智能测试、用户个人中心等功能，旨在为用户提供高效、个性化的英语学习体验。 该应用支持用户注册登录、个人资料管理、头像上传、独立的个人单词库等功能，每个用户都拥有独立的学习数据和个性化设置。 ### 核心特性 - 📚 **单词管理**：支持添加、编辑、删除单词，包含单词、读音、翻译、例句等完整信息 - 🎯 **记忆状态跟踪**：可标记单词的记忆状态，支持已记住/未记住状态切换 - 🔍 **智能搜索**：支持按单词内容搜索，快速定位目标单词 - 📊 **分类筛选**：支持按记忆状态和时间排序筛选单词列表 - 📖 **分页浏览**：支持分页显示，提供完整的导航功能 - 🧪 **智能测试**：提供随机测试、已记住单词测试、未记住单词测试三种模式 - ⏱️ **测试统计**：实时显示测试进度、正确率、用时等统计信息 - 🎨 **现代 UI**：采用渐变色设计，响应式布局，支持多种交互效果 ## 技术栈 ### 后端技术 - **运行环境**：Node.js (v14.0+) - **Web框架**：Express.js - **数据库**：MongoDB (v5.0+) - **文件上传**：Multer 中间件 - **跨域处理**：CORS ### 前端技术 - **核心语言**：原生 JavaScript (ES6+) - **样式技术**：CSS3 (Flexbox, Grid, 渐变效果) - **UI组件**：基于 HTML5 Dialog 的模态框系统 - **文件处理**：FileReader API, FormData - **数据交互**：Fetch API, XMLHttpRequest ### 开发工具 - **包管理**：npm - **开发服务器**：nodemon (热重载) - **版本控制**：Git - **兼容性**：现代浏览器 (Chrome, Firefox, Safari, Edge) ## 项目结构 ``` english-vocabulary-book/ ├── index.html # 主页面 - 单词列表管理 ├── pages/ │ ├── account.html # 登录注册页面 │ ├── user.html # 用户个人中心 │ └── vocabulary-test.html # 单词测试页面 ├── css/ │ ├── style.css # 主样式文件 │ ├── user.css # 用户中心样式 │ └── vocabulary-test.css # 测试页面样式 ├── js/ │ ├── app.js # 主应用逻辑 │ ├── api-client.js # API客户端和数据管理 │ ├── user.js # 用户中心功能 │ ├── vocabulary-test.js # 测试功能逻辑 │ ├── plugins.js # 通用插件库(模态框等) │ └── data.json # 基础词库数据 ├── server/ │ └── english-vocabulary-book.js # Express服务器和API ├── img/ │ ├── default-avatar.png # 默认头像 │ ├── users-avatar/ # 用户头像存储目录 │ ├── delete.svg # 删除图标 │ ├── edit.svg # 编辑图标 │ └── logo.png # 应用图标 ├── package.json # 项目依赖配置 ├── package-lock.json # 依赖版本锁定 ├── .gitignore # Git忽略文件配置 ├── README.md # 项目说明文档 └── favicon.ico # 网站图标 ``` ## 快速开始 ### 安装和运行 ## 环境要求 ### 系统要求 - **操作系统**：Windows 10+, macOS 10.14+, Linux (Ubuntu 18.04+) - **Node.js**：v14.0 或更高版本 - **npm**：v6.0 或更高版本 - **MongoDB**：v5.0 或更高版本 ### 浏览器支持 - Chrome 80+ - Firefox 75+ - Safari 13+ - Edge 80+ ### 开发环境推荐 - **代码编辑器**：VS Code, WebStorm - **MongoDB管理工具**：MongoDB Compass, Studio 3T - **API测试工具**：Postman, Insomnia #### 安装步骤 1. **克隆项目到本地** ```bash git clone https://gitee.com/aulence/tami-vocabulary-book.git # 或者SSH方式 git clone git@gitee.com:aulence/tami-vocabulary-book.git cd tami-vocabulary-book ``` 2. **安装项目依赖** ```bash npm install ``` #### 运行项目 **开发模式（推荐）** ```bash npm run dev ``` 使用 nodemon 启动服务器，支持代码热重载，适合开发调试。 **生产模式** ```bash npm start ``` 使用 Node.js 直接启动服务器，适合生产环境部署。 #### 数据库相关操作 ```bash # 重新加载终端配置 source ~/.zshrc # 查看MongoDB配置 cat /opt/homebrew/etc/mongod.conf # 启动MongoDB服务 brew services start mongodb/brew/mongodb-community@5.0 # 停止MongoDB服务 brew services stop mongodb/brew/mongodb-community@5.0 # 重启MongoDB服务 brew services restart mongodb/brew/mongodb-community@5.0 # 检查服务状态 brew services list | grep mongodb # 直接启动mongod（前台运行） /opt/homebrew/opt/mongodb-community@5.0/bin/mongod --config /opt/homebrew/etc/mongod.conf # 后台启动 /opt/homebrew/opt/mongodb-community@5.0/bin/mongod --config /opt/homebrew/etc/mongod.conf --fork # 查看MongoDB日志 tail -f /opt/homebrew/var/log/mongodb/mongo.log # 查看最近的日志 tail -n 100 /opt/homebrew/var/log/mongodb/mongo.log # 查看MongoDB进程 ps aux | grep mongod # 查看端口占用 lsof -i :27017 # 查看MongoDB进程详情 pgrep -fl mongod # 优雅停止（推荐） kill -TERM $(pgrep mongod) # 强制停止（不推荐） kill -9 $(pgrep mongod) # 备份数据库 /opt/homebrew/opt/mongodb-community@5.0/bin/mongodump --host localhost:27017 --db myDatabase --out /path/to/backup # 恢复数据库 /opt/homebrew/opt/mongodb-community@5.0/bin/mongorestore --host localhost:27017 --db myDatabase /path/to/backup/myDatabase ``` 默认配置： - 端口 : 27017 - 数据目录 : /opt/homebrew/var/mongodb - 日志文件 : /opt/homebrew/var/log/mongodb/mongo.log - 二进制文件 : /opt/homebrew/opt/mongodb-community@5.0/bin/mongod #### 访问应用 启动成功后，在浏览器中访问： - **本地访问**: http://localhost:3000 - **网络访问**: http://[你的IP地址]:3000 或 https://[你的IP地址]:3000 ## 项目架构 ### 整体架构 本项目采用 **前后端分离** 的全栈架构设计： ``` ┌─────────────────┐ HTTP/HTTPS ┌─────────────────┐ MongoDB ┌─────────────────┐ │ │ ◄──────────────► │ │ ◄───────────► │ │ │ 前端 (Web) │ │ 后端 (Node.js) │ │ 数据库 (DB) │ │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` ### 技术架构层次 **表现层 (Presentation Layer)** - 原生 HTML5/CSS3/JavaScript - 响应式设计，支持多设备访问 - 基于 Dialog API 的模态框系统 - Fetch API 进行数据交互 **业务逻辑层 (Business Logic Layer)** - Express.js RESTful API - 用户认证和权限控制 - 文件上传处理 (Multer) - 数据验证和业务规则 **数据访问层 (Data Access Layer)** - MongoDB 数据库 - 集合设计：BaseVocabularyList (基础词库) + UserList (用户数据) - 数据持久化和事务处理 ### 核心模块 **用户系统模块** - 用户注册/登录认证 - 个人资料管理 - 头像上传和存储 - 登录状态持久化 **词汇管理模块** - 个人单词库 CRUD 操作 - 基础词库共享访问 - 记忆状态跟踪 - 搜索和筛选功能 **测试系统模块** - 多种测试模式 - 实时进度跟踪 - 统计分析功能 - 自适应难度调整 ## 基本使用 ### 用户注册和登录 1. **首次使用**：访问应用后点击导航栏"登录"按钮 2. **注册账户**：填写账号、密码、昵称等信息完成注册 3. **登录系统**：使用注册的账号密码登录，可选择"记住登录状态" 4. **个人中心**：登录后可访问个人中心管理资料和头像 ### 单词学习流程 1. **词库初始化**：首次登录会自动初始化个人词库 2. **添加单词**：点击"添加单词"按钮，填写完整的单词信息 3. **管理单词**：编辑、删除单词，标记记忆状态 4. **搜索筛选**：使用搜索和筛选功能快速定位目标单词 5. **批量操作**：支持批量选择和删除单词 ### 测试功能使用 1. **进入测试**：点击"测试词汇"进入测试页面 2. **选择模式**： - 随机测试：从所有单词中随机选择 - 已记住测试：测试已标记记住的单词 - 未记住测试：专门练习未掌握的单词 3. **开始答题**：选择正确的中文翻译 4. **查看结果**：测试完成后查看详细统计和分析 ### 个人资料管理 1. **基本信息**：在个人中心修改昵称、手机、邮箱等 2. **头像上传**：点击头像或"修改头像"按钮上传个人头像 3. **性别设置**：选择性别信息 4. **个人简介**：添加个人学习心得或简介 ## 功能说明 ### 用户系统 **账户管理** - 用户注册：支持账号、邮箱注册，密码加密存储 - 用户登录：支持"记住登录状态"功能，提供持久化和临时登录 - 权限控制：未登录用户可浏览基础词库，完整功能需要登录 - 数据隔离：每个用户拥有独立的个人单词库和学习数据 **个人中心** - 基本资料：昵称、手机号、邮箱、性别、个人简介 - 头像系统：支持图片上传，自动处理文件命名和历史清理 - 实时保存：表单数据实时验证和保存 - 响应式设计：适配不同设备屏幕 ### 词汇管理系统 **单词库功能** - 完整词条：单词、美式读音、中文翻译、例句、记忆状态 - CRUD操作：添加、编辑、删除单词，支持批量操作 - 智能搜索：支持单词内容模糊搜索 - 状态筛选：按记忆状态（全部/已记住/未记住）筛选 - 排序功能：支持按时间、字母等多种排序方式 **数据管理** - 基础词库：系统提供的公共词汇，所有用户可访问 - 个人词库：用户专属的学习词汇，支持自动初始化 - 数据同步：实时同步到MongoDB数据库 - 缓存机制：前端缓存提升访问性能 ### 智能测试系统 **测试模式** - 随机测试：从个人词库中随机选择单词进行测试 - 已记住测试：专门测试已标记记住的单词，巩固记忆 - 未记住测试：针对性练习未掌握的单词 - 自定义数量：支持选择测试单词数量 **测试体验** - 四选一选择题：提供一个正确答案和三个干扰项 - 实时反馈：立即显示答案正确性 - 进度跟踪：实时显示测试进度和剩余题目 - 计时功能：记录测试用时 - 统计分析：测试完成后显示正确率、用时等数据 ### 文件上传系统 **头像上传** - 支持格式：JPG, PNG, GIF, WEBP - 文件大小：限制2MB以内 - 智能命名：用户名-avatar-时间戳格式 - 历史清理：上传新头像时自动删除旧文件 - 邮箱处理：自动提取邮箱@符号前的部分作为文件名 - 缓存控制：添加时间戳参数防止浏览器缓存 ### 界面交互 **模态框系统** - 基于HTML5 Dialog API的现代化模态框 - 支持确认对话框、操作对话框、删除确认等多种类型 - 自动焦点管理和键盘导航 - 响应式设计，适配移动设备 **用户体验** - 渐变色设计：现代化的视觉效果 - 响应式布局：支持桌面和移动设备 - 加载状态：操作过程中的加载提示 - 错误处理：完善的错误提示和处理机制 - 操作反馈：实时的操作成功/失败反馈 ## 项目版本提交规范 本项目遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范： ## 项目版本及开发计划 当前版本为 v1.1.2 后续版本将陆续开发，计划包括但不限于： - [ ] feat: 首页中可以切换为表格视图（当前）和卡片视图，卡片视图将在移动端有更好的阅读体验 - [x] fix: 修复账号注册登录密码明文显示传输的问题 - [x] feat: 测试词汇页面里将加入"选择填空"的功能 - [ ] feat: 新增“达人词库”页面，页面由两部分组成：第一部分，搜索框，可以通过搜索用户的账号来查看该用户的词库，并且可以将该用户的词库添加到自己的词库内；第二部分，列出几个词库较多（或者活跃用户）的用户作为“词库达人”进行卡片列表展示，点击后出现的内容和通过搜索出来的页面结果一致。搜索只能通过账号，而“词库达人”只展示用户名、头像、单词数等主要信息 - [ ] feat: 新增“更新日志”页面，用于展示项目的版本更新内容 - [x] feat: 如果用户是用手机号或邮箱注册的账号，那在个人中心对应的字段上会自动填入，而无需让用户再次去进行填写 - [x] fix: 修复个人中心页面用户信息读取失败的问题 - [x] feat: 新增单词后，列表会用一个高亮动画效果来提示用户新增单词所在的行 ## 项目更新日志 ### 2025-09-06 1. feat(test) : 新增"选择填空"的测试模式，测试时会随机选择一个单词，然后将单词中的一个字母用下划线代替，用户需要选择正确的字母来填空 2. enhance(style) : 优化了 footer 的表现，并修改和新增了部分信息 3. enhance(style) : 调整了部分页面主要内容的宽度，以适应不同屏幕的显示 ### 2025-09-04 1. feat(userInfo) : 如果用户是用手机号或邮箱注册的账号，那在个人中心对应的字段上会自动填入，而无需让用户再次去进行填写 2. fix(userInfo) : 修复了用户在个人中心页面填写手机号或邮箱后，再次登录后，对应的字段没有自动填充的问题 3. feat(wordList) : 新增单词后，列表会用一个高亮动画效果来提示用户新增单词所在的行 ### 2025-09-02 1. feat(gulp) : 新增 gulp 任务，用于实现项目上线前的压缩混淆 2. fix(date) : 修复了日期格式问题导致首页单词列表时间排序错误的问题 3. fix(style): 修复了代码在执行 gulp 的代码压缩功能后，CSS 样式生效错误的问题 4. feat(footer) : 新增页脚，包含公司信息、联系我们和备案信息 5. fix(avatar) : 修复了用户退出登录后，头像显示恢复为默认头像的问题 6. feat(release) : 项目发布到阿里云服务器上：https://vocabulary.aulence.com/ 7. docs(index): 添加SEO和社交媒体元标签优化页面 8. fix(词汇测试): 修复计时器启动逻辑并更新显示文本 ### 2025-09-01 1. feat(avatar) : 为导航栏添加用户头像功能 2. feat(user) ： 新增用户中心页面，用户可以在这里管理个人信息 3. feat(database) : 完成用户个人资料的数据库存储，包括用户名、密码、手机号、性别 4. feat(avatar) : 新增用户头像上传功能，支持用户自定义头像，头像存储在服务器的 img/users-avatar 目录下 5. feat(avatar) : 为用户头像添加点击事件，点击后弹出文件选择对话框，用户可以上传新的头像 ### 2025-08-31 1. feat(database) : 集成 MongoDB 数据库，重构集合架构为 BaseVocabularyList（基础词库）和 UserList（用户集合） 2. feat(account) : 创建登录注册页面，实现完整的用户认证系统和数据持久化 3. feat(isolation) : 实现用户数据隔离，每个用户拥有独立的个人单词库，支持自动初始化 4. feat(permissions) : 添加权限控制系统，未登录用户操作时显示登录提示 5. feat(remember-login) : 新增"记住登录状态"功能，支持持久化和临时登录两种模式 6. feat(plugins) : 新增 js/plugins.js 通用插件库，实现基于 dialog 元素的模态框组件 7. feat(navigation) : 更新导航栏，添加用户登录状态显示和下拉菜单 8. feat(management) : 在首页添加单词管理功能，支持批量选择、删除和管理模式切换 9. feat(base-vocabulary) : 新增基础词库 API，支持未登录用户浏览公共词汇 10. refactor(server) : 重构服务器和 API 接口，支持用户身份验证和数据隔离 11. refactor(architecture) : 从纯前端应用升级为全栈应用，支持多用户并发使用 12. style(ui) : 优化界面样式和用户体验，完善错误处理和操作反馈机制 ### 2025-08-30 1. chore(mongodb) : 安装了本地的 MongoDB v5.0.31 2. docs : 更新了项目的文档，新增了数据库相关操作的说明 ### 2025-08-24 1. refactor(js) : 使用 node.js（express）+ fetch 的方式来替代重构了数据的操作方式 2. feat(server) : 新增服务器端代码，使用 express 框架搭建简单的 API 服务 3. fix(data) : 修复数据操作中的并发问题，确保数据的一致性和完整性 4. feat(api) : 新增 API 接口，支持单词添加、删除、修改、查询 5. docs : 将 JS 文件中的关于函数的单行注释修改为了文档注释 6. refactor(js) : 重构了”词汇测试“页面，使之使用 node.js 的方式来读取 JSON 文件的数据 7. feat(vocabulary-test) : 新增了词汇测试页面的单词数量选择器，支持自定义测试单词数量 ### 2025-08-20 1. feat(ui) : 新增 SVG 图标按钮替换文字按钮 - 涉及 edit.svg, delete.svg, style.css 2. fix(interaction) : 修复编辑删除按钮点击响应问题 - 涉及 app.js 3. refactor(structure) : 重构文件命名和 CSS 结构 - 涉及 vocabulary-test.html, vocabulary-test.css, vocabulary-test.js 4. feat(modal) : 禁用模态框遮罩层关闭功能 - 涉及 app.js 5. fix(test-navigation) : 修复测试页面导航交互问题 - 涉及 vocabulary-test.js 6. docs : 更新项目结构文档和文件引用关系 ### 2025-08-19 1. feat(data) : 实现 fetch 方法加载 JSON 数据 - 涉及 data.js, data.json 2. refactor(id) : 重构单词 ID 生成规则为递增格式 - 涉及 data.json 3. fix(ui) : 修复按钮变量引用错误和模态框标题问题 - 涉及 app.js 4. perf(loading) : 优化数据初始化和缓存机制 - 涉及 data.js 5. style(format) : 统一 README 文档中英文数字空格格式 ### 2025-08-18 1. feat(ui) : 新增单词测试界面优化 - 涉及 test.html, test.css 2. fix(data) : 修复本地存储数据同步问题 - 涉及 data.js 3. refactor(style) : 重构 CSS 样式结构 - 涉及 style.css, test.css 4. perf(search) : 优化搜索功能性能 - 涉及 app.js 5. docs : 更新 README 文档和使用说明 ### 代码规范 - 使用 2 个空格进行缩进 - JavaScript 使用 ES6+ 语法 - CSS 使用 BEM 命名规范 - 注释使用中文，代码使用英文 - 提交信息遵循 Conventional Commits 规范 ## 联系方式 如有问题或建议，请通过以下方式联系： 发送邮件至：[tami-network@163.com] --- **獭米英语单词本** - 让英语学习更高效！ 🚀