React-Ts 项目：在线编程笔试平台

项目

发布日期: 2021-11-02

文章字数: 1.6k

阅读时长: 5 分

阅读次数:

前言

上一篇博客说到线上部署项目到服务器，博主说的就是这个 React-Ts 项目啦，它是博主为将来找实习准备的，用到的技术点有好一些是边学边做的，如果有不同见解的地方还请读者不吝赐教。

需要事先说明的是，关于这个项目的博客，博主并不打算讲解代码实现，每个人的项目用到的技术栈不尽相同，但有一点可以确定，就是项目功能点的实现逻辑是大致相同的，故博主会更多地讲解各模块/功能点的逻辑实现 ^_^

项目介绍

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

项目任务拆解

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

面试题模块

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

在线编程模块

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

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

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

实时文字聊天模块

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

在线语音聊天模块

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

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

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

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

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

视频聊天模块

候选人和面试官可实时视频聊天
技术栈
前端：React + TypeScript ，后端：Node.js + MySQL + Koa 。
项目实现
为了实现登录/注册模块，使用 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 等网络攻击。
用户数据图形化，直观展示用户做题量、通过率等信息。
实现视频和语音聊天模块，支持实时视频通话和语音聊天。