(一) 小白实现了登录操作，如图，代码在下面

一、登录界面

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");

}?>