Smart Brain后端的主要组成部分
首先需要估计有哪些endpoint
1.res=this is working 确认是否成功在工作
2.sign in=>POST = success/fail 登录进去提交表单,所以用POST
3.register=>POST=user 注册提供新的用户信息
4./profile: user Id–>GET=user 需要看登录进去是谁
5./image PUT–>user 需要统计查过多少张图
Sign in 和 Register
Sign in需要找到数据库中是否有相符合的邮箱和对应密码。
TypeError: Cannot read property ‘email’ of undefined
前端发来的数据是JSON,后端需要用 express middleware:用body_parser在中间处理一下request
需要注意的是,在用POSTMAN做测试时,需要选好发送什么类型的数据,目前我们选的是JSON
注册页将用户三个信息:姓名,邮箱,密码发送至服务端。然后服务端将该用户加入数据库
/Profile: id
Profile:id 进入ID界面后就能得到用户信息。需要遍历数据库,找到对应的ID,返回该user的所有信息。
var,const,let的区别
这三个都是JS用来声明变量的关键字。 const和let都是ES6新增的。
(1)const:声明的是一个只读变量,声明之后不允许改变其值,且必须初始化。对于boolean这种原始值,就是不能变,是常量。但如果是对象,object,array里面内容可以改变
(2)let:不允许在同一作用域中重复声明。
(3)var:允许在同一作用域中重复声明。
/image
每个人检测的图片数目,每个ID出现一次,他的entries就加上1。
Storing User Passwords
bcrypt-nodejs
保证用户的信息安全,在存储密码时不能直接储存。
在register页面时,密码会自动对应生成的一段字符串,就算两次输入一样的,字符窜也会不一样。
在sign in页面时需要检测密码是否能对上,compare函数比较密码和字符串能否对上
Connecting to Front End
同时运行前端和后端,但是他们port相同所以会报错,因此其中一个port要改一下。我们将服务器改为3001port。
cors package
cors 是跨域中间件。前端与后端端口号不同,所以需要跨域。
在server.js中用cors来实现跨域
上传登陆信息
之前SignIn.js 我们使用的是const,而现在涉及到状态,就要改成 class SignIn
目前需要上传邮箱和密码,所以一共有两个smart components: Email 和 Password
下面两个input,email和password,设置onChange,这样可以更新状态
下面SIGNIN 按钮,onclick也需要换成onSubmit,然后之前页面转换就放进 onsubmit里面
在onSubmitSignIn中添加fetch,数据传输给服务器,一般fetch默认是GET,所以需要写好method
只有成功登陆才会跳转界面,用.then(),只有回复 success 才能进入’home’界面
在登陆时,有时会出现到了home page又闪退的bug。主要是会强制浏览器重载。需要加上
上传注册信息
与登录页面类似,这里需要有三个smart components:name,email,password
剩下的INPUT也需要加上onChange或者onClick
在登录进去后,有一个user profile界面。所以回到APP.js,我们在constructor里需要加入user信息,并且加上一个loadUser,这样可以更新登录用户的信息。
之前服务器Register会返回注册用户,在Register页面里面,提交时也更新用户信息。
并且不要忘了,将loadUser给register
目前SIGN IN 和 register的前后端已经成功连接上,服务器可以收到来自前端的request,前端也收到对应 response。
Update user profile
每次输入一个图片,需要更新User 的entries。点击提交图片一次,就会增加一次entries,所以需要在onButtomSubmit里面加上fetch(),这次是把登陆的ID发送过去,服务器确认ID后,该用户的entries加1。并返回entries值
App.js:
服务器:
值得注意的是,注册进去可以计数,登陆不行,因为登陆中没有loadUser, id没有更新,id默认为‘ ’,服务端只会返回404。
在后面database设置以后,server.js中signin也会返回用户数据,加上LoadUser,sign in也可以计数了。
计数显示在rank.js里面