开发工具
Wampserver
WampServer就是Windows下 Apache+Mysql+PHP集成安装环境，即在window下的apache、php和mysql的服务器软件，通俗的说，就是它集成了php开发所需要的数据库软件，服务器和PHP解释器，这将很大程度上减少开发的时间
Navicat
Navicat是一套快速、可靠的数据库管理工具，是以直觉化的图形用户界面而建的。将数据库更加形象直观的展现在你的面前，避免的命令行的大黑框，让你可以以安全并且简单的方式创建、组织、访问并共用信息
代码展示
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" href="./css/login.css">
<body>
<!-- 实现在表单顶部登陆和注册页面的转换 -->
<header id="header" class="header">
<a href="register.html">注册</a>
<a href="login.html">登陆</a>
</header>
<div class="content">
<label><input type="text" name="username" placeholder="用户名" value="" ></label>
<label><input type="password" name="password" placeholder="密码" value=""></label>
<label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>
<img src="validcode.php" style="width:100px;height:25px;" id="code"/>
<a href="javascript:changeCode()">看不清，换一张</a>
<button class="btn" id="submit">提交</button>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> //点击图片更新验证码 function changeCode() { document.getElementById("code").src = "validcode.php?id=" + Math.random(); } //敲击空格提交请求 $(document).keyup(function(event){ if(event.keyCode ==13){ $("#submit").trigger("click"); } }); //对于请求进行非空验证 $("#submit").click(function(){ var username = $("input[name='username']").val(); var password = $("input[name='password']").val(); var checkNum = $("input[name='checkNum']").val(); if(username==undefined||username===''){ alert("用户名不能为空"); return; } if(password==undefined||password==''){ alert("密码不能为空"); return; } if(checkNum==undefined||checkNum==''){ alert("请输入验证码"); return; } //将请求提交到后台 $.post( 'login.php', {"username":username,"password":password,"checkNum":checkNum}, function (result) { //对后台返回信息进行处理 if (result.indexOf('success')!=-1) { window.location.href="https://www.baidu.com"; //登陆成功跳转到百度首页 } else { alert(result); } }) }) </script>
</body>
</html>login.css
head,body{ margin: 0; padding: 0; }
#header{ width: 400px; height: 40px; margin:auto; background-color: red; margin-top: 500px; border-top-right-radius: 8px; border-top-left-radius: 8px; }
#header a{ float: left; margin-left: 100px; text-decoration: none; }
.content{ width: 400px; height: 200px; margin-left: auto; margin:auto; margin-top: 0px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }
.content label input { width: 395px; height: 50px; margin-top: 0px; }
login.php
<?php
session_start();
$con=mysql_connect("localhost:3306","数据库用户名（默认为：root）","你的数据库密码");
if(!$con){
die('Clould not connect:'.mysql_errno());
}
$salt = 'left';
//对前台传来的数据进行特殊字符的转义，能够有效的防止sql注入等
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string(md5($salt.$_POST['password']));
$checkNum = $_POST["checkNum"];
mysql_select_db("mysql",$con);
$feedback = "账户密码错误";
if($checkNum==$_SESSION["validcode"]){
$SQL="select username from login where username='$username' and password='$password'";
$result=mysql_query($SQL);
$rows=mysql_num_rows($result);
if($rows!==1){
echo $feedback;
}
else{
$feedback="success";
echo $feedback;
}
}
?>register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" href="./css/register.css">
<body>
<header id="header" class="header">
<a href="register.html">注册</a>
<a href="login.html">登陆</a>
</header>
<div class="content">
<label><input type="text" name="username" placeholder="用户名" value=""></label>
<label><input type="password" name="password" placeholder="密码" value=""></label>
<label><input type="password" name="confirm" placeholder="确认密码"></label>
<label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>
<img src="validcode.php" style="width:100px;height:25px;" id="code"/>
<a href="javascript:changeCode()">看不清，换一张</a>
<button class="btn" id="submit">提交</button>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> function changeCode() { document.getElementById("code").src = "validcode.php?id=" + Math.random(); } $(document).keyup(function(event){ if(event.keyCode ==13){ $("#submit").trigger("click"); } }); $("#submit").click(function () { var username = $("input[name='username']").val(); var password = $("input[name='password']").val(); var password_confirm = $("input[name='confirm']").val(); var checkNum = $("input[name='checkNum']").val(); if (username == undefined || username === '') { alert("用户名不能为空"); return; } if (password == undefined || password == '') { alert("密码不能为空"); return; } if (password_confirm == undefined || password_confirm == '') { alert("请确认密码"); return; } else if (password_confirm !== password) { alert("两次输入的密码不一致"); return; } if (checkNum == undefined || checkNum == '') { alert("请输入验证码"); return; } $.post( 'register.php', {"username": username, "password": password,"checkNum":checkNum}, function (result) { if (result.indexOf('注册成功')!=-1) { window.location.href="login.html"; alert("注册成功"); } if (result.indexOf('该用户已经存在')!=-1) { window.location.href="register.html"; alert("该用户已经存在"); } }) }) </script>
</body>
</html>register.css
head,body{ margin: 0; padding: 0; }
#header{ width: 400px; height: 40px; margin:auto; background-color: red; margin-top: 500px; border-top-right-radius: 8px; border-top-left-radius: 8px; }
#header a{ float: left; margin-left: 100px; text-decoration: none; }
.content{ width: 400px; height: 250px; margin-left: auto; margin:auto; margin-top: 0px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }
.content label input { width: 395px; height: 50px; margin-top: 0px; }register.php
<?php
session_start();
$salt = 'left';
$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string(md5($salt.$_POST['password']));
$checkNum = $_POST["checkNum"];
$feedback = "注册失败";
if($checkNum==$_SESSION["validcode"]){
$con=mysql_connect("localhost:3306","","");
if(!$con){
die('Clould not connect:'.mysql_errno());
}
mysql_select_db("mysql",$con);
$SQL="select * from login where username='$username'";
$result=mysql_query($SQL);
$rows=mysql_num_rows($result);
if($rows>=1){
$feedback="该用户已经存在";
}
else{
$sql_insert = "insert into login (username,password) values ("."'$username',"."'$password')" ;
$res_insert = mysql_query($sql_insert);
if($res_insert)
{
$feedback="注册成功";
}
else
{
$feedback="注册失败";
}
}
}
echo $feedback;
mysql_close();
?>vaildcode.php
<?php
header("Content-Type:image/png");
//开启session
session_start();
//随机4个数字
$code = "";
$arr = array();
for($i=0;$i<4;$i++){
$arr[$i] = rand(0,9);
$code .= (string)$arr[$i];
}
//设置入session中，方便比对
$_SESSION["validcode"] = $code;
//开始绘图
$width = 100;
$height = 25;
$img = imagecreatetruecolor($width,$height);
//填充背景色
$backcolor = imagecolorallocate($img,0,0,0);
imagefill($img,0,0,$backcolor);
//获取随机较深颜色
for($i=0;$i<4;$i++){
$textcolor = imagecolorallocate($img,rand(50,180),rand(50,180),rand(50,180));
imagechar($img,12,7+$i*25,3,(string)$arr[$i],$textcolor);
}
//显示图片
imagepng($img);
//销毁图片
imagedestroy($img);
?> 最后将register.css和login.css文件放在项目的css文件夹下即可，图片为项目目录
这是数据库的表设计
接下来，我们就将整个项目的文件夹放在wamp安装目录的www文件夹下即可，例如博主的wamp安装在E盘，项目名为csdn,则目录为
然后我们就启动wampserver软件，等它由红色变为绿色后，在浏览器输入http://localhost/csdn/login.html
大功告成；
注意事项：
- Ajax和form提交请求的区别？
Ajax在提交、请求、接收时，都是异步进行的，网页不需要刷新；必须要使用JS来实现，不启用JS的浏览器，无法完成该操作；
Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的；不需要JS
源码地址
扫码关注作者个人技术公众号,有关技术问题后台回复即可，不定期将有学习资源分享