能登陆注册的留言板(1)——实现登陆

时间 2020-07-11

标签登陆注册留言板实现繁體版

原文原文链接

（一）小白实现了登陆操做，如图，代码在下面javascript

1、登陆界面

1. 布局:

a) 定width , height , margin:20px auto , box-shadow , border-radiusphp

b) position:relative;css

2. 思路：

2.1提交数据：

a) 验证数据合理性html

　　在表单提交时(onsubmit属性),经过JS中的document.getElementById(“id”).value获取帐号密码用str.trim()==‘’确认不为空，为空则alert,并返回false,不让提交java

b) 验证帐号密码正确node

　　经过表单中的name属性post到后台（login_judge）,使用$_POST[‘name’]获取提交表格的值，经过$mysqli_result = db->query(“sql查找语句”)存储db数据库中表格的信息，在while中经过$row = $mysqli_result->fetch_array()获取数据库第一条信息，用$row[‘user’] == $username判断用户名和密码是否彻底匹配mysql

i. 匹配：使用$_SESSION[‘username’]保持用户登陆（使用session都要先使用session_start()!!!)，用header（"location:gbook.php”）,登陆至留言板。sql

ii. 检查完后无匹配：$_SESSION[‘flag’] = 1;//用来在登陆界面alert(“帐号或密码错误”);数据库

header(“location:login.php”);//用来返回登陆界面session

c) 帐号或密码错误

　　使用if（isset($_SESSION[‘flag’])）判断是否存在flag，存在则说明帐号密码错误，echo JS中的alert();而且使用unset($_SESSISON[‘flag’])摧毁它

d) 其余状况（已经登陆，美化）

　　使用isset($_SESSION[‘username’])等判断已登陆，登陆至留言板界面；

　　使用定时器window.onload =function(){setInterval(“函数” ,2000)};函数进行文字改变，让页面变非主流。。。。

代码

login.php//登陆界面

<?php /*使用session必须*/
    session_start(); /*判断是否已登陆，已登陆则跳转至留言板界面*/
    if( isset($_SESSION['username'] ) && isset($_SESSION['password']) ) {header("location:user_gbook/gbook.php");eixt();} /*判断是不是由后台传过来的帐号密码错误信息*/
    if(isset($_SESSION['flag']) ){ /*alert登陆错误信息*/
        echo "<script type='text/javascript'>alert('用户名或密码错误')</script>"; /*销毁flag，避免一直alert()错误信息*/
        unset($_SESSION['flag']); } ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gbook</title>
<style type="text/css">
    .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: 0 auto;} .wrap .input{width:174px;margin:50px auto;} </style>
<script type="text/javascript">
    var flag = 0; window.onload = function(){ var t = setInterval("changeColor()",2000); } function judge(){ 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; } function changeColor(){ var node = document.getElementById("title"); if(flag == 0 ){ node.innerHTML = "✩留言板登陆✩"; flag = 1; } else { node.innerHTML = "★留言板登陆★";flag=0;} } </script>
</head>

<body>
<div class="wrap">
    <div class="title" id="title">✩留言板登陆✩</div>
    <div class="login">
      <!--判断数据-->
        <form class="input" action="login_judge.php" method="post" onsubmit="return judge();">
            <label>用户名：</label>            <input name="username" id="username" type="text" class="user" placeholder="请输入帐号"/></br>
            <label>密码：</label></br>        <input name ="password" id="password" type="password" class="password" placeholder="请输入密码"/></br>
            <div class="button">
            <input type="submit" class="submit" value="登陆" name="login" />
      <!--实现本地页面跳转-->
            <input type="button" class="regist" value="注册" name="regist" onclick="window.location.href='regist.php'"/>
            </div>
         </form>
    </div>
</div>  
</body>
</html>

login_judge.php//实现登陆的后台

<?php session_start(); $success = false; /*本身编写的，链接数据库并设置字符编码，须要本身建立好数据库和表*/
    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"); } ?>