代码见

一、登录界面

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’])摧毁它