首页 > > 网页制作 > css >

一个简单的后台与数据库交互的登录与注册[sql注…

2018-06-23 23:28:59来源：未知阅读 ()

一、工具：

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: 5
26             });
27     }
28     else
29     {
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: 6
38                     });
39             }
40             else
41             {
42                 layer.msg("用户名或密码不正确",
43                     {
44                         //title: "提示:",
45                         icon: 5
46                     });
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     else
75     {//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: 6
82                     });
83             }
84             else
85             {
86                 layer.msg(data,
87                     {
88                         icon:5
89                     });
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                 else
109                 {
110                     return "注册失败";
111                 }
112             }
113         }
114         public bool IsReusable
115         {
116             get
117             {
118                 return false;
119             }
120         }
121     }
122 }

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

四、MD5加密算法

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

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