react-ts-coding_web

所属分类:Leetcode/题库
开发工具:TypeScript
文件大小:665KB
下载次数:0
上传日期:2022-03-04 09:33:00
上 传 者sh-1993
说明:  react-ts-coding_web,基于 React 和 Ts 实现的前后端分离项目:在线编程笔试平台之前端,模仿力扣(LeetCode)的部分功能点。
(react-ts-coding_ Web, a front-end separation project based on React and Ts implementation: the front-end of the online programming written test platform, and some functional points of the imitation LeetCode.)

文件列表:
.babelrc (63, 2022-03-04)
.npmrc (44, 2022-03-04)
deploy (0, 2022-03-04)
deploy\config.js (186, 2022-03-04)
deploy\index.js (437, 2022-03-04)
images.d.ts (163, 2022-03-04)
img (0, 2022-03-04)
img\1.png (121459, 2022-03-04)
img\2.png (56591, 2022-03-04)
img\3.png (72511, 2022-03-04)
img\4.jpg (21772, 2022-03-04)
img\5.png (39526, 2022-03-04)
img\6.png (13974, 2022-03-04)
img\7.png (41853, 2022-03-04)
img\bg.jpg (202186, 2022-03-04)
img\logo.png (64359, 2022-03-04)
img\my-favicon.ico (4286, 2022-03-04)
package.json (2730, 2022-03-04)
problem.md (5391, 2022-03-04)
src (0, 2022-03-04)
src\App.tsx (3216, 2022-03-04)
src\api (0, 2022-03-04)
src\api\index.ts (625, 2022-03-04)
src\api\modules (0, 2022-03-04)
src\api\modules\candidate.ts (335, 2022-03-04)
src\api\modules\interview.ts (615, 2022-03-04)
src\api\modules\paper.ts (619, 2022-03-04)
src\api\modules\test.ts (258, 2022-03-04)
src\api\modules\user.ts (721, 2022-03-04)
src\common (0, 2022-03-04)
src\common\components (0, 2022-03-04)
src\common\components\Socket.tsx (2601, 2022-03-04)
src\common\components\breadcrumbs.tsx (3035, 2022-03-04)
src\common\components\candidate (0, 2022-03-04)
src\common\components\candidate\codeEditor.tsx (5106, 2022-03-04)
src\common\components\candidate\countdown.tsx (1903, 2022-03-04)
src\common\components\candidate\markdownEditor.tsx (2658, 2022-03-04)
... ...

## 项目地址 GitHub 前端仓库地址:[https://github.com/HCYETY/Online-programming-platform](https://github.com/HCYETY/Online-programming-platform) GitHub 后端仓库地址:[https://github.com/HCYETY/Online-programming-platform_service](https://github.com/HCYETY/Online-programming-platform_service) 项目演示地址:[http://www.syandeg.com](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`| ## 项目进度 - [x] 2021-09-04:实现登录/注册的静态页面 - [x] 2021-09-19:实现登录/注册逻辑(包括账号密码登录、登录拦截,session 身份验证) - [x] 2021-09-29:初步部署前后端项目到阿里云服务器 - [x] 2021-10-04:购买域名并实现自动化部署项目 - [x] 2021-10-05:支持使用邮箱 登录和注册 - [x] 2021-10-09:面试官侧支持新建/删除试卷,在“新建试卷”里新建/修改/删除试题,发送邮件至候选人邮箱 - [x] 2021-10-15:候选人侧展示试卷、开始编程、提交试卷 - [x] 2021-10-16:支持“退出登录” - [ ] 2021-10-30: - [x] 2021-10-31:搭建个人博客 - [x] 2021-11-06:沉淀项目所学,写博客中 - [x] 2021-11-14:评论功能雏形(但因暂无该需求,先放一边) - [x] 2021-11-23:实现试题筛选功能,完成编程模块 - [ ] 2021-12-01: - [x] 2021-12-03: 实现在线聊天功能 - [ ] 2021-12-10:解决编辑冲突问题 - [x] 2021-12-14:项目持续待机中,先学小程序开发去了 ## 项目展示 ### PC 端 1. 登录/注册 ![登录界面](https://z3.ax1x.com/2021/11/02/IkyIBQ.png) ![注册界面](https://z3.ax1x.com/2021/11/02/Ik63gf.png) #### 面试官侧 2. 试题管理 ![试卷展示](https://s4.ax1x.com/2022/02/18/H7OIxS.png) ![添加试题之试卷信息](https://s4.ax1x.com/2022/02/18/H7X6zT.png) ![添加试题之试题信息](https://s4.ax1x.com/2022/02/18/H7Xhw9.png) ![修改试卷1](https://s4.ax1x.com/2022/02/18/H7XLOe.png) ![修改试卷2](https://s4.ax1x.com/2022/02/18/H7jekn.png) 3. 阅卷管理 ![试卷展示](https://s4.ax1x.com/2022/02/18/H7jMlT.png) ![试卷详细信息之1](https://s4.ax1x.com/2022/02/18/H7jYkR.png) ![试卷详细信息之2](https://s4.ax1x.com/2022/02/18/H7j0XD.png) ![试卷详细信息之3](https://s4.ax1x.com/2022/02/18/H7js7d.png) ![批阅试卷](https://s4.ax1x.com/2022/02/18/H7jR9P.png) 4. 面试间管理 ![面试间信息展示](https://s4.ax1x.com/2022/02/18/H7jfc8.png) ![添加面试间](https://s4.ax1x.com/2022/02/18/H7jbhq.png) 5. 面试间入口 ![进入面试间](https://s4.ax1x.com/2022/02/18/H7jO3V.png) #### 候选人侧

近期下载者

相关文件


收藏者