一个简单的后台与数据库交互的登录与注册[sql注入处理,以及MD5加密]

一、工具：

vs2013[因为我现在用的也是2013，版本随便你自己开心]

sql2008[准备过久升级]

二、用到的语言:

HTML+CSS+Jquery+Ajax+sqlserver

HTML[相当于一个人]

css[要穿衣服]

Jquery[人要做一些动作,Jquery是对js一些常用方法的封装]

Ajax[建立前端页面与数据库的交互]

sqlserver[数据库]

三、过程

html部分代码：

 1 <body> 2   <div id="header"> 3     <div id="header_con"> 4       <a href="javascript:;" onclick="showRegBox()">注册</a> 5       <a href="javascript:;" onclick="ShowLoginBox()">登录</a> 6     </div> 7   </div> 8   <div id="loginBox"> 9     <div class="login_Item">10       <input type="text" id="TxtUserName" placeholder="手机邮箱/用户名" />11     </div>12     <div class="login_Item"><input type="password" id="TxtPwd" placeholder="请输入密码" /></div>13     <div class="login_Item"><a href="javascript:;" onclick="login()">登录</a></div>14   </div>15   <div id="Regbox">16     <div class="login_Item"><input type="text" id="TxtRegUserName" placeholder="手机邮箱/用户名" /></div>17     <div class="login_Item"><input type="password" id="TxtRegPwd" placeholder="请输入密码" /></div>18     <div class="login_Item"><input type="text" id="TxtRegqq" placeholder="QQ号"/></div>19     <div class="login_Item"><input type="text" id="TxtRegEmail" placeholder="邮箱" /></div>20     <div class="login_Item"><a href="javascript:;" onclick="Reglogin()">注册</a></div>21     </div>22 </body>

css代码：

 1 * { 2   margin:0px; 3   padding:0px; 4 } 5 #header { 6   height:40px; 7   width:100%; 8   background:#000000; 9 }10 11 a {12  text-decoration:none;13 }14 #header a {15   float:right;16   color:#ffffff;17   line-height:40px;18   margin-left:10px;19 }20 #header_con {21   width:1200px;22   margin:0px auto;23 }24 .login_Item {25   margin-left:20px;26 }27 .login_Item input {28   width:348px;29   height:40px;30   margin-top:10px;31   border:solid 1px #04a6f9;32 }33 .login_Item a {34   margin-top:20px;35   width:350px;36   height:40px;37   display:block;38   background:#04a6f9;39   color:#ffffff;40   line-height:40px;41   text-align:center;42 }43 #loginBox {44   display:none;/*//隐藏状态*/45   margin:0px auto;46 }47 48 #Regbox {49   display:none;50 }

js代码：[用了layer插件]

 1 /// <reference path="_references.js" /> 2 /// <reference path="jquery.md5.js" /> 3  4 function ShowLoginBox() 5 { 6   layer.open({ 7     type: 1, 8     title: "用户登录", 9     //设置div大小10     area: ["390px", "300px"],11     content: $("#loginBox")12   });13 }14 15 function login()16 {17   //1.获取到用户名和密码18   var username = $.trim($("#TxtUserName").val());19   var pwd =$.md5( $.trim($("#TxtPwd").val()));20   //2.判断用户名和密码是否为空21   if (username == "" || pwd == "") {22     layer.alert("用户名或密码不能为空！",23       {24         title: "提示:",25         icon: 526       });27   }28   else29   {30     $.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"cmd":"login" }, function (data)31     {32       if (data == "登录成功") {33         //layer.alert("登录成功！",34         layer.msg("登录成功！",35           {36             //title: "提示:",37             icon: 638           });39       }40       else41       {42         layer.msg("用户名或密码不正确",43           {44             //title: "提示:",45             icon: 546           });47       }48     });49   }50 }51 52 function showRegBox()53 {54   layer.open({55     type:1,56     title:"注册",57     area: ["390px", "350px;"],58     //div的内容59     content:$("#Regbox")60   });61 }62 63 function Reglogin()64 {65   //1.获取到输入的内容66   var username = $.trim($("#TxtRegUserName").val());67   var pwd =$.md5($.trim($("#TxtRegPwd").val()));68   var qq = $.trim($("#TxtRegqq").val());69   var email = $.trim($("#TxtRegEmail").val());70   //并做判断71   if (username == "" || pwd == "") {72     layer.msg("用户名或密码不能为空！");73   }74   else75   {//cmd用做标示，判断是注册还是登录76     $.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"qq":qq,"email":email,"cmd": "reg" }, function (data)77     {78       if (data == "注册成功") {79         layer.msg("恭喜你，注册成功！",80           {81             icon: 682           });83       }84       else85       {86         layer.msg(data,87           {88             icon:589           });90       }91     });92   }93 }

ajax代码：

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Data.SqlClient; 7  8 namespace baidu20160707 9 { 10   /// <summary> 11   /// Handler1 的摘要说明 12   /// </summary> 13   public class Handler1 : IHttpHandler 14   { 15     public HttpContext context; 16     public string strResult = ""; 17     public void ProcessRequest(HttpContext context) 18     { 19       this.context = context; 20       string cmd=context.Request.Form["cmd"]; 21       switch (cmd) 22       { 23         case "login": 24           strResult = loginAjax(); 25           break; 26         case "reg": 27           strResult = RegAjax(); 28           break; 29       } 30       context.Response.Write(strResult); 31     } 32  33     //登录 34     public string loginAjax() 35     { 36       //1.接收传过来的用户名和密码 37       string username = context.Request.Form["username"]; 38       //类名调用方法，32位，再做加盐处理 39       string pwd =Md5Class.GetMD5( context.Request.Form["pwd"]+"**玩意",32); 40       //所在对应的id是否存在 41       //string strsql = string.Format("select id from Users where UserName='{0}' and Pwd='{1}'", username, pwd); 42       //sql注入处理1.@传参的方式,, username, pwd不要，'分号也不要' 43       string strsql = string.Format("select id from Users where UserName=@UserName and Pwd=@Pwd"); 44       //sql注入处理2.调用SqlParameter[]数组对数据进行过滤 45       SqlParameter[] paras = new SqlParameter[]  46       { 47         new SqlParameter("@UserName",SqlDbType.NVarChar), 48         new SqlParameter("@Pwd",SqlDbType.NVarChar) 49       }; 50      //sql注入处理3.指定它的值 51       paras[0].Value = username; 52       paras[1].Value = pwd; 53       //sql注入处理,4.不能忘记把数组对象传进去 54       if (SqlHelper.Exists(strsql,paras)) 55       { 56         //context.Response.Write("登录成功"); 57         return "登录成功"; 58       } 59       else 60       { 61         //context.Response.Write("用户名或密码不正确"); 62         return "用户名或密码不正确"; 63       } 64     } 65  66     //注册 67     public string RegAjax() 68     { 69       //接收传过来的用户名和密码 70       string username=context.Request.Form["username"]; 71       string pwd=Md5Class.GetMD5(context.Request.Form["pwd"]+"**玩意",32); 72       string qq=context.Request.Form["qq"]; 73       string email = context.Request.Form["email"]; 74       //string strsql1 = string.Format("select id from Users where UserName='{0}' ",username,pwd); 75       string strsql1 = string.Format("select id from Users where UserName=@UserName "); 76       SqlParameter[] paras1 = new SqlParameter[]  77       { 78         new SqlParameter("@UserName",SqlDbType.NVarChar) 79       }; 80       paras1[0].Value = username; 81       if (SqlHelper.Exists(strsql1, paras1)) 82       //if (SqlHelper.Exists(strsql1)) 83       { 84         return "该用户已注册，请重新输入"; 85       } 86       else 87       { 88         //不存在就注册 89         //string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values('{0}','{1}','{2}','{3}')", username, pwd, qq, email); 90         //, username, pwd, qq, email 91         string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values(@UserName,@Pwd,@QQ,@eMail)"); 92         SqlParameter[] paras2 = new SqlParameter[]  93         { 94           new SqlParameter("@UserName",SqlDbType.NVarChar), 95           new SqlParameter("@Pwd",SqlDbType.NVarChar), 96           new SqlParameter("@QQ",SqlDbType.NVarChar), 97           new SqlParameter("@eMail",SqlDbType.NVarChar), 98         }; 99         paras2[0].Value = username;100         paras2[1].Value = pwd;101         paras2[2].Value = qq;102         paras2[3].Value = email;103         //插入处理104         if (SqlHelper.ExecteNonQueryText(strsql2, paras2) > 0)105         {106           return "注册成功";107         }108         else109         {110           return "注册失败";111         }112       }113     }114     public bool IsReusable115     {116       get117       {118         return false;119       }120     }121   }122 }

效果：点击登录弹出登录框，点击注册，弹出注册框

四、MD5加密算法

MD5加密算法：大多数情况下，用户的密码是存储在数据库中的，如果不采取任何的保密措施，以明文的方式保存密码，查找数据库的人员就可以轻松获取用户的信息，所以为了增加安全性，对数据进行加密是必要的。MD5,是一种用于产生数字签名的单项散列算法，它以512位分组来处理输入的信息，且每一分组又被划分为16位子分组，经过一系列处理，算法的输入由4个32位分组级联后生成一个128位散列值。

没有加密之前的明文通过解析的效果：