实现项目的验证登录效果

在这里插入图片描述
分析功能实现的思路和相关代码图:
 实现登陆页面的验证码图片的生成,并把验证码串放入session方法:
1、新建Common目录,拷贝验证码图片和验证码生成工具类ValidCodeUtils.cs
2、使用ValidCodeUtils生成验证码字符串和图片
3、将验证码字符串存入session中
4、把图片返回到视图 (图片的返回必须是使用file文件返回,不可以使用json返回)
在这里插入图片描述
5、修改登录页面 验证码图片的路径为 /Main/CreateValidCodeImage

< input type=“text” name=“validCode” id=“validCode” value="" class=“form-control” placeholder=“验证码” />
< div class=“input-group-addon p-0”>
< img src="/Main/CreateValidCodeImage" width=“100” height=“38” id=“validCodeImg” />
< /div>

 实现验证码图片点击更换功能的方法:
1、写验证码图片的点击事件,在点击事件中修改验证码图片的url
2、路径添加当前时间作为参数的作用(解决浏览器缓存机制)
代码:

$("#validCodeImg").click(function () {
$("#validCodeImg").attr(“src”, “/Main/CreateValidCodeImage?t=” + new Date().getTime());
});

 点击登录按钮登录并跳转页面
在这里插入图片描述

 根据浏览器大小调整ifream大小(主页面reseize事件设置子页面高度)
代码:

function reSetSize() {
var windowsHeight = window.innerHeight;
$("#content").height((windowsHeight - 110) + “px”);
}

 序列化表单
代码:
var formDate = $("#fmLogin").serializeArray();
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

 防止页面循环嵌套页面
(1) 在登录页面添加判断
代码:

if (window.top.location.href != window.location.href)
{ window.top.location.href = window.location.href; }
(2)清空浏览器的缓存记录
(3)看本身是否为嵌套页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
 Session机制和Cookie机制
定义:
Cookie是弥补HTTP协议无状态的不足、采用Cookie来跟踪会话的一种机制。
Session是服务器端使用的一种记录客户端状态的机制
对比:
Cookie机制实现方式是把账号按照一定的规则加密后,连同账号一块保存到Cookie中。下次访问时只需要判断账号的加密规则是否正确即可。
Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而Session保存在服务器上。客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。这就是Session。

猜你喜欢

转载自blog.csdn.net/weixin_44543219/article/details/89571460