能登陸註冊的留言板(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"); } ?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。