模拟注册登录＋cookie

下面是正文!

项目的源代码及使用方法请点击这里. 运行demo需要先安装

这篇文章不会贴上全部代码, 只会说下思路. 具体实现还请到github库中看源码.

基本结构

: 首页

: 登录页面

: 注册页面

: 服务器

: 模拟数据库, 实质上是一个数组, 每个数组项是一个对象, 表示一个用户

用户可以直接进入首页, 通过登录的方式进入首页. 通过登录的方式进入首页时设置了, 此时可以再首页看到用户的邮箱.

用户注册的账号会存储在文件中. 当用户以相同的邮箱注册时会提示用户已注册. 注册时也会验证邮箱的有效性和密码的一致性.

服务器主要实现路由操作. 当使用不同的路由时采取不同的动作.

首页index.html

由于是模拟登录, 因此首页只会展示用户的邮箱(通过). 若没有, 则不显示邮箱

是一个占位符, 程序在后台运行. 当用户登录时, 设置为用户邮箱

注册页sign_up.html

我们在进行注册的时候需要输入密码, 而且还要确认这个密码. 因此结构如下:

对于邮箱, 密码等我们需要进行检验, 比如:

邮箱是否有效, 有符

邮箱是否未注册.

两次密码是否输入一致

全部都是必填项.

若全部复合条件, 则使用方法向服务器发送请求.

方法后面可以接的方法来根据服务器返回的数据()显示结果

登录页sign_in.html

这个页面时登录页面, 因此只需要邮箱和密码就可以了

当然还是需要通过返回的数据进行验证:

账户是否存在

密码是否正确

全部为必填项

服务器server.js

主要实现了以下路由

因为请求体不是一次性返送的, 每次传给服务器的数据大小有要求, 因此我们需要服务器接收完整的请求体才能做出下一步动作. 在中实现完整读取请求体的函数.

我们已经知道的大致架构. 比较重要的是两个处理, 一个是用户注册时的处理, 一个是用户登录时的处理.

用户注册

当用户进行注册时, 首先会自己检测必填项是否已填写. 然后通过方法将用户填入的邮箱和密码信息发送给服务器. 服务器会一次进行以下工作:

获取请求体(邮箱, 密码), 注意要解码

邮箱检测(符号)及密码一致性检验(即两次密码是否相同)

遍历文件, 检测是否未注册

返回响应, 若已注册通知用户重新填写, 否则告诉用户注册成功

当注册成功时, 数据会写入文件.

假设我们注册的是, 密码为:. 那么我们就会在db/users文件中看到如下账号:

用户登录

假设用户已经注册好账户了, 在登录页输入邮箱()和密码(). 点击登录会做一下事情:

检查必填项

向服务器发送响应

遍历文件, 检测是否存在用户

返回响应, 若不存在则告诉用户错误, 否则先设置再转向登录页

读取请求体中的信息并显示出来

当直接进入首页时, 不会显示信息.

cookie

cookie上文中简单提到了. 用户登录时会设置cookie, 登录成功读取cookie值并显示.

当点击sign_in.html页面的登录按钮时, , server.js服务器会将设置cookie

服务器将设置的cookie返回给浏览器, 因为邮箱及密码没有问题则再发送一次包含cookie的请求, 这次请求是告诉服务器我要进入登录页.

登录页会取出请求体中的cookie并显示.

当用户直接进入index.html页面而不是通过登录方式进入时, 服务器就不会设置cookie. 此时就不显示cookie, 给占位符一个统一的名称即可.