快速学会简易的登录注册
李勇*
ajax、servlet
项目描述
通过ajax向servlet发送数据,再连接数据库,存入用户数据.
上传时间
2019.12.18
浏览人数
1252人
李勇*
新疆维吾尔族自治区哈密地区哈密市
Hot:3634
项目名称:简易注册登录
开发工具:Hbuilder X、eclipse、MySQL
开发人:李勇俊
1. 初始界面
登录/注册按钮绑定点击事件,当用户点击时弹出蒙层,显示登录注册界面.相信有基础的同学,都能够自己完成初始界面的布局,在此就不进行代码演示了.
2. 登录注册界面
登录界面有两种方式登录,目前只能支持账号登录.若未注册账号需先点击右下角的立即注册按钮,显示注册界面并隐藏登录界面.若已注册,但是忘记了密码,只需要点击登录遇到问题,则会跳转至找回密码的界面,进行账号的验证,由于这部分超出了登录注册的范围,在此就不做过多的介绍了,有兴趣的同学,可以在下期的作品中看到.
当注册界面显示时,用户需按照提示的正则标准注册账号.若注册成功将隐藏注册界面,显示邮箱验证界面进行绑定用户邮箱.用户输入的账号密码将会传到数据库中,在登录时查询是否存在,若存在且账号密码正确则可登录.
isum1是封装的一个正则判断,sendData1是调用ajax向接口发送数据的一个函数.
3. 验证界面
若用户想绑定自己的邮箱,需输入用户的个人邮箱,点击发送验证码.用户邮箱就会收到由4位数随机组合的数字和字符形式的验证码,输入正确后将跳转至主页,此时用户可进行登录操作.若用户不想绑定邮箱,点击右上角的关闭即可跳回主页,不影响接下来的登录操作.这可以作为忘记密码时,找回密码的一个渠道,具体将会在下次的作品中进行介绍.
4. 账号登录界面
通过用户输入的账号密码,查询数据库中是否存在此账号,若存在则对比密码是否一致,若一致则登录成功,跳转至初始界面.
为方便学习,isum2函数和注册时的isum1函数为同一正则判断,感兴趣的同学可自行修改,达到不同的效果.比如:通过正则来判断密码的强度等.
sendData2是将用户输入的账号密码,调用ajax通过接口发送到后台,与数据库中的账号密码进行匹配,从而判断是否登录成功.若匹配成功则将用户的账号密码存入缓存中,在页面刷新的同时,将右上角的登录注册按键隐藏,显示用户的账号以及默认头像.
5. 完成界面
登录跳转后,将会在右上角显示用户的账号、默认头像及注销按钮,点击注销按键后,页面将恢复至初始页面,并登出账号,重新显示登录注册按钮.当用户点击账号时,还可以跳转至个人中心,进行信息完善和修改.由于此部分不再属于登录注册范围,在此就不进行详细介绍了.
尚有不足之处
将会在日后逐渐完善
感谢您的观看
李勇*
