ASP.NET MVC+Easyui 实现验证码登录

效果预览:

点击验证码图片，验证码会及时改变。

1.创建实现验证码图片的工具类（ValidCodeUtils.cs）

	/// <summary>
    /// 验证码
    /// </summary>
    public static class ValidCodeUtils
    {
        /// <summary>
        /// 获得随机字符串
        /// </summary>
        /// <param name="intLength">随机数的长度</param>
        /// <returns>随机数字符串</returns>
        public static string GetRandomCode(int intLength)
        {
            /*产生数字和密码混合的随机数*/
            string strReturn = string.Empty;
            Random random = new 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;
        }

        /// <summary>
        /// 根据字符串创建验证码图片 
        /// </summary>
        /// <param name="strRandom">字符串</param>
        /// <returns>图片的二进制数组</returns>
        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数组返回
        }
    }

2.Web.Config连接数据库（这里是连接的是本地数据库）

Data Source：连接数据源
Initial Catalog：连接的数据库名称
User ID：用户名
Password：密码
max pool size：最大连接池，默认为100，最大为32767

<connectionStrings>
    <add name="connString" connectionString="Data Source=.;Initial Catalog=SMDBWeb;User ID=sa;Password=123;max pool size=512" providerName="System.Data.SqlClient" />
  </connectionStrings>

3.SQLHelper.cs（通用数据访问类）

   /// <summary>
   /// 通用数据访问类
   /// </summary>
   public class SQLHelper
   {
       //定义连接字符串
       private static string connString = ConfigurationManager.ConnectionStrings["connString"].ToString();
       
       //执行增删改
       public static int ExecuteNonQuery(string sql, params SqlParameter[] pms)
       {
           using (SqlConnection con = new SqlConnection(connString))
           {
               using (SqlCommand cmd = new SqlCommand(sql, con))
               {

                   if (pms != null)
                   {
                       cmd.Parameters.AddRange(pms);

                   }
                   con.Open();
                   return cmd.ExecuteNonQuery();
               }
           }
       }
       //执行返回SqlDataReader
       public static SqlDataReader ExecuteReader(string sql,  params SqlParameter[] pms)
       {
           SqlConnection con = new SqlConnection(connString);

           using (SqlCommand cmd = new SqlCommand(sql, con))
           {
               if (pms != null)
               {
                   cmd.Parameters.AddRange(pms);
               }
               try
               {
                   con.Open();
                   return cmd.ExecuteReader(CommandBehavior.CloseConnection);
               }
               catch (Exception)
               {
                   con.Close();
                   con.Dispose();
                   throw;
               }

           }

       }
       //执行返回单个值：第一列第一行
       public static object ExecuteScalar(string sql, params SqlParameter[] pms)
       {
           using (SqlConnection con = new SqlConnection(connString))
           {
               using (SqlCommand cmd = new SqlCommand(sql, con))
               {
                   if (pms != null)
                   {
                       cmd.Parameters.AddRange(pms);
                   }
                   con.Open();
                   return cmd.ExecuteScalar();
               }
           }
       }
       //执行返回datatable
       public static DataTable ExecuteDataTable(string sql, params SqlParameter[] pms)
       {
           DataTable dt = new DataTable();
           using (SqlDataAdapter adapter = new SqlDataAdapter(sql, connString))
           {
               if (pms != null)
               {
                   adapter.SelectCommand.Parameters.AddRange(pms);

               }
               adapter.Fill(dt);
               return dt;
           }

       }
   }

4.实体类（Sys_user.cs）

	/// <summary>
    /// 用户
    /// </summary>
    public class Sys_user
    {
        public int userid { get; set; }
        public string username { get; set; }
        public string password { get; set; }
    }

5.Service层（Sys_userService.cs）

public class Sys_userService
    {
        //登录
        public Sys_user Login(string username,string password)
        {
            Sys_user sys_User = null;
            //编写Sql语句
            string sql = " select userid,username,password" +
                         " from sys_user" +
                         " where username=@username and password=@password";
             //编写参数
            SqlParameter[] pms = { new SqlParameter("username", username), new SqlParameter("password", password) };
            //调用SQLHelper类中的查询方法
            SqlDataReader reader = SQLHelper.ExecuteReader(sql, pms);
            if (reader.Read())
            {
                sys_User = new Sys_user();
                sys_User.userid =Convert.ToInt32(reader["userid"]);
                sys_User.username = reader["username"].ToString();
                sys_User.password = reader["password"].ToString();
            }
            reader.Close();
            return sys_User;
        }
    }

6.登录页面（Login.cshtml）

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="~/Content/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/themes/icon.css">
    <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="margin:200px 400px;">
        <form action="/Sys_user/Login" method="post" id="loginForm">
            <div class="easyui-panel" title="Login" style="width:100%;max-width:400px;padding:30px 60px;">
                <div style="margin-bottom:10px">
                    <input class="easyui-textbox" required name="username" label="工号：" labelPosition="left" prompt="请输入工号" style="width:250px;">
                </div>
                <div style="margin-bottom:10px">
                    <input class="easyui-passwordbox" required name="password" label="密码：" labelPosition="left" prompt="请输入密码" iconWidth="28" style="width:250px;">
                </div>
                <div style="margin-bottom:10px">
                    <input type="text" name="validCode" id="validCode" label="验证码：" labelPosition="left" class="easyui-textbox" prompt="验证码" />
                    <img style="position:relative;top:10px;" src="/Sys_user/CreateValidCodeImage" width="80" height="30" id="validCodeImg" />
                </div>
                @if (Session["username"] != null && Session["username"].ToString() != "")
                {
                    <div style="margin-bottom:10px;">
                        <button onclick="login()" disabled class="easyui-linkbutton" style="width:250px;">登录</button>
                    </div>
                }
                else
                {
                    <div style="margin-bottom:10px;">
                        <button onclick="login()" class="easyui-linkbutton" style="width:250px;">登录</button>
                    </div>
                }
                <div style="text-align:center">
                    <a href="/Sys_user/Register">没有账号？去注册</a>
                </div>
            </div>
        </form>
        
        <input type="hidden" value="@ViewData["info"]" id="hiddenInfo" />
    </div>
</body>
</html>

jQuery代码

	<script type="text/javascript">
        $(function () {
            var info = $('#hiddenInfo').val();
            if (info.length > 0) {
                alert(info);
            }

            //验证码换图
            $('#validCodeImg').click(function () {
                //拼接一个参数t，后面加上时间（以毫秒计），每一毫秒更改一次验证码切换的路径。从而克服缓存机制的干扰
                $(this).prop("src", "/Sys_user/CreateValidCodeImage?t=" + new Date().getTime());
            });
        });

        //登录
        function login() {
            var validCodeImg = $('#validCode').val();
            //判断是否填写数据
            if (validCodeImg != null && validCodeImg != "" && validCodeImg != undefined) {
                $('#loginForm').submit();
            }
            else {
                alert("请输入验证码！");
            }
        }
    </script>

7.Controller层（Sys_userController.cs）

	public class Sys_userController : Controller
    {
        //实例化Sys_userService
        private Sys_userService sys_userService = new Sys_userService();
        // GET: Sys_user
        public ActionResult Index()
        {
            return View("Login");
        }

        //生成验证码
        public ActionResult CreateValidCodeImage()
        {
            //1.生成长度为4的随机验证码字符串
            var strRandom = ValidCodeUtils.GetRandomCode(4);
            //2.根据生成的验证码字符串生成验证码图片
            byte[] byteImg = ValidCodeUtils.CreateImage(strRandom);
            //3.将验证码字符串存入session中
            Session["validCode"] = strRandom;
            //4.将图片返回到视图
            return File(byteImg, @"image/jpeg");
        }

        //登录
        public ActionResult Login(Sys_user sys_user, string validCode)
        {
            string sessionValidCode = Session["validCode"].ToString();
            //比较验证码，忽略大小写
            if (sessionValidCode.Equals(validCode, StringComparison.CurrentCultureIgnoreCase))
            {
                sys_user.password = new MD5Util().JM(sys_user.password);
                sys_user = sys_userService.Login(sys_user.username,sys_user.password);
                if (sys_user != null)
                {
                	//登录成功，去到想去的页面即可
                    Session["username"] = sys_user.username;
                    return View("Index");
                }
                else
                {
                    ViewData["info"] = "工号或密码错误，请重新登录!";
                    return View("Login");
                }
            }
            else
            {
                ViewData["info"] = "验证码输入错误!";
                return View("Login");
            }
        }
    }

本文完，希望对你有帮助！