项目地址

GitHub 前端仓库地址：https://github.com/HCYETY/Online-programming-platform

GitHub 后端仓库地址：https://github.com/HCYETY/Online-programming-platform_service

项目演示地址：http://www.syandeg.com

项目介绍

该项目是一个前后端分离项目，按照用户角色分为两部分，分别是面试官和候选人，主要功能是候选人在线完成代码编写，面试官可查看编程结果，同时面试官和候选人还可进行实时文字交流。

项目实现：

• 将项目前端和后端部署于服务器上，并实现了自动化部署。
• 使用 WebSocket 实时更新聊天信息。面试官和候选人各自进入面试间后，客户端会显示房间信息及聊天情况，当两个人都进入面试间后，即可开始实时文字交流。
• 使用 Cookie 存储用户登录时后端生成的随机码，使用 nodemailer 发送邮件信息（如注册验证码等）。
• 相关数据诸如用户登录信息，试卷和试题信息等全部存储于后端 MySQL 数据库中，前端需要的数据渲染均通过请求后端接口获取。
• 使用 react-monaco-editor 代码编辑器，自定义功能选项以编写代码；使用 wangEditor 富文本编辑器，完成试题的自定义编写。
• 使用 Ant Design 完成 UI 设计，几乎使用了其中 80% 的组件。
• 后端使用 Koa 框架，通过 koa-cors 实现前后端跨域。

项目技术栈

前端：React + TypeScript ，后端：Node.js + MySQL + Koa 。

项目任务拆解

1. 登录/注册模块

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

2. 面试题模块
3. 在线编程模块
4. 在线留言模块
5. 在线编程模块支持自动刷新
6. 在线留言模块改成实时文字聊天
7. 在线语音聊天模块
8. 在线编程模块支持运行JS代码
9. 在线编程模块支持协同编辑

技术选型

技术	说明	理由
Ant Design	前端 UI 设计	成熟的 UI 组件库，GitHub 上有 166 watch & 32.5k fork & 78.1k star

项目进度

• 2021-09-04：实现登录/注册的静态页面
• 2021-09-19：实现登录/注册逻辑（包括账号密码登录、登录拦截，session 身份验证）
• 2021-09-29：初步部署前后端项目到阿里云服务器
• 2021-10-04：购买域名并实现自动化部署项目
• 2021-10-05：支持使用邮箱 登录和注册
• 2021-10-09：面试官侧支持新建/删除试卷，在“新建试卷”里新建/修改/删除试题，发送邮件至候选人邮箱
• 2021-10-15：候选人侧展示试卷、开始编程、提交试卷
• 2021-10-16：支持“退出登录”
• 2021-10-30：
• 2021-10-31：搭建个人博客
• 2021-11-06：沉淀项目所学，写博客中
• 2021-11-14：评论功能雏形（但因暂无该需求，先放一边）
• 2021-11-23：实现试题筛选功能，完成编程模块
• 2021-12-01：
• 2021-12-03: 实现在线聊天功能
• 2021-12-10：解决编辑冲突问题
• 2021-12-14：项目持续待机中，先学小程序开发去了

项目展示

PC 端

1. 登录/注册

面试官侧

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

候选人侧