代码见
一、登录界面
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(MYSQL_ASSOC))获取逆序的第一条信息 (3->2->1),用$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)};函数进行文字改变,让页面变非主流。。。。
二、实现注册
1.布局:
lable{display:inline-flex;width:30px;height:30px;} //能实现输入框的自动对齐,否则会参差不齐。
2.思路
a)验证数据合理性:
1.在表单提交时(onsubmit属性),通过JS中的document.getElementById(“id”).value获取账号密码
2.用str.trim()==‘’确认不为空,str.indexOf (“ ”)判断用户名不含空格
pwd1 == pwd2判断两密码相同,pwd.length<8判断密码长度不小于8
3.如上有一个不满足则alert,并返回false,不让提交
b)验证用户名是否重复:
通过表单中的name属性post到后台regist_judge),使用$_POST[‘name’]获取提交表格的值,通过$mysqli_result = db->query(“sql查找语句”)存储db数据库中表格的信息,在while中通过$row = $mysqli_result(fetch_array(MYSQL_ASSOC))获取逆序的第一条信息 (3->2->1),用$row[‘user’] == $username判断用户名是否在数据库中已经存在
i) 重复:
header()指向登录界面,并通过$_SESSION[‘flag’]传递注册失败信息,用来在注册界面alert(用户登录失败信息);
ii)不重复:
if($judge = $db->query($sql插入语句)===true)//插入成功echo生成
a标签用来跳转至登录界面
c)用户名重复处理
在后台返回注册界面后,使用if(isset($_SESSION[‘flag’]))判断是否存在flag,存在则说明用户名重复,echo JS中的alert();并且使用unset($_SESSISON[‘flag’])摧毁它