创作灵感

• 记录项目实践、课程设计复盘
• 撰写技术笔记，巩固前后端、测试、部署相关知识点
• 沉淀项目经验，方便复盘讲解
• 把自己的课程设计项目整理成原创技术博客

---

一、项目简介

本次项目是单词记忆打卡系统，属于软件工程课程设计项目。采用uni-app开发前端，Express搭建后端服务，MySQL持久化存储数据，一套代码可以同时打包运行在H5、微信小程序端。 系统核心功能包含用户注册登录、单词浏览背诵、生词收藏、每日学习打卡、错题复习、学习进度统计。项目完整走完需求梳理、数据库设计、接口开发、前后端联调、功能测试、本地部署全流程，本文记录整个落地过程，适合新手学习全流程项目思路。

二、技术栈

前端：uni-app、Vue2、uView UI组件库 后端：Node.js + Express 数据库：MySQL 辅助工具：HBuilderX、Navicat、Postman

三、需求分析

功能需求

1. 用户模块：账号注册、密码登录、个人信息、学习主页
2. 单词模块：单词列表展示、中英文释义切换、生词收藏
3. 打卡模块：每日背诵打卡、记录学习时长、累计学习进度
4. 错题模块：标记记错单词，生成错题本，支持反复复习

非功能需求

1. 跨端兼容：H5、微信小程序两端页面样式、交互正常
2. 数据稳定：学习记录、打卡信息持久存入数据库，刷新不丢失
3. 易用性：操作简单，加载响应速度流畅

四、数据库设计

一共设计3张核心数据表：用户表user、单词表word、打卡记录表record

1. user 用户表

   字段	类型	说明
   id	int	主键自增
   username	varchar	用户名
   password	varchar	密码
   create_time	datetime	注册时间

2. word 单词表

   字段	类型	说明
   id	int	主键自增
   word	varchar	英文单词
   explain	varchar	中文释义
   is_collect	tinyint	是否收藏 0否1是

3. record 打卡记录表

   字段	类型	说明
   id	int	主键自增
   user_id	int	关联用户id
   study_date	date	打卡日期
   study_count	int	本次背诵单词数量
   create_time	datetime	记录时间

核心建表示例

CREATE TABLE `user` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL,
  `password` VARCHAR(100) NOT NULL,
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

五、后端接口设计

采用REST风格接口，使用Postman调试验证

接口	请求方式	作用
/api/register	POST	用户注册
/api/login	POST	用户登录
/api/getWord	GET	获取单词列表
/api/collect	POST	单词收藏/取消收藏
/api/addRecord	POST	提交打卡记录
/api/getRecord	GET	查询个人打卡记录

跨域处理：后端引入cors中间件，解决uni-app前端请求跨域报错问题。

六、前端页面实现

项目在HBuilderX中开发，一共5个核心页面：

1. 登录注册页：输入账号密码，校验表单，提交后端接口
2. 单词背诵页：循环展示单词，切换释义，点击收藏
3. 错题复习页：筛选用户标记的生词，集中复习
4. 打卡页面：提交今日背诵记录，完成打卡
5. 个人中心：查看累计打卡天数、学习统计数据

页面适配uni-app跨端规范，同时兼容小程序和H5的样式差异。

七、功能测试（重点，适配测试岗）

测试类型

功能测试 + 跨端兼容性测试（H5、微信小程序）

部分测试用例

1. 登录：空账号、空密码、错误密码，校验提示是否正常
2. 打卡：同一天重复提交打卡，校验是否限制重复打卡
3. 收藏：同一单词重复点击收藏，状态是否正确切换
4. 边界：单词列表翻到最后一页，无报错、无崩溃

测试发现问题

• 问题1：未做重复打卡校验，同一天可以多次提交打卡记录
• 问题2：小程序端部分样式错位，H5展示正常
• 问题3：数据库中文内容出现乱码 按照缺陷修复流程，修改代码、调整数据库编码、适配样式，修复后回归验证。

八、本地部署流程

1. 打开Navicat，新建MySQL数据库，导入上面的建表SQL脚本
2. 进入后端项目文件夹，执行 npm install 安装依赖包
3. 启动后端服务：node app.js，控制台输出服务启动成功
4. HBuilderX打开uni-app前端项目，配置后端接口地址
5. 运行项目：可选择运行到浏览器H5，或者编译到微信小程序开发者工具
6. 验证：登录、背单词、打卡全部流程可正常跑通

九、难点与踩坑总结

1. 跨域问题：前端请求后端一直报错，安装cors中间件，配置跨域解决
2. MySQL中文乱码：数据库、表、连接字符串统一设置编码utf8mb4
3. 两端适配差异：H5和小程序部分css、api表现不一样，需要做条件判断兼容
4. 幂等问题：没有限制同一天多次打卡，增加日期判断，防止重复生成打卡记录

十、项目总结与收获

通过这个单词打卡项目，完整走完一个小型Web应用从需求分析、库表设计、接口开发、前后端联调、功能测试到本地部署的全流程。 熟悉了uni-app跨端开发模式，学会使用Postman做接口测试，掌握基础MySQL建表、数据查询，理解前后端交互逻辑，锻炼了问题排查、文档整理能力。 这个项目偏向小型业务系统，适合入门，也可以继续拓展：增加艾宾浩斯记忆算法、单词分类、用户头像等功能。

十一、结语

本项目为课程设计学习项目，仅用于学习交流，源码不作商用。 如果你也在做uni-app+Node课程设计，欢迎一起交流踩坑经验。