(一) 小白实现了登录操作,如图,代码在下面
一、登录界面
1. 布局:
a) 定width , height , margin:20px auto , box-shadow , border-radius
b) position:relative;
2. 思路:
2.1提交数据:
a) 验证数据合理性
在表单提交时(onsubmit属性),通过JS中的document.getElementById(“id”).value获取账号密码用str.trim()==‘’确认不为空,为空则alert,并返回false,不让提交
b) 验证账号密码正确
通过表单中的name属性post到后台(login_judge),使用$_POST[‘name’]获取提交表格的值,通过$mysqli_result = db->query(“sql查找语句”)存储db数据库中表格的信息,在while中通过$row = $mysqli_result->fetch_array()获取数据库第一条信息,用$row[‘user’] == $username判断用户名和密码是否完全匹配
i. 匹配:使用$_SESSION[‘username’]保持用户登录(使用session都要先使用session_start()!!!),用header("location:gbook.php”),登录至留言板。
ii. 检查完后无匹配:$_SESSION[‘flag’] = 1;//用来在登录界面alert(“账号或密码错误”);
header(“location:login.php”);//用来返回登录界面
c) 账号或密码错误
使用if(isset($_SESSION[‘flag’]))判断是否存在flag,存在则说明账号密码错误,echo JS中的alert();并且使用unset($_SESSISON[‘flag’])摧毁它
d) 其他情况(已经登录,美化)
使用isset($_SESSION[‘username’])等判断已登录,登录至留言板界面;
使用定时器window.onload =function(){setInterval(“函数” ,2000)};函数进行文字改变,让页面变非主流。。。。
代码
login.php//登录界面
session_start();/*判断是否已登录,已登录则跳转至留言板界面*/
if( isset($_SESSION['username'] ) && isset($_SESSION['password']) )
{header("location:user_gbook/gbook.php");eixt();}/*判断是否是由后台传过来的账号密码错误信息*/
if(isset($_SESSION['flag']) ){/*alert登录错误信息*/
echo "";/*销毁flag,避免一直alert()错误信息*/
unset($_SESSION['flag']);
}?>
Gbook.title {width:158px;margin:20px auto;/*display:block;*/font-size:23px;color:pink;position:relative;top:18px;}.button{width:102px;height:23px;margin:15px 0px 0px 34px;}.wrap{width:600px;height:300px; margin:200px auto;border:2px solid pink;box-shadow:0 0 5px 0 #aaa; border-radius:30px;}
.wrap .login{width:174px;margin: 0auto;}.wrap .input{width:174px;margin:50px auto;}
var flag = 0;
window.onload = function(){var t = setInterval("changeColor()",2000);
}functionjudge(){var username = document.getElementById("username").value;var password = document.getElementById("password").value;if(username == ""||username.trim()==""){alert("用户名不能为空!");return false;}if(password == ""||password.trim()==""){alert("密码不能为空!");return false;}return true;
}functionchangeColor(){var node = document.getElementById("title");if(flag == 0){
node.innerHTML = "✩留言板登录✩";
flag= 1;
}else{
node.innerHTML = "★留言板登录★";flag=0;}
}
用户名:
密码:
login_judge.php//实现登录的后台
include('connect.php');/*获取传输过来的表单信息*/
$username = $_POST["username"];$password = $_POST["password"];$sql = "select * from user_msg";/*执行sql语句*/
$mysqli_result = $db->query($sql);while($row = $mysqli_result->fetch_array()){if($row['username']==$username && $row['password']==$password){$success = true;break;
}
}/*查找到匹配的账号密码*/
if($success == true) {/*用session保持登录状态*/
$_SESSION['username']=$username;$_SESSION['password']=$password;header("location:user_gbook/gbook.php");
}/*没找到匹配的账号密码*/
else{/*返回登录界面并告诉界面登录失败*/
$_SESSION['flag']=1;header("location:login.php");
}?>