MVC项目登录页面

MVC项目登录页面

MVC项目登录页面

在现在的项目中登录页面和账号密码都是必须有的，因此登录页面在我们项目中是必不可少的，而应该正常的登录页面不仅需要账号和密码还要有正常的验证码输入才行。

1. 生成验证码和验证图片
   在这个过程中需要导入数字随机选择的一个类（ValidCodeUtils.cs）到控制器的Common文件夹里面，这个方法使用的时候还要在使用的控制器上面引入。

using FJDPXT.Common;

ValidCodeUtils.cs中的方法：

 public static string GetRandomCode(int intLength)
        {
            /*产生数字和密码混合的随机数*/
            string strReturn = string.Empty;
            Random random = new Random();//随机数
            //Random产生随机数的方法
            for (int i = 0; i < intLength; i++)
            {
                char cRerult;
                int intRandom = random.Next();//产生一个非负随机整数
                /*根据当前随机数来确定字符串*/
                //intRandom % 3 获取的是intRandom/3 得到的余数
                if (intRandom % 3 == 0)
                {
                    //产生数字
                    //位数来产生数字
                    cRerult = (char)(0x30 + (intRandom % 10));
                }
                else if (intRandom % 3 == 1)
                {
                    //位数产生大写字母:大写字符 65-97 A 65
                    //68 D  25 Z
                    cRerult = (char)(0x41 + (intRandom % 0x1a));
                }
                else
                {
                    //余数为2
                    //产生小写字母 98-116
                    cRerult = (char)(0x61 + (intRandom % 0x1a));
                }
                strReturn += cRerult.ToString();
            }
            return strReturn;
        }

在这个类里面不但有生成随机数字的方法还要有生成背景图片的方法。

 public static byte[] CreateImage(string strRandom)
        {
            //新增图片
            Bitmap newBitmap = new Bitmap(strRandom.Length * 20, 38);

            Graphics g = Graphics.FromImage(newBitmap);
            g.Clear(Color.White);
            //在图片上绘制文字
            SolidBrush solidBrush = new SolidBrush(Color.Red);
            g.DrawString(strRandom, new Font("Aril", 18), solidBrush, 12, 4);
            //在图片上绘制干扰线
            Random random = new Random();
            for (int i = 0; i < 10; i++)
            {
                //产生一条线，并绘制到画布。 起始点（x,y）  总结点
                int x1 = random.Next(newBitmap.Width);
                int y1 = random.Next(newBitmap.Height);
                int x2 = random.Next(newBitmap.Width);
                int y2 = random.Next(newBitmap.Height);
                g.DrawLine(new Pen(Color.DarkGray), x1, y1, x2, y2);
            }
            //绘制图片的前景干扰点
            for (int i = 0; i < 100; i++)
            {
                int x = random.Next(newBitmap.Width);
                int y = random.Next(newBitmap.Height);
                newBitmap.SetPixel(x, y, Color.FromArgb(random.Next()));
            }
            //在最外边绘制边框
            g.DrawRectangle(new Pen(Color.Blue), 0, 0, newBitmap.Width, newBitmap.Height);
            g.DrawRectangle(new Pen(Color.Blue), -1, -1, newBitmap.Width, newBitmap.Height);
            //将图转保存到内存流中
            MemoryStream ms = new MemoryStream();
            newBitmap.Save(ms, ImageFormat.Jpeg);
            return ms.ToArray();//将流内容写入byte数组返回
        }

然后回到控制器里面进行操作

 public ActionResult CreateValidImage()
        {
            //1-生成一个长度为5的字符串作为验证码
            string validCode = ValidCodeUtils.GetRandomCode(5);//括号里面是自定义几位随机数的.
            //2-根据生成的验证码的字符串去生成验证图片
            byte[] validImage = ValidCodeUtils.CreateImage(validCode);
            //在计算机中所有的文件都是二进制的,保存东西都是0,1,0,1构成,byte表示二进制,文件比较多所以用数组.
            //3-将验证码的字符串保存到Session.
            //无状态,网络服务器无法记住,因此在服务器运行时代码自动创建空间保存,下次再来时用来匹配从而记住.
            Session["validCode"] = validCode;//Session["validCode"]名字可以随便来符合规范就行
            //4-将验证图片返回到页面
            //File:文件 文件的数据:validImage 文件的类型:image/jpeg;
            return File(validImage,"image/jpeg");
            //return null;//一开始避免上面报错,后来修改成4-将验证图片返回到页面的内容.
        }

控制器操作完了之后到登录页面(Login)里面引用
<img src="@Url.Content("~/Main/CreateValidImage")" id=“validCodeImage”/>
之后在登录页面(Login)里面编写刷新验证图片的代码.
注意:修改属性src，src属于img标签的一个固有属性,两个选择attr和prop针对固有属性在高版本的jquery中推荐使用prop

 		//刷新验证图片
        function refreshValidCodeImage() {
            //修改属性src src属于img标签的一个固有属性,两个选择attr和prop针对固有属性在高版本的jquery中推荐使用prop
            //$("#validCodeImage").prop("src", "@Url.Content("~/Main/CreateValidImage")");//没效果,因为切换的图片都是浏览器的缓存,根本没有请求浏览器的后台.可以在控制器中断点了解,在浏览器中相同路径的图片它就是认为是一张图片
            $("#validCodeImage").prop("src", "@Url.Content("~/Main/CreateValidImage?t=")" + new Date().getTime());
            //所以欺骗浏览器加?代表加参数,随便给一个参数名称t,=,+new Date().getTime(); getTime()获取毫美的字符串.//因为每次点击时间肯定不同所以使用时间.
            //t参数的作用:为了避免浏览器的缓存图片.
        }

window.location.href = “@Url.Content(”/Main/Main")";//比较严谨的写法
checkbox使用val()没有意义,
第一种使用原生js代码拿.get(0).checked;
第二种是使用prop(“checked”);attr属性在这里不行,其他地方可以,因为attr在高版本兼容性不行
eg:

var rememberMe = $('#fmLogin [name="rememberMe"]').get(0).checked; //记住密码
var rememberMe = $('#fmLogin [name ="rememberMe"]').prop(":checked");

这样一个简单的登录页面验证码自动生成就完成了。