纳新项目总结

简介: 纳新项目总结

项目整体流程图


使用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 |无 |管理员修改完报名者的信息,然后并修改数据库中的内容 |管理员


相关文章
|
6月前
|
编译器 C++
【期末不挂科-C++考前速过系列P3】大二C++第3次过程考核(20道选择题&12道判断题&2道代码题)【解析,注释】
【期末不挂科-C++考前速过系列P3】大二C++第3次过程考核(20道选择题&12道判断题&2道代码题)【解析,注释】
|
6月前
|
C++
【期末不挂科-C++考前速过系列P2】大二C++第2次过程考核(20道选择题&10道判断题&3道代码题)【解析,注释】
【期末不挂科-C++考前速过系列P2】大二C++第2次过程考核(20道选择题&10道判断题&3道代码题)【解析,注释】
|
6月前
|
存储 数据安全/隐私保护 C++
【期末不挂科-C++考前速过系列P1】大二C++第1次过程考核(3道简述题&7道代码题)【解析,注释】
【期末不挂科-C++考前速过系列P1】大二C++第1次过程考核(3道简述题&7道代码题)【解析,注释】
|
6月前
|
存储 程序员 C#
揭秘C代码格式之美,助你写出'好用到哭'的示范程序!
揭秘C代码格式之美,助你写出'好用到哭'的示范程序!
32 0
|
6月前
|
小程序 机器人 程序员
Scratch3.0——助力新进程序员理解程序(案例一十四、闯迷宫)
Scratch3.0——助力新进程序员理解程序(案例一十四、闯迷宫)
61 0
|
存储 编译器 C语言
【C语言航路】第十四站:文件(下)
【C语言航路】第十四站:文件
65 0
|
存储 编译器 数据库
【C语言航路】第十四站:文件(上)
【C语言航路】第十四站:文件
65 0
|
C语言
头歌c语言实训项目-综合案例课外练习:大奖赛现场统分
头歌c语言实训项目-综合案例课外练习:大奖赛现场统分
头歌c语言实训项目-综合案例课外练习:大奖赛现场统分
|
C语言
头歌c语言实训项目-综合案例课外练习:火柴游戏
头歌c语言实训项目-综合案例课外练习:火柴游戏
147 0
|
数据库
第一遍阅读之《信息系统开发与管理》(二战)
第二次学习信息系统开发与管理,第一感觉是:必过! 信息系统开发与管理距离我们软件的具体开发很近,在我们生物专业学习过程中,有一门课程叫做《食品仪器分析》,其中有一章节的内容讲的大概是建立一个工厂的过程是怎么样的。这其中的方法和我们的《信息系统开发与管理》的内容有异曲同工之妙,我们要建立的是一个工厂,但是摆脱不了和周围事物的联系。
下一篇
无影云桌面