一个验证码图片，你能提取那些知识？

开发工具与关键技术：VS ； 验证码图片插件，session，cookie
作者：刘佳明
撰写时间：2019年 4 月 11 日

一个验证码图片，你能想到那些知识点？
验证码图片是如何生成的？需要使用什么插件？如何去使用这些插件？点击验证码图片时，验证码图片中的验证会改变，这是为什么？
本篇文章将会简单的为各位看客阐述关于一个验证码图片所使用的相关知识点；

（注：源代码及资料，插件来源于老师的课件！！！！）
登录，就是通过对用户输入的账户、密码进行记录，和后台数据库的 数据进行比对验证；
验证的原理也是如此；
验证码有两种；一种是根据用户所填写的手机号码，发送短信验证码，
另一种简单点的；就是根据验证图片中 的字母及数字段来实现；
那么登录中的验证码图片又是怎么实现的呢？
第一步：

想要实现一个图片验证码的前提；你需要准备好关于验证码图片的相关插件；
在本案例中；为以下两个相关文件；（网络上相关的验证图片插件方法有很多，重要的是文件中封装的方法，）

其中，所定义的方法；获得随机字符串、根据字符串创建验证码、对获取的字符串进行加密
将以上两个文件放置到对应的文件夹后；在进行引用；

将方法引用完毕后，即可开始进行登录的代码编辑；
本次编辑使用的是Visual Studio 2015，简称VS；
对于所完成的效果图：

在操作完一系列MVC的流程后，在控制器中定义一个验证码图片的方法：

public ActionResult CreateValidCodeImage()
        {
            //1、生成长度为5的随机的验证码字符串 
            string strRandom = ValidCodeUtils.GetRandomCode(4);
            //2、根据生成的验证码字符串生成 验证码图片
            byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);
            //3、将验证码字符串存入session中 key值为
            Session["validCode"] = strRandom;
            //4、把图片返回到视图（文件内容，文件格式）；
            return File(imgByte, @"image/jpeg");
        }

Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

简单的来说，session、cookie都是用于记录的方法，但需要注意两者间编辑需求，记录地点，便利性的区别！！！

 <div class="form-group  form-row">
                                    <label class="sr-only" for="validCode">
                                        验证码
                                    </label>
                                    <div class="col-12 ">
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <div class="input-group-text"><i class="fas fa-fw fa-key"></i></div>
                                            </div>
                                            <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>
                                        </div>
                                    </div>
                                </div>   
        $(function () {// new Date().getTime()记录当前时间，实现每次点击刷新图片！！！
            $("#validCodeImg").click(function () {
                $(this).prop("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
                //$("#validCodeImg").attr("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
            });
        });