jaryue
2023/04/10阅读:22主题:默认主题
项目1login登录页面方案设计
需求
实现一个登录功能
实现的功能
-
注册(邮箱注册) -
登录(邮箱+密码) -
重置密码 -
查看操作记录(登录, 注册, 重置密码, 登出. 都算操作) -
登出
MySQL表
-
LoginList(注册列表)
名称 | 数据类型 |
---|---|
id(主键) | int |
name(唯一) | string |
password | string |
Email(唯一) | string |
-
SignInList(登录列表)
名称 | 数据类型 |
---|---|
id (主键) | int |
身份码 | int |
-
OperationRecord(操作列表)
名称 | 数据类型 |
---|---|
id | int |
操作 | string |
time | string |
实现方案
index页面
/index
定义一个index页面包含两个按钮login(注册)和sign up(登录) 点击login进入注册页面,点击sign up进入登录页面
login(注册)
index/login
渲染一个表单页面,用户填写好表单数据点击"注册",服务端发送post请求并发送这组表单数据
注册表单:
名称 | 数据类型 |
---|---|
name | string |
password | string |
string | |
验证码 | int |
-
先验证name是否有效与是否被使用(例如:name不能超过10个字符且字符都在ASCII中)
-
验证Email是否有效与是否被使用
-
核验password是否规范(例如:大于6位小于20位) 确认没问题后
-
先将Email发送到服务端,服务端先邮箱地址发送一封验证邮件,其中包含验证码(只能使用一次,五分钟后失效)
-
用户填写完善所有数据,并点击提交,数据发送到服务端,核验 验证码的准确性(核验失败返回验证码错误),核验成功,服务端随机生成一个不重复的int数据作为id(账号)将用户提交的表单信息和id储存到MySQL的LoginList(注册表单)中,(password需要加密储存,以保证信息的安全性)
-
向Email发送一封注册成功邮件,并返回完成注册;
(7)通过id向OperationRecord(操作列表)中储存 "注册" 操作与目前的时间

sign up(登录)
index/signup
-
邮箱密码登录
账号密码登录表单:
名称 | 数据类型 |
---|---|
string | |
password | string |
(1). 用户填写表单信息,点击登录.向服务端发送表单数据,服务端拿到表单数据去MySQL中查找,如果找不到对应的Email返回该邮箱未注册,请先注册,如果password错误返回密码错误,
(2). 核验成功,服务端随机生成一个临时的访问身份码,与id一起储存到MySQL中的SignInList(登录列表)中,再将一份发送给用户,用户拿着此身份码进入home页面
(3)通过id向OperationRecord(操作列表)中储存 "登录" 操作与目前的时间
-
验证码登录
验证码登录表单:
名称 | 数据类型 |
---|---|
string | |
验证码 | int |
(1). 用户填写Email,点击发送验证码,向服务端发送Email数据,服务端拿到数据去MySQL中查找,如果找不到对应的Email返回该邮箱未注册,请先注册,如果存在就向邮箱发送一封验证邮件
(2). 用户填写验证邮件,点击登录,服务器会核验验证码的正确性,核验成功,服务端随机生成一个临时的访问身份码,与id一起储存到MySQL中的SignInList(登录列表)中,再将一份发送给用户,用户拿着此身份码进入home页面
(3)通过id向OperationRecord(操作列表)中储存 "登录" 操作与目前的时间
用户登出或者意外掉线,服务端会删除SignInList(登录列表)中Email对应的数据.
原理图

home页面
/home
-
定义三个按钮 sign out(登出),reset password(重置密码),view(查看操作记录)
sign out(登出)
home/signout
-
通过用户的Email,删除SignInList(登录列表)对应的数据. -
回到index页面
(3)通过id向OperationRecord(操作列表)中储存 "登出" 操作与目前的时间

reset password(重置密码)
home/resetpassword 两个按钮:旧密码改密|验证码改密
1. 旧密码密码改密
(1). 验证正常登录状态:(核验身份) 检验目前用户的id与身份码信息是否在MySQL中SignInList(登录列表)存在且正确
-
核验身份失败,退回到index页面
旧密码改密表单:
名称 | 数据类型 |
---|---|
password | string |
new password | string |
new password again | string |
(2). 用户填写表单信息,点击提交.向服务端发送表单数据,服务端拿到表单数据核验new password是否规范(例如:大于6位小于20位),
(3). 检验password again密码是否相同
(4). 核验成功,服务端修改MySQL中的 LoginList(注册列表)中对应的id下的password
(5)通过id向OperationRecord(操作列表)中储存 "改密" 操作与目前的时间
2. 验证码改密
(1). 验证正常登录状态:(核验身份) 检验目前用户的id与身份码信息是否在MySQL中SignInList(登录列表)存在且正确
-
核验身份失败,退回到index页面
验证码改密表单:
名称 | 数据类型 |
---|---|
验证码 | int |
(1). 用户点击发送验证码,服务器通过用户的id获取用户的Email信息,向Email发送一封验证邮件
(2). 用户点击提交,服务端核验验证码正确性(核验失败返回验证码错误),核验成功:修改MySQL中的 LoginList(注册列表)中对应的用户的id的password;
(3)通过id向OperationRecord(操作列表)中储存 "改密" 操作与目前的时间

查询操作记录
-
身份核验:
检验目前用户的id与身份码信息是否在MySQL中SignInList(登录列表)存在且正确 -
核验无误,服务端查询OperationRecord(操作列表)中的所有id为用户id的数据,并返回给用户

作者介绍