基于 React + Ts + Node.js + Koa + MySQL + TypeORM 的一个全栈项目（总纲）

Offer 驾到，掘友接招！我正在参与2022春招系列活动-经验复盘，点击查看 活动详情。

项目介绍

这是一个前后端分离项目：在线编程笔试平台。按照用户角色分为两部分，分别是面试官侧和候选人侧，主要功能是候选人在线完成代码编写，面试官可查看编程结果。

技术栈

前端：React + TypeScript + Ant Design ，后端：Node.js + Koa ，数据库：MySQL + TypeORM 。

项目任务拆解

1. 登录/注册模块

• 支持邮箱登录和注册
• 支持“退出登录”功能

2. 面试题模块

• 面试官可填写面试题
• 每个面试题有固定链接
• 支持新建面试题和修改面试题目
• 支持邀请一个候选人编程
• 面试题目支持富文本格式

3. 在线编程模块

• 候选人可在线编写代码
• 代码支持多种语言高亮
• 候选人侧提交最终编程代码
• 面试官侧刷新能看到最终代码

4. 在线编程模块支持自动刷新

• 候选人侧代码支持自动保存
• 面试官侧代码自动刷新

5. 实时文字聊天模块

• 候选人和面试官可实时文字聊天
• 其他获得连接的人都可参与文字聊天

6. 在线语音聊天模块

• 候选人和面试官可实时语音聊天

7. 在线编程模块支持运行JS代码

• 候选人和面试官可在线运行 JS 代码并查看输出

8. 在线编程模块支持协同编辑

• 候选人和面试官可实时协作编程

9. 视频聊天模块

• 候选人和面试官可实时视频聊天

项目实现

• 为了实现登录/注册模块，使用 Cookie 验证用户信息、localStorage 保存登录态、nodemailer 发送验证码邮件至用户邮箱、登录或注册按钮设置防抖，实现了登录、注册、忘记密码和15天内免登陆功能。
• 为了实现创建面试题模块，使用 Ant Design 完成 UI 设计、wangEditor 支持面试官编辑面试题、在修改信息时调用后端接口以获取数据进行初始化、nodemailer 发送邮件告知候选人试卷信息，使面试官能进行试卷和试题的增删查改，以及邮件通知当事人试卷信息。
• 为了实现在线编程模块，使用 react-monaco-editor 支持候选人编辑代码并提交、filter api 完成试题的多次筛选，实现了编程功能。
• 为了实现实时文字聊天模块，使用 WebSocket 监听客户端和服务端的聊天信息，后端接受处理后响应给前端，使候选人和面试官能进行实时文字交流。
• 为了快速完成项目部署，前端使用 scp 连接服务器并上传文件到服务器 nginx 下的指定目录，后端使用 fs 读写本地文件、node-ssh 连接服务器并将指定文件上传到 tomcat 下的指定目录、运行本地编写的 deploy.sh 脚本启动后端服务、并用 pm2 实时监控，以此实现了项目的自动化部署。

可拓展点

• 性能优化。
• 用户能提供试题题解，支持评论。
• 实现语言国际化，支持多种语言切换。
• 完善安全措施，能防止 xss 、csrf 等网络攻击。
• 用户数据图形化，直观展示用户做题量、通过率等信息。
• 实现视频和语音聊天模块，支持实时视频通话和语音聊天。

项目亮点（目前只实现了第一点）

1. 实现自动化部署
2. 支持运行 JS 代码
3. 解决编辑冲突
4. 支持文字、语音、视频聊天
5. 性能优化
6. 支持国际化
7. 适配移动端

项目展示

PC 端

1. 登录/注册

面试官侧

2. 试题管理
   
3. 阅卷管理
   
4. 面试间管理
   
5. 面试间入口
   

候选人侧

项目地址

GitHub 前端仓库地址：github.com/HCYETY/reac…

GitHub 后端仓库地址：github.com/HCYETY/node…

项目演示地址：www.syandeg.com

写在后面

这个项目是笔者的第一个实习项目，前后端均由笔者独立完成，花费了很多时间和精力，读者觉得不错的话不妨给个star支持一下呀，不胜感激~ ^_^

这个项目笔者打算继续完善并维护下去，将它做大起来，如果有读者感兴趣该项目，想参与实现某个功能，或者有什么好的想法，也可以在评论区留言或者在 Github 上提 issue 等等，笔者看到的话会及时回复哒，先谢谢大家的支持啦！

另外针对本项目，后续会出相关文章介绍具体实现过程，大家也可以关注一下！

在线编程笔试平台项目系列文章：

• 前后端分离项目线上部署