最近在写前端关于登录与注册相关的小Demo,觉得登录注册中的一些细节是值得我去关注并且去不断总结的,因为只有这样,才能搞清楚这些看似简单的其实比较复杂的知识点!
01|关于注册
其实注册相关的使我们最常见不过的东西了,因为是应用最广泛的东西才值得我们更加深入的去了解里面的细节,因为我们进入到一些常用的站点(例如:腾讯网,网易,百度,淘宝,京东....等等) 需要进行进一步的操作的时候,都要求你有相关的账号登录才能进行到下一步,那么相关的账号是从哪里来的,账号的注册流程又是怎么样的?于是引出关于注册的知识点:
至于注册的步骤我这里简单列举一下,然后在讲解一些前端(界面相关)与后端(服务器端)的一些操作是什么?
注册步骤如下所示:
- 进入到注册界面
- 点击输入框输入对应的账号内容 (一般账号内容是 用户名/手机号/邮箱)
- 输入 用户名/手机号/邮箱 之后 此时的页面可能会对其输入的内容进行校验(判断当前用户是否已经被注册 或者是 当前手机号已经使用过了 或是 当前输入的邮箱已经被使用过了!)操作 经过当前系统校验过后发现当前输入的内容可以注册会员之后再注册,注册号好之后就会从注册界面跳转到对应的登录界面!
- 此时你已经注册好了,之后就准备登录的事情了!
从用户的角度看注册,会觉得习以为常,但是作为程序员的我们来说,需要注重在这些看似简单的背后发生了什么,这是非常必要的,与我而言是非常有意思的!
其中说的作为程序员的我们,是不对程序员进行前后端区别的,就是程序员,也就是从前后端的角度思考注册的过程.
02|程序员眼中的注册
用户通过在 input 框中输入内容,内容的话应该会有一定的限制,比如说用户名的长度要求不能有特殊字符和手机号码的规范,以及邮箱格式的规范!
此时就需要用到正则表达式对手机号和邮箱的判断以及长度的判断,发现没问题后,会想着当前的用户名/邮箱/手机号是否已经存在了,如果存在的话,那么则会在当前的input框后面提示,当前您输入的 '用户名/邮箱/手机号'已经存在了,这时就需要使用别的没有使用过的用户名/手机号/邮箱 再重试进行注册操作!
03|关于登录
登录,虽然说只是一个'简单'的不能再'简单'的登录,只是按照input框提示 进行账号密码的输入然后点击登录或者是确认按钮之外,还有什么难点呢? 这可能是一个用户内心最真实的感受如果作为一个程序员来说呢?
04|程序员眼中的登录
刚刚说到了关于'登录',更多的是从大众的视角去看待的,虽然说看似简单,其实也只能代表用户群体的看法,一些细节并没有从登录界面直接体现出来,如果说作为从事本专业的作为'程序员'的我们来说呢?又是如何呢?
此时也是和第2点中的介绍到的程序员眼中的注册 其实是有些地方是相似的,只不过这次是登陆而并非注册,涉及到的校验的地方还是有的!
用户输入账号
后台程序对其输入的密码进行校验操作
先对其账户进行校验,如果格式有问题提示 输入的用户信息不符合要求
如果说后台判断发现输入的账户,格式上没有问题,但是没有相关的该账户的信息则会提示,使其用户注册账户信息!
用户注册完毕便按照要求进行登录操作,最后进入到站点里面!
05|登录注册中后台系统的操作简要讲解
首先作为用户的我们,进入到一个站点,例如说淘宝的购物车添加到购物车操作,后台系统则会判断当前的浏览器(Browser)中的用户的Cookie是否存在,如果没有存在就需要通过浏览器的重定向操作,到对应的登录界面.
此时的用户在登录界面,接下来用户面临的便是,登录操作,用户输入对应的用户名 然后Server服务器这边会进行内容判断,查询数据库是否存在该用户,当然之前还会通过正则表达式匹配当前输入的内容是否符合登录的用户名需求!如果不符合则会直接提示 让用户重新填写信息! 否则则会通过数据库进行检索 输入的用户名是否存在.存在的话 用户则进行下一步 不存在则提示用户 您输入的用户名不存在 如要登录 请注册相关用户再重试!
当然这一步就是注册相关的界面了,注册相关之前也是从用户登录失败需要注册的时候点击注册链接 跳转到当前页面的!
其中登陆模块中就涉及到了查数据库 进行信息校验 比对输入的用户是否存在 注册的时候也是如此!都需要进行数据库查询操作! 当然在注册过程中不仅仅是读数据库进行校验操作 更关键的是对数据库进行写入操作 写入以前从未注册过的用户信息!
06|关于Cookie
其实Cookie在英文含义中表示 曲奇饼干 但是在程序员的世界中并不是这一个含义哦
其实Cookie是服务器保存在浏览器的一小段信息,其中的每一个Cookie的大小不能够超过4kb,因此只能存储一小段信息.
当然,你可能会问,那么Cookie有什么用呢?
当然,虽然看起来没什么用,但是还是起到了一些关键作用的,Cookie主要用来分辨两个请求是否来自同一个浏览器,用来保存一些状态信息,它的常用场合如下:
- 对话（session）管理：保存登录、购物车等需要记录的信息。
- 个性化：保存用户的偏好，比如网页的字体大小、背景色等等。
- 追踪：记录和分析用户行为。
其中的Cookie包含以下几个方面的信息:
Cookie 的名字
Cookie 的值（真正的数据写在这里面）
到期时间
所属域名（默认是当前域名）
-
生效的路径（默认是当前网址）
我们一般用来设置Cookie的标志符 操作如下:请见Set-Cookie MDN
Set-Cookie: =
Set-Cookie: =; Expires=
Set-Cookie: =; Max-Age=
Set-Cookie: =; Domain=
Set-Cookie: =; Path=
Set-Cookie: =; Secure
Set-Cookie: =; HttpOnly
Set-Cookie: =; SameSite=Strict
Set-Cookie: =; SameSite=Lax
// Multiple directives are also possible, for example:
Set-Cookie: =; Domain=; Secure; HttpOnly
因为前面介绍到了Cookie中,主要是分辨两个请求是否来自同一个浏览器,就说明了不同浏览器的Cookie是不同的!
当然Cookie的存在就有点类似于门票,比如说我们在上次关闭浏览器之前就已经登陆过了,当然默认的Cookie是由有效时期的,我们第二次使用浏览器访问同样的网站的话,浏览器是不需要我们第二次登录的,因为Cookie的存在 就允许我们拿着Cookie(门票) '入场' ,如果当前没有存在上一次登录的Cookie的话,就需要重新登录!
Cookie过期时间默认是20分钟左右,因为浏览器的不同 可能Cookie的时效不同,但是其中在实践过程中发现一个问题,Cookie的值是可以被修改的 就是通过 Chrome 开发者工具的里面 切换到Application 就能看到对应的Cookie 选项是可以手动修改的,还有就是对应的javaScript是可以修改的!
我这里也只是简单地介绍登录注册中的一些小细节,具体的Cookie知识,请见:阮一峰 Cookie