SmartBrain后端

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里面