设置验证码

验证码是基本都是在登录页面时用的,用来拦截机器登录的
如何设置验证码
首先,我们先设置HTML代码,具体代码如下:
在这里插入图片描述

其中<img src="/Main/CreateValidCodeImage" id="validCodeImg" />
是用于获取控制器传来的验证码图片,但是由于img标签没有点击(click)事件
导致验证码的图片无法通过点击来进行切换,只能进行页面刷新来切换
src="/Main/CreateValidCodeImage"控制器的方法在下面会讲

然后,再设置JS代码,
通过ID(validCodeImg)来添加点击(click)事件,再通过prop去改变img标签的URL
具体代码如下:
在这里插入图片描述
虽然添加了点击事件,点击事件也触发了,但是验证码的图片无法通过点击来进行切换
这是因为浏览器的缓存机制,浏览器为了避免不断的去请求服务器,浏览器就会把相同路径
的图片缓存一份下来,当你设置同样的地址的时候,浏览器就会认为这是同一张图片,就会
把缓存的图片输出,但是又不能修改路径,这就导致点击事件触发了,而验证码的图片没有
切换。

虽然又不能修改路径,但是可以传一个参数进去,修改这个参数就可以
传一个参数(t)进去,然后new Date().getTime()
Date():返回当前日期和时间
getTime():返回 1970 年 1 月 1 日至今的毫秒数
就是把URL通过参数和当前日期和时间转换成的毫秒数进行拼接,
使得每一次的URL都不同,这样就可以在触发点击事件的同时,验证码的图片也能进行切换
具体代码如下:

在这里插入图片描述

在写控制器方法前,先创建一个静态类
在这里插入图片描述

静态类里有俩个方法:

在这里插入图片描述

GetRandomCode()
首先创建一个空字符串,用于放入产生数字和字母混合的随机数,用Random产生一个随机数,
然后根据intLength的大小进行for循环 ,将一个非负随机整数转换成字符串,然后除以3取余数,如果除以3余数为0,则产生数字,如果除以3余数为1,则产生大写字母,如果除以3余数为2,则产生小写字母, 然后把它们拼接在一起,最后返回字符串
Random:伪随机数生成器,一种能够产生满足某些随机性统计要求的数字序列的设备。
Char::表示为 UTF-16 代码单位
Next():返回一个非负随机整数
在这里插入图片描述

CreateImage()
首先根据指定的大小弄一张空图片,然后将验证码绘制在图片上,
再在图片上绘制10条干扰线和100个前景干扰点,然后在最外边绘制边框
然后将图转保存到内存流中,最后将流内容写入byte数组返回
Bitmap: 封装 GDI+ 位图,此位图由图形图像及其特性的像素数据组成
Graphics: 封装一个 GDI+ 绘图图面
Clear:清除整个绘图面并以指定背景色填充
SolidBrush:定义单色画笔
DrawString:在指定位置并且用指定的 Brush 和 Font 对象绘制指定的文本字符串。
DrawLine:绘制一条连接由坐标对指定的两个点的线条。
MemoryStream:创建其支持存储区为内存的流。
Save:将此图像以指定的格式保存到指定的流中

在这里插入图片描述

扫描二维码关注公众号,回复: 5929849 查看本文章

控制器方法
在这里插入图片描述
以上内容都在Visual Studio 上完成

猜你喜欢

转载自blog.csdn.net/weixin_44561804/article/details/89366021