项目整体流程图
使用react+mongodb+node实现
项目的功能
本次项目的目的就是要收集报名人的信息，所以功能也就相对来说简单一点。概括一下就是，用户用qq邮箱号和验证码进行登录，然后填写自己的个人信息进行报名。管理员后台可以修改报名者的信息
做的过程中遇到的一些问题：
1.不知道如何发送验证码?
2.怎样实现在一定的时间内只触发一次发送验证码的这个请求?
3.验证码的有效时间不会设置?
4.不知道怎样实现页面的跳转?
5.axios请求比较迷茫? 6.token是怎样使用,如何实现身份验证?
7.cookie在react中是如何使用的?
8.怎样识别用户是新用户?
9.如何更新数据库中的某条信息，不是删除原始信息，而是在该原始信息的基础上修改一些数据
10.this的绑定问题
11.怎样在后端中验证用户输入的验证码是否正确?
感受
记得当听到大三学长让我们做一个纳新系统时，当时我的内心是有一点小恐慌的，因为那个时候真的是什么也不会。感觉这个比登天还难，当时的想法就是，这个真的很难，自己做出来的希望是非常小的。然后心里就一直在想："学长怎么让我们做这么难的东西，我是学的前端方向，这次学长让我们既要做前端，也要做后端，也就是整个项目是要自己一个人完成的,这是不是有点太难了些(哈哈哈哈，反正当初我是没有多少思路和勇气觉得自己能做出这个东西)。"经过了一个寒假的学习，我觉得自己有很多大的收获，也就是在寒假这段时间，项目也慢慢的有了起色，之后就是不断的改bug，找出问题，解决问题，与伙伴们进行交流探讨，对代码优化，提高用户的体验度，到今天为止，项目可以说做完了。
总的来说，在这过程中，遇到了很多的问题，有时一个问题要想好长时间，我记得有次我做梦都梦到我在敲代码(哈哈哈)，不说了，说多了就是累呀（都不知道掉了多少头发了(哈哈哈)）。嗯......，希望自己能更好吧，然后就是不断地学习，使自己变得更加优秀吧。
最后送给我们所有人一句话吧:要让自己不断的去学习，因为这样，我们才能发现自己是有多菜,知道自己有多菜，然后我们就会继续努力学习，然后又发现自己好菜(哈哈哈，那就先这样吧，拜拜！！！)
前端 组件
1.index .js 组件
-
作用：渲染响应的组件。
2.App.js组件
-
作用: 将组件放到同一个页面中，目的是使每个组件可以独占整个页面
-
默认渲染的组件为首页，然后当点击相应的link跳转时，渲染不同的组件
-
Index （首页）
-
Login （登录）
-
Attend（报名）
-
3.Index .js组件（js-->Component-->theFirstPage）
(1)Index01.css为其css文件
(2)是用户打开网址进入的第一个页面，在这个页面上，有zypc标识，然后有一个可以滑动和变换的图，他们是调用antd组件库中的某个组件完成的
组件如下:
import Slider from 'react-slick'
(3) 这个页面的作用，可以点击登录按钮，或者点击加入我们按钮，可以跳转到登录页面
跳转实现 ：路由跳转
(4)遇到的问题:
-
当我想要设置set-cookie这个响应头时，明明代码是写对的，但是响应头中无论如何也显示不出来，然后我在网上找了好久，终于发现问题所在，现在总结如下：
-
1.当遇到某一个问题时，首先要想到切换浏览器试试是否可以显示,我设置的set-cookie在双核浏览器中不能显示，但在谷歌中可以正常显示出来(各个浏览器对cookie的一些字段应该有不同的限制吧)
-
2.可以试试一些别的头名称，看响应头中是否显示，
-
res.setHeader('lalala', ['type=ninja', 'language=javascript']);
-
这个语句就是自定义的响应头名称，如果这样设置的一些头可以在响应头中显示，那么我认为应该就是你正在使用的浏览器对set-cookie这个有限制
-
4.Login.js(js-->Component-->enterPage-->loginPage)
(1)Login01.css为其css文件
(2) 作用：用户报名页面，使用qq邮箱和验证码登录
(3) checkEmail（）方法检查邮箱格式是否符合qq邮箱格式，若符合则发送post请求
重点：这里还调用了一个方法，目的是在一段时间内只能发送一次验证码（多次点击也只发送一次）
(4) checkLogin(e) 方法用于登录时所要进行的一些操作，如果登陆成功，会接收到一个token，然后将其保存在cookie中，这个值在以后的请求中都带上，目的是如果cookie过期，那么用户将没有权限在进行一些操作
5.Attend.js(js-->Component-->enterPage-->attendPage)
(1)Attend.01.css 为其css文件
(2)作用: 用户填写登录信息，并且显示当前的面试进度
(3) componentDidMount()方法中的请求：查看数据库中是否有用户信息，若有那么将数据展示到页面的输入框中，并锁定输入框（不能再进行输入）
(4) subMit(e)方法 用于提交报名信息，先检查数据格式是否正确，然后会判断用户是首次报名还是已报名，这两者都会有相应的提示
6.数据库
本次使用的数据库为MongoDB
7.后端
本次使用node.js做为后端语言，服务器端口号为3040
路由配置如下:
| 请求方式 | 请求的路由接口 | 请求所要携带的数据 | 该请求的功能是什么 |可访问者
| POST | /getMailCode |email |为了向用户的qq邮箱发送验证码 |任何人
| POST | /login | email,testcode |检测用户填写的信息是否正确,若正确那莫跳转到登录页面 |任何人
| POST |/inDatabase |用户的专业,班级,等报名信息 |发送请求，保存报名者的个人信息 |任何人
| POST | /Attend |email |为了查找该用户是否是新用户 |任何人
| GET | /admin |无 |管理员查看报名信息 |管理员
| GET | /modify |无 |管理员修改报名者的个人信息页面 |管理员
| GET | /modifymsg |无 |管理员修改完报名者的信息，然后并修改数据库中的内容 |管理员