背景
上学期加入了学校的一个实验室,给了我们一个任务是做一个实现登陆注册的网页。最开始交了一个超级简陋的上去后,被老师挑出了很多缺陷,但是一直没有去修改,最近开始学习相关知识并开始进行完善,期间看了很多网站的登陆注册界面,有了很多新的想法,开始进行实践。
构思
放出一个我画的思维导图
这里推荐一波思维导图,把思路画出来对你任务的进行真的很有帮助,软件xmind或者幕布都可以免费使用。
进度
目前脑图中列出的还有很多只是想法,有待实现。
先把已完成的部分贴出来,以后一边完善一边改。
未完成部分:
- 正则表达式
- Ajax
- session与cookie
- 个人中心还没有做出来
代码
先贴已实现部分
注册
signup.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link href="css/signup.css" rel="stylesheet">
<script src="js/signup.js"></script>
</head>
<body>
<div class='login'>
<form id="formup" action="signup.php" method="post">
<ul>
<li class='clearfix'>
<center><span class='tou'>注册</span></center>
</li>
<li class='clearfix'>
<span class='fl-l'>用户名</span>
<input class='fl-l' type="text" name='username' maxlength="20" onblur="UsernameCheck()" >
<span class='tips' id="nametip">3-20位中文,字母,数字,下划线的组合,以中文或字母开头</span>
</li>
<li class='clearfix'>
<span class='fl-l'>密码</span>
<input class='fl-l' type="password" name='password1' maxlength="20" onblur="PasswordCheck()">
<span class='tips' id="psw1tip">6-20位英文(区分大小写)、数字、字符的组合</span>
</li>
<li class='clearfix'>
<span class='fl-l'>确认密码</span>
<input class='fl-l' type="password" name='password2' maxlength="20" onblur="CheckAgain()">
<span class='tips' id="psw2tip">请再输入一遍上面的密码</span>
</li>
<li class='clearfix'>
<canvas id="canvas" class="fl-c" width="205" height="55" onclick="CreatCode()"></canvas>
<input type="text" name='yanzhengma' id="inputCode" class="yzm" onblur="CheckCode()" maxlength="4" >
<span class='tips' id="codetip">请输入验证码(不区分大小写,点击图片更换验证码)</span>
</li>
<li class='clearfix'>
<input type="checkbox" id='checkbox' onclick="TermsCheck()"/>
<a href="javascript:ShowTerms();" class="Checkbox" style="color:dodgerblue">我已阅读并同意条款</a>
<input type="submit" id="zhuce" name='submit' value="注册" onclick="return SubmitCheck()">
<input type="reset" id="reset" onclick="CreatCode()">
</li>
<li class='clearfix'>
<center><a href="denglu.html" class="">前往登陆</a></center>
</li>
</ul>
</form>
</div>
<div class='terms' id='terms' style="display:none">
<ul>
<li>
<center><span>服务协议条款</span></center>
</li>
<li>
<center><span>最终解释权归徐卓杰所有</span></center>
</li>
<li>
<center><button id='agree' onclick="HideTerms()">已阅读并同意此条款</button></center>
</li>
</ul>
</div>
</body>
</html>
signup.css
@charset "utf-8";
.fl-l{float: left;}
.fl-r{float: right;}
.tips{
font-size:14px;
color: gray;
}
.clearfix:after{
content:' ';
display: block;
clear: both;
}
.login{
width:1080px;
height:600px;
margin:50px auto;
box-shadow: 0 0 1px 0 #aaa;
border-radius: 8px;
}
.login ul{
padding:30px 0;
list-style: none;
}
.login ul li{
position: relative;
margin-bottom:30px;
}
.login ul li span{
width: 200px;
text-align: right;
padding: 0 5px;
}
.login ul li input{
width: 200px;
height: 40px;
border:1px solid #ddd;
border-radius: 8px;
}
#checkbox,#reset,#zhuce{
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
}
#checkbox{
position: relative;
width: 20px;
height: 20px;
}
.terms{
background-color: lightblue;
position: absolute;
top: 10%;
left: 370px;
width:512px;
height:300px;
margin:50px auto;
box-shadow: 0 0 1px 0 #aaa;
border-radius: 8px;
}
.terms ul{
padding:50px 0;
list-style: none;
}
.terms ul li{
margin-bottom:50px;
}
.terms ul li span{
font-family: Microsoft YaHei;
}
.terms ul li button{
width: 270px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}
.terms ul li button:hover {
background: #5599FF;
}
signup.js
// <script src="js/jquery.min.js"></script>
var script=document.createElement("script");script.type="text/javascript";script.src="/js/jquery.min.js";
window.onload=function(){ //打开重新加载验证码
CreatCode();
//document.getElementById("zhuce").disabled=true;
}
function UsernameCheck(){ //用户名验证
var username=document.getElementsByName("username")[0].value;
var xhr = new XMLHttpRequest();
return true;
}
function PasswordCheck(){ //密码验证
var password=document.getElementsByName("password1")[0].value;
var tip=document.getElementById("psw1tip");
if (password.length>20||password.length<6){
tip.style.fontSize='16px';
tip.style.color='red';
return false;
}
else{
tip.style.fontSize='14px';
tip.style.color='gray';
return true;
}
}
function CheckAgain(){ //确认密码验证
var password1=document.getElementsByName("password1")[0].value;
var password2=document.getElementsByName("password2")[0].value;
var tip=document.getElementById("psw2tip");
if(password1==password2&&password2.length>5&&password2.length<21){
tip.style.fontSize='14px';
tip.style.color='gray';
return true;
}
else{
tip.style.fontSize='16px';
tip.style.color='red';
return false;
}
}
function CreateColor(){ //生成随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
var code="";
function CreatCode(){ //生成验证码
var c=document.getElementById("canvas");
var ctext=c.getContext("2d");
void ctext.clearRect(0,0,205,55);
code="";
for(var i=0;i<4;i++){
var charNum = Math.floor(Math.random() * 62);
code=code+codeChars[charNum];
}
ctext.font = 'bold 55px 方正雅黑';
ctext.fillStyle = CreateColor();
ctext.fillRect(0,0,ctext.width,ctext.height);
ctext.fillText(code,34,43);
for(var i=0;i<5;i++){ //生成随机曲线
ctext.beginPath();
ctext.lineWidth=Math.random() * 4;
ctext.strokeStyle=CreateColor();
ctext.moveTo(Math.random() * 205,Math.random() * 55);
ctext.lineTo(Math.random() * 205,Math.random() * 55);
ctext.stroke();
}
for(var i=0; i<10;i++){
ctext.fillStyle=CreateColor();
ctext.beginPath();
ctext.arc(Math.random() * 205,Math.random() * 55, Math.random() * 3, 0, 2*Math.PI);
ctext.fill();
}
}
function CheckCode(){ //检验验证码
var inputCode=document.getElementById("inputCode").value;
var tip=document.getElementById("codetip");
if(inputCode.toUpperCase()==code.toUpperCase()){
tip.style.fontSize='14px';
tip.style.color='gray';
return true;
}
else{
tip.style.fontSize='16px';
tip.style.color='red';
return false;
}
}
function ShowTerms(){ //展示条款
document.getElementById("terms").style.display="block";
}
function HideTerms(){ //隐藏条款
document.getElementById("terms").style.display="none";
document.getElementById("checkbox").checked=true;
}
function TermsCheck(){ //判断是否同意条款
if(document.getElementById("checkbox").checked==true){ //点击变选中
document.getElementsByClassName("Checkbox")[0].style.color="dodgerblue";
document.getElementById("checkbox").checked=true;
//document.getElementById("zhuce").disabled=false;
return true;
}
else{ //点击变未选中
document.getElementsByClassName("Checkbox")[0].style.color="red";
document.getElementById("checkbox").checked=false;
//document.getElementById("zhuce").disabled=true;
return false;
}
}
function SubmitCheck(){ //注册按钮验证
if(UsernameCheck()&PasswordCheck()&CheckAgain()&CheckCode()&TermsCheck()){
return true;
}
else{
return false;
}
}
signup.php
<?php
header('content-type:text/html;charset=utf-8');
$con = mysql_connect("localhost","root","");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db('account') or die('选择的数据库不存在!');
mysql_set_charset('utf8');
function userCheck($username){
$result = mysql_query("SELECT * FROM account1 WHERE username='$username'");
$row = mysql_fetch_array($result);
$un=$row['username'];
if($un==$username) return false;
else return true;
}
$username = isset($_POST['username']) ? $_POST['username'] : "";
$password1 = isset($_POST['password1']) ? $_POST['password1'] : "";
$password2 = isset($_POST['password2']) ? $_POST['password2'] : "";
//待尝试
/*@$username=@$_POST["username"];
@$password1=@$_POST["password1"];
@$password2=@$_POST["password2"];*/
if($username==''){
echo "请输入账号!";
exit();
}
if($password1!=$password2){
echo "密码不一致!";
exit();
}
echo "账户:";
echo $username;
$result = mysql_query("SELECT * FROM account1 WHERE username='$username'"); //数据源?
$row = mysql_fetch_array($result); //数据id
$un=$row['username']; //查询到的字符
if($username==$un){
echo "已存在!";
exit();
}
$sql="INSERT INTO account1 (username,password,pwd)
VALUES
('$username','$password1','$password2')";
if (mysql_query($sql,$con)){
echo "注册成功!";
}
else
echo "已存在!";
mysql_close($con);
//echo '<script>alert("注册成功!");location.href="'.denglu.html.'"</script>';
//header("refresh:$;url=denglu.html");
header("Location:denglu.html");
?>
登陆
signin.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link href="css/signin.css" rel="stylesheet">
<script src="js/signin.js"></script>
</head>
<body>
<div class='login'>
<form id="formin" name="f1" action="signin.php" method="post">
<ul>
<li class='clearfix'>
<center><span class="fl-c">登录</span></center>
</li>
<li class='clearfix'>
<span class='fl-l'>账号</span>
<input class='fl-l' type="text" name='user' maxlength="11">
</li>
<li class='clearfix'>
<span class='fl-l'>密码</span>
<input class='fl-l' type="password" name='password'>
</li>
<li class='clearfix'>
<center>
<canvas id="canvas" class="canvas" width="160px" height="50px" onclick="CreatCode()"></canvas>
</center>
</li>
<li class='clearfix'>
<center>
<input type="text" name='code' id="inputCode" class="code" onblur="CheckCode()" maxlength="4" placeholder="请输入验证码(不区分大小写,点击图片更换验证码)">
</center>
</li>
<li class='clearfix' id="liOfCodeTip">
<center>
<span id="codeTip"></span>
</center>
</li>
<li>
<center>
<input type="submit" name='submit' id="sbmt" value="登录" onclick="return SubmitCheck()">
</center>
</li>
<li class='clearfix' id="liOfCodeSubmit">
<center>
<span id="submitTip"></span>
</center>
</li>
<li class='clearfix'>
<center>
<input type="reset" onclick="CreatCode()">
</center><!--不推荐使用center,需要改掉,使用CSS实现-->
</li>
<li class='clearfix'>
<center>
<p>没有账户?
<a href="signup.html">立即注册</a>
</p>
</center>
</li>
</ul>
</form>
</body>
</html>
signin.css
@charset "utf-8";
.fl-l{float: left;}
.fl-r{float: right;}
.fl-c{float: initial;}
.clearfix:after{
content:' ';
display: block;
clear: both;
}
.login{
width:430px;
height:520px;
margin:50px auto;
box-shadow: 0 0 1px 0 #aaa;
border-radius: 8px;
}
.login ul{
padding:30px 0;
list-style: none;
}
.login ul li{
position: relative;
margin-bottom:15px;
}
.login ul li span{
width: 90px;
line-height: 40px;
text-align: right;
padding: 0 5px;
}
.login ul li input{
width: 310px;
height: 40px;
border:1px solid #ddd;
border-radius: 8px;
}
.login ul li button{
width: 310px;
height: 40px;
border:1px solid #ddd;
border-radius: 8px;
}
#liOfCodeTip{
position: relative;
margin-bottom: -2px;
}
#codeTip{
width: 50px;
line-height: 10px;
text-align: right;
font-size: medium;
color:red;
padding: 0 1px;
}
#liOfCodeSubmit{
position: relative;
margin-bottom: -25px;
}
#SubmitTip{
width: 50px;
line-height: 1px;
text-align: right;
padding: 0 1px;
}
signin.js
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
var code="";
function createColor(){ //生成随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
function CreatCode(){ //验证码生成
var c=document.getElementById("canvas");
var ctext=c.getContext("2d");
void ctext.clearRect(0,0,160,50);
code="";
for(var i=0;i<4;i++){
var charNum = Math.floor(Math.random() * 62);
code=code+codeChars[charNum];
}
ctext.fillStyle = createColor;
ctext.fillRect(0,0,ctext.width,ctext.height);
ctext.font = 'bold 40px 方正雅黑';
ctext.fillStyle = createColor();
ctext.fillText(code,40,40);
for(var i=0;i<5;i++){ //生成随机直线
ctext.beginPath();
ctext.lineWidth=Math.random() * 4;
ctext.strokeStyle=createColor();
ctext.moveTo(Math.random() * 160,Math.random() * 50);
ctext.lineTo(Math.random() * 160,Math.random() * 50);
ctext.stroke();
}
for(var i=0; i<10;i++){
ctext.fillStyle=createColor();
ctext.beginPath();
ctext.arc(Math.random() * 160,Math.random() * 50, Math.random() * 3, 0, 2*Math.PI);
ctext.fill();
}
}
function CheckCode(){ //验证码验证
var inputCode=document.getElementById("inputCode").value;
var inputname=document.getElementsByName("user").value;
var inputpsw=document.getElementsByName("password").value;
if (inputCode.length==0){
document.getElementById("codeTip").innerText="请输入验证码!"
//document.getElementById("sbmt").disabled=true;
CreatCode();
return false;
}
else
if(inputCode.toUpperCase()==code.toUpperCase()){
document.getElementById("codeTip").innerText=""
//document.getElementById("sbmt").disabled=false;
return true;
}
else{
document.getElementById("codeTip").innerText="验证码输入有误!"
//document.getElementById("sbmt").disabled=true;
CreatCode();
return false;
}
}
function checkPsw(){ //校验密码
return true;
}
function SubmitCheck(){ //登陆按钮验证
if(CheckCode()&checkPsw()){
return true;
}
else{
return false;
}
}
window.onload=function(){ //打开重新加载验证码
CreatCode();
//document.getElementById("sbmt").disabled=true;
}
signin.php
<?php
header('content-type:text/html;charset=utf-8');
$con = mysql_connect("localhost","root","");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db('account') or die('选择的数据库不存在!');
mysql_set_charset('utf8');
$user = isset($_POST['user']) ? $_POST['user'] : "";
$psw = isset($_POST['password']) ? $_POST['password'] : "";
echo "用户:";
echo $user;
$result = mysql_query("SELECT * FROM account1 WHERE username='$user'");
if($row = mysql_fetch_array($result)){
$un=$row['username'];
$pw=$row['password'];
}
else{
echo"不存在!";
exit();
}
if($user==$un && $psw==$pw){
echo"登录成功!";
}
else
echo"账号或密码错误!";
mysql_close($con)
?>
工具
- 服务器:搭载在自己电脑上的WampServer
- 编辑器:Hbuilder和vscode
- 浏览器:Chrome,Edge,IE,QQ浏览器,每个都要试一下网页能不能兼容(最开始是没注意的,直到看过各种因不兼容而出现奇怪现象的网页)
后续
现在还有很多缺陷,大家不要留情,指正出来。准备先把导图包含的内容做出来,然后下一步尝试买个服务器学着把它放到网上去,还得努力!