一、工具:

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

sql2008[准备过久升级]

二、用到的语言:

HTML+CSS+Jquery+Ajax+sqlserver

HTML[相当于一个人]

css[要穿衣服]

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

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

sqlserver[数据库]

三、过程

html部分代码:

 <body>
<div id="header">
<div id="header_con">
<a href="javascript:;" onclick="showRegBox()">注册</a>
<a href="javascript:;" onclick="ShowLoginBox()">登录</a>
</div>
</div>
<div id="loginBox">
<div class="login_Item">
<input type="text" id="TxtUserName" placeholder="手机邮箱/用户名" />
</div>
<div class="login_Item"><input type="password" id="TxtPwd" placeholder="请输入密码" /></div>
<div class="login_Item"><a href="javascript:;" onclick="login()">登录</a></div>
</div>
<div id="Regbox">
<div class="login_Item"><input type="text" id="TxtRegUserName" placeholder="手机邮箱/用户名" /></div>
<div class="login_Item"><input type="password" id="TxtRegPwd" placeholder="请输入密码" /></div>
<div class="login_Item"><input type="text" id="TxtRegqq" placeholder="QQ号"/></div>
<div class="login_Item"><input type="text" id="TxtRegEmail" placeholder="邮箱" /></div>
<div class="login_Item"><a href="javascript:;" onclick="Reglogin()">注册</a></div>
</div>
</body>

css代码:

 * {
margin:0px;
padding:0px;
}
#header {
height:40px;
width:100%;
background:#000000;
} a {
text-decoration:none;
}
#header a {
float:right;
color:#ffffff;
line-height:40px;
margin-left:10px;
}
#header_con {
width:1200px;
margin:0px auto;
}
.login_Item {
margin-left:20px;
}
.login_Item input {
width:348px;
height:40px;
margin-top:10px;
border:solid 1px #04a6f9;
}
.login_Item a {
margin-top:20px;
width:350px;
height:40px;
display:block;
background:#04a6f9;
color:#ffffff;
line-height:40px;
text-align:center;
}
#loginBox {
display:none;/*//隐藏状态*/
margin:0px auto;
} #Regbox {
display:none;
}

js代码:[用了layer插件]

 /// <reference path="_references.js" />
/// <reference path="jquery.md5.js" /> function ShowLoginBox()
{
layer.open({
type: 1,
title: "用户登录",
//设置div大小
area: ["390px", "300px"],
content: $("#loginBox")
});
} function login()
{
//1.获取到用户名和密码
var username = $.trim($("#TxtUserName").val());
var pwd =$.md5( $.trim($("#TxtPwd").val()));
//2.判断用户名和密码是否为空
if (username == "" || pwd == "") {
layer.alert("用户名或密码不能为空!",
{
title: "提示:",
icon: 5
});
}
else
{
$.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"cmd":"login" }, function (data)
{
if (data == "登录成功") {
//layer.alert("登录成功!",
layer.msg("登录成功!",
{
//title: "提示:",
icon: 6
});
}
else
{
layer.msg("用户名或密码不正确",
{
//title: "提示:",
icon: 5
});
}
});
}
} function showRegBox()
{
layer.open({
type:1,
title:"注册",
area: ["390px", "350px;"],
//div的内容
content:$("#Regbox")
});
} function Reglogin()
{
//1.获取到输入的内容
var username = $.trim($("#TxtRegUserName").val());
var pwd =$.md5($.trim($("#TxtRegPwd").val()));
var qq = $.trim($("#TxtRegqq").val());
var email = $.trim($("#TxtRegEmail").val());
//并做判断
if (username == "" || pwd == "") {
layer.msg("用户名或密码不能为空!");
}
else
{//cmd用做标示,判断是注册还是登录
$.post("/Handler1.ashx", { "UserName": username, "Pwd": pwd,"qq":qq,"email":email,"cmd": "reg" }, function (data)
{
if (data == "注册成功") {
layer.msg("恭喜你,注册成功!",
{
icon: 6
});
}
else
{
layer.msg(data,
{
icon:5
});
}
});
}
}

ajax代码:

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient; namespace baidu20160707
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public HttpContext context;
public string strResult = "";
public void ProcessRequest(HttpContext context)
{
this.context = context;
string cmd=context.Request.Form["cmd"];
switch (cmd)
{
case "login":
strResult = loginAjax();
break;
case "reg":
strResult = RegAjax();
break;
}
context.Response.Write(strResult);
} //登录
public string loginAjax()
{
//1.接收传过来的用户名和密码
string username = context.Request.Form["username"];
//类名调用方法,32位,再做加盐处理
string pwd =Md5Class.GetMD5( context.Request.Form["pwd"]+"傻逼玩意",);
//所在对应的id是否存在
//string strsql = string.Format("select id from Users where UserName='{0}' and Pwd='{1}'", username, pwd);
//sql注入处理1.@传参的方式,, username, pwd不要,'分号也不要'
string strsql = string.Format("select id from Users where UserName=@UserName and Pwd=@Pwd");
//sql注入处理2.调用SqlParameter[]数组对数据进行过滤
SqlParameter[] paras = new SqlParameter[]
{
new SqlParameter("@UserName",SqlDbType.NVarChar),
new SqlParameter("@Pwd",SqlDbType.NVarChar)
};
//sql注入处理3.指定它的值
paras[].Value = username;
paras[].Value = pwd;
//sql注入处理,4.不能忘记把数组对象传进去
if (SqlHelper.Exists(strsql,paras))
{
//context.Response.Write("登录成功");
return "登录成功";
}
else
{
//context.Response.Write("用户名或密码不正确");
return "用户名或密码不正确";
}
} //注册
public string RegAjax()
{
//接收传过来的用户名和密码
string username=context.Request.Form["username"];
string pwd=Md5Class.GetMD5(context.Request.Form["pwd"]+"傻逼玩意",);
string qq=context.Request.Form["qq"];
string email = context.Request.Form["email"];
//string strsql1 = string.Format("select id from Users where UserName='{0}' ",username,pwd);
string strsql1 = string.Format("select id from Users where UserName=@UserName ");
SqlParameter[] paras1 = new SqlParameter[]
{
new SqlParameter("@UserName",SqlDbType.NVarChar)
};
paras1[].Value = username;
if (SqlHelper.Exists(strsql1, paras1))
//if (SqlHelper.Exists(strsql1))
{
return "该用户已注册,请重新输入";
}
else
{
//不存在就注册
//string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values('{0}','{1}','{2}','{3}')", username, pwd, qq, email);
//, username, pwd, qq, email
string strsql2 = string.Format("insert into Users (UserName,Pwd,QQ,eMail) values(@UserName,@Pwd,@QQ,@eMail)");
SqlParameter[] paras2 = new SqlParameter[]
{
new SqlParameter("@UserName",SqlDbType.NVarChar),
new SqlParameter("@Pwd",SqlDbType.NVarChar),
new SqlParameter("@QQ",SqlDbType.NVarChar),
new SqlParameter("@eMail",SqlDbType.NVarChar),
};
paras2[].Value = username;
paras2[].Value = pwd;
paras2[].Value = qq;
paras2[].Value = email;
//插入处理
if (SqlHelper.ExecteNonQueryText(strsql2, paras2) > )
{
return "注册成功";
}
else
{
return "注册失败";
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

效果:点击登录弹出登录框,点击注册,弹出注册框

四、MD5加密算法

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

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

注册信息:

建议:从源头解决这种问题,运用正则表达式从源头入手,尽量设置一些含有特殊字符的密码。

虽然MD5加密是单项加密,但其结构还是可以破解的。所以,通常情况下,我们后做[两次md5加密,再做加盐处理]。

用了sql注入处理+MD5两次加密以及加盐处理之后的效果:

数据库显示的该条数据:

五、sql注入

sql注入是指攻击者利用数据库数据的漏洞进行攻击,特别是在登录时,用户常利用SQL语句中的特定字符创建一个恒等条件,从而不需要任何用户名和密码就可以访问网站数据。

具体:http://www.cnblogs.com/wangwangwangMax/p/5551614.html

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

  1. Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解(函登录验证)

    上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页  了解了LigerUI 中Grid的基本用法  现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...

  2. 使用PHP开发一个简单的后台接口(响应移动端的get请求和post请求)

    写一个简单的后台,在接到app请求数据的时候,返回对应的内容: index.php文件如下: <?php $id = $_POST['id']; if($id==001){ echo json_ ...

  3. windows环境30分钟从0开始快速搭建第一个docker项目(带数据库交互)

    前言 小白直接上手 docker  构建我们的第一个项目,简单粗暴,后续各种概念边写边了解,各种概念性的内容就不展开,没了解过的点击 Docker 教程 进行初步了解. Docker 是一个开源的应用 ...

  4. vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容

    新建一个Login.vue(登录页面,先把Hello.vue的内容复制过来即可) 然后我们打开router下面的index.js,第一个箭头:(引入vue路由)第二个箭头(引入我们新建的Login.v ...

  5. 数据库安全性操作——操作原则及SQL注入

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6893134.html 今天在进行支付宝开发时,看到支付宝开发文档<开放平台第三方应用安全开发指南> ...

  6. 一个简单的ObjC和JavaScript交互工具

    https://github.com/changjianfeishui/XBWebBridge ObjectiveC与Js交互是常见的需求,可对于新手或者所谓的高手而言,其实并不是那么简单明了.这里只 ...

  7. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...

  8. Layui 写一个简单的后台页面

    参考如下: 1.layui 官方文档 http://www.layui.com/doc/ 2.https://blog.csdn.net/huyanliang/article/details/7796 ...

  9. LayUI+SSM实现一个简单的后台管理系统

    该后台管理系统是用于管理视频网站数据的,目前分5个菜单项,这篇博客主要讲述[影片管理]的具体功能和实现 后台代码结构和[影片管理]的界面如下图 该界面分为上下2部分,[搜索条件]和[影片列表],2部分 ...

随机推荐

  1. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  2. Hybrid App移动应用开发初探

    一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...

  3. UWP开发之控件:用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  4. Linq操作非泛型集合

    我们都知道,Linq能查询泛型集合,确切的说是:LINQ能实现查询泛型对象或者实现了IEnumerable.但是,很遗憾的是诸如ArrayList这样的非泛型集合并没有实现IEnumerable.那咋 ...

  5. MySQL 正则表达式

    介绍 正则表达式用来描述或者匹配符合规则的字符串.它的用法和like比较相似,但是它又比like更强大,能够实现一些很特殊的规则匹配:正则表达式需要使用REGEXP命令,匹配上返回"1&qu ...

  6. ubuntu下rhythmbox歌名显示乱码问题解决

    问题描述:本人装有双系统,一个是win7,另一个是ubuntu12.04LTS版本,所有的歌曲都在windows磁盘下KuGou目录中,这个时候,使用ubuntu的rhythmbox播放的歌曲的时候, ...

  7. 用FlexGrid做开发,轻松处理百万级表格数据

    表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级.甚至百万级.此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据量,或者加载得很慢影响程序执行. 那么, ...

  8. 我也来说说DDD~大话目录

    回到占占推荐博客索引 DDD之前没有接触过,但一但有了接触就一发不可收拾,他会带去进入一个全新的世界! DDD不是新技术,而是新思想,新模式,是软件开发领域的一次突破,它更接近于业务,对于业务的改动它 ...

  9. JavaScript随笔1

    1.NaN不等于NaN 2.判断是不是NaN:isNaN; (强制类型转换) 3.parseInt(3.5) ->3  parseInt(3px)->3 4.pareFloat(3.7)- ...

  10. 替代jquery1.9版本以前的toggle事件函数(开关)

    以上文章为转载自http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html var flag=1; $(".selector").cl ...