纳新项目总结

简介: 纳新项目总结

项目整体流程图


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


相关文章
|
8月前
|
设计模式 SpringCloudAlibaba 负载均衡
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
前几天,就有不少小伙伴问我,冰河,你星球有哪些项目呢?我想肝你星球的项目,可以吗?今天,我就给大家简单聊聊我星球里有哪些系统性的项目吧。其实,每一个项目的价值都会远超门票。
105 0
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
|
1月前
|
监控 项目管理
项目如期完成是有多难?
【4月更文挑战第5天】项目如期完成是有多难?
31 6
项目如期完成是有多难?
|
6月前
|
存储 JSON NoSQL
绝密!快速解决秋招简历项目难题的技术
绝密!快速解决秋招简历项目难题的技术
|
9月前
|
JavaScript 前端开发 程序员
珍藏多年的神网站都捐了,你需要的我都有,有了这些网站工作生活不用愁(二)
珍藏多年的神网站都捐了,你需要的我都有,有了这些网站工作生活不用愁(二)
131 0
|
10月前
|
存储 前端开发 区块链
区块链农场养成种植种树游戏系统开发方案介绍/功能详情/项目源码
区块链技术的兴起,为游戏开发带来了新的思路和玩法。其中,区块链农场养成种植种树游戏系统是一种利用区块链技术实现虚拟农场种植的游戏。玩家可以通过购买种子、种植、收获、交易等方式,体验虚拟农场的乐趣,同时也可以参与到环境保护和可持续发展的过程中。下面,我们将详细介绍区块链农场养成种植种树游戏系统开发方案、功能详情以及项目源码。
150 0
|
11月前
|
区块链 数据库
DAPP农场养成种植种树游戏系统开发(案例开发)丨区块链农场养成种植种树游戏系统开发方案介绍/功能详情/项目源码
 The blockchain system verifies all data generated during the period every 10 minutes(such as transaction records and records of when the block was edited or created),并将这些数据储存在一个新的区块上,这个区块会与前一个区块连接,从而形成一根链条。每个区块都必须包含前一区块的相关信息才能生效。
连夜整理七个开源项目:练手、毕设、接私活都不愁了
项目一:cloud-platform 学习重点: 服务鉴权中心 用户间鉴权 服务之间鉴权 springcloud组件大回顾
|
存储 测试技术 BI
|
关系型数据库 MySQL 测试技术
热饭的测开成果盘点第五期:题库管理系统工具
!! 本期要分享的是博主 基本上第一个正式开发的(带界面的)工具:软件测试题库管理系统。(大学毕业设计)距今七八年了,当时虽然被评优秀毕业设计,但是仍然被老师疯狂吐槽说我毫无艺术细胞,我真想反驳他我的国画可是拿过奖的..算了,大家尽情考古吧...
热饭的测开成果盘点第五期:题库管理系统工具
|
算法 测试技术