基于WAMP环境的简单用户登录系统实现（v3版）（持续迭代）

版本说明

实现环境：

流程逻辑框图：

数据库连接

登录页面：login.html

登录处理实现：doLogin.php

用户欢迎页面：welcome.php

密码修改页面：change_password.html

修改处理：doChangePassword.php

用户注册页面：register.html

注册处理：doRegister.php

版本说明

v3实现功能：

数据库连接（php）

用户登录（*前后端判断输入是否为空（弹窗））

欢迎页面（*欢迎用户）

用户注册（*前后端判断输入是否为空（弹窗））

欢迎页面（*欢迎用户）

用户密码修改

实现环境：

Windows11、Apache、MySQL、PHP8

流程逻辑框图：

数据库连接

基于php的MySQL数据库联动代码模板

外部文件，使用文件包含：include 'session_conn.php';

(以下代码都是)

登录页面：login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style type="text/css">
        form{
            position: absolute;
            top: 20%;
            left: 39%;
        }
        /* 控制input:name=login的元素居中 */
        input[ name='login' ]{
            width: 172px;
            display: block;
            margin-left: 28%;
            margin-top: 3%;
        }
        input[ name='register' ]{
            width: 173px;
            display: block;
            margin-left: 28%;
            margin-top: 3%;
        }
    </style>
    <script type="text/javascript" src="./_js/login_web.js"></script>
</head>

<body>
    <form onsubmit="return checkForm(this)" action="./_php/doLogin.php" method="post" >
        <fieldset>
            <legend>
                用户登录-php登录与注册系统测试
            </legend>
            <ul>
                <li>
                    <label> 
                        用户名：
                    </label>
                    <input type="text" name="username" />
                </li>
                <li>
                    <label>密&emsp;码：</label>
                    <input type="password" name="password" />
                </li>
                <label></label>
               onclick="checkForm(form)" /> -->

                <input type="submit" name="login" value="登录" />

               onclick="redirectToPage()" /> -->
                <input type="button" name="register" value="注册" onclick="redirectTopage()" />

            </ul>
        </fieldset>
    </form>
</body>

</html>

login_web.js：

引入利用js阻断登录框空输入的判断:

function checkForm(form) {
    // 表单.文本域名.value
    if (form.username.value == "" || form.username.value == null) {
        alert("用户名不能为空");
        form.username.focus();
        return false;
    }
    else if (form.password.value == "" || form.password.value == null) {
        alert("密码不能为空");
        form.password.focus();
        return false;
    }
    else {
        return true;
    }

}
function redirectTopage() {
    window.location.href = './register.html';
}

登录处理实现：doLogin.php

<?php
include './session_conn.php';
session_start();
// $username = htmlspecialchars($_POST['username']);
$username = $_POST['username'];
$password = md5($_POST['password']);

// $conn = mysqli_connect($host, $db_username, $db_pwd, $db_name);

if (!$conn) {
    // 判断数据库连接状态
    // die()，输出一条信息，然后退出脚本.
    die('连接数据库失败！请检查数据库是否开启' . mysqli_connect_errno());
} else {
    
    if(isset($username) && !empty($username)) {

        if (isset($_POST['password']) && !empty($_POST['password'])) {

            $Logincheck_query = mysqli_query($conn, "select * from login_user where username = '$username' limit 1");

            // 从查询结果中取得一行作为结果集
            // $arr = mysqli_fetch_assoc($Logincheck_query);
            $arr = mysqli_fetch_assoc(mysqli_query($conn, "select * from login_user where username = '$username' limit 1"));

            if ($password == $arr['password']) {

                $_SESSION['username'] = $arr['username'];
                $_SESSION['id'] = $arr['id'];
                echo "<script language = 'javascript'> alert('登录成功！');location = './welcome.php' </script>";
                return true;

            } else {
                echo "<script language = 'javascript'> alert('密码错误');location = '../login.html' </script>";
                return false;
            }
        } else {
            echo "<script language = 'javascript'> alert('请补全登录信息');location = '../login.html' </script>";
            return false;
        }
    } else {
        echo "<script language='javascript'>alert('请完善账户信息！');location='../login.html'</script>";
        return false;
    }
}

用户欢迎页面：welcome.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>welcome</title>
    <style>
        .table{
            text-align: center;
            width: 70%;
            padding: 15px;
            background-color: skyblue;
            border: 5px solid  green;
            border-collapse: collapse;
            margin-left: 17%;
        }

        input[type='button']{
            margin-left: 50%;
        }

        .change_password{
            margin-left: 70%;
        }
    </style>
    <script>
        function redirectToPage(){
            window.location.href = "../htdocs/login.html";
        }

    </script>
</head>
<body>
    <br/><br/><br/><br/><br/><br/><br/><br/>
        <?php
        include "./session_conn.php";   //数据库连接信息引入
        session_start();
        $user_id = $_SESSION['id'];

        if (empty($user_id)) {
            
            echo "<script language='javascript'> alert('请先登录');location='../login.html'</script>";
            exit;
        } else {
       $username = $_SESSION['username'];
    //    $conn = mysqli_connect('$host','$db_username','$db_pwd','$db_name');

       if (!$conn) {
        die('数据库连接失败！请检查数据库是否开启？'. mysqli_connect_error());
        }
        else {
            if (isset($_SESSION['username']) && !empty($_SESSION['username']) ) {
                echo "<h2 class='table'>登录成功，欢迎用户：$username </h2> ";
                echo "<a class = 'change_password' href = '../change_password.html'/>修改密码</a>";
            } else {
                // $_SESSION['username']  =false;
                die("超时，重新登录");
            }
            
        }
        echo "<input type='button' name='back_login' value='返回登录' onclick='redirectToPage()'/>";
        echo "<a href='close_login.php'/>用户注销</a>";
    }
    
        ?>
</body>
</html>

密码修改页面：change_password.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户修改</title>
    <style type="text/css">
        .title {
            text-align: center;
        }

        .change_password{
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="./_js/change_password.js"></script> 
</head>

<body>
    <div class="box">
        <div class="title">
            change your password
        </div>
        <!-- <form onsubmit="return check(this)" action="doChangePassword.php" method="post"> -->
            <form  action="./_php/doChangePassword.php" method="post">
            <table class="change_password">
                <tr>
                    <th>
                        当前用户名：
                    </th>
                    <td>
                        <input type="text" name="username" />
                    </td>
                </tr>
                <tr>
                    <th>
                        原密码：
                    </th>
                    <td>
                        <input type="password" name="OldPassword">
                    </td>
                </tr>
                <tr>
                    <th>
                        新密码：
                    </th>
                    <td>
                        <input type="password" name="NewPassword" />
                    </td>
                </tr>
                <tr>
                    <th>
                        确认密码：
                    </th>
                    <td>
                        <input type="password" name="ConfirmNewPassword" />
                    </td>
                </tr>
            </table>
            <input type="submit" name="confirm" value="确认修改"  />
            <input type="button" name="back" value="返回登录" onclick="redirectTopage()">
        </form>
    </div>
</body>

</html>

change_password.js

引入利用js阻断空输入的判断:

function redirectTopage() {
    window.location.href = '../htdocs/login.html';
}
function check() {
    // if (form.OldPassword.value === "" && form.OldPassword.value === null && form.OldPassword.value === undefined) {
    if (form.OldPassword.value == "" && form.OldPassword.value == null) {
        alert("原密码为空");
        form.OldPassword.focus();
        return false;
    } else {
        // if (form.NewPassword.value === "" && form.NewPassword.value === null && form.NewPassword.value === undefined) {
        if (form.NewPassword.value == "" && form.NewPassword.value == null) {
            alert("输入新密码");
            form.NewPassword.focus();
            return false;
        }
        else {
            // if (form.ConfirmNewPassword.value === "" && form.ConfirmeNewPassword.value === null && form.ConfirmNewPassword.value === undefined) {
            if (form.ConfirmNewPassword.value == "" && form.ConfirmeNewPassword.value == null) {
                alert("请确认密码");
                form.ConfirmNewPassword.focus();
                return false;
            } else {
                return true;
            }
        }
    }
}
function   redirectTopage(){
    window.location.href = './login.html';
}

修改处理：doChangePassword.php

<?php
include("session_conn.php");

$change_password = [];
$change_password["old_password"] = md5($_POST["OldPassword"]);
$change_password["Newpassword"] = md5($_POST["NewPassword"]);
$change_password["confirm_Newpassword"] = md5($_POST["ConfirmNewPassword"]);
$MD5_NewPassword = $change_password["Newpassword"];

if (!$conn) {
    die('数据库连接失败！' . mysqli_connect_errno());
} else {
    if (isset($_POST["OldPassword"]) && (strlen($_POST["OldPassword"]) != 0)) {

        if (isset($_POST["NewPassword"])  && (strlen($_POST["NewPassword"]) != 0)) {

            if (isset($_POST["ConfirmNewPassword"]) && (strlen($_POST["ConfirmNewPassword"]) != 0)) {

                if ($change_password["confirm_Newpassword"] == $change_password["Newpassword"]) {

                    //  $MD5_NewPassword = $change_password["Newpassword"];

                    $username = $_POST['username'];

                    $sql_update = "update login_user set password = '$MD5_NewPassword' where username = '$username' ";

                    if (mysqli_query($conn, $sql_update)) {
                        echo "<script language='javascript'>alert('修改成功，请重新登录！');location='../login.html'</script>";
                        return true;
                    } else {
                        echo "<script language='javascript'>alert('密码修改失败，请重新修改！');location='../change_password.html'</script>";
                        return false;
                    }
                } else {
                    echo "<script language='javascript'>alert('密码确认错误');location='../change_password.html'</script>";
                    return false;
                }
            } else {
                echo "<script language='javascript'>alert('请确认密码！');location = '../change_password.html'</script>";
                return false;
            }
        } else {
            echo "<script language='javascript'>alert('请输入新密码!');location='../change_password.html'</script>";
            return false;
        }
    } else {
        echo "<script language='javascript'>alert('请输入原密码信息！');location='../change_password.html'</script>";
        return false;
    }
}

用户注册页面：register.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<style type="text/css">
    .title {
        /* 文本排列到中央 */
        text-align: center;

        /* 行间距 */
        /* line-height: 80%;     */
        margin-top: 6%;
        margin-left: 8%;
    }

    .login {
        display: block;
        position: absolute;
        transform: translate(-50%, -61.8%);

        left: 56%;
        top: 20%;
        width: 450px;
        border: redius 8px;
        ;
        background: rgba(255, 255, 255, 0.9);
    }

    input[type='submit'] {
        width: 173px;
        display: block;
        margin-left: 0%;
        margin-top: 3%;
    }

    input[type='button'] {
        width: 173px;
        display: block;
        margin-left: 0%;
        margin-top: 3%;

    }
</style>
<script type="text/javascript" src="./_js/register_web.js"></script>
<body>
    <div class='box'>
        <div class='title'>new user register</div>
        <form onsubmit="return checkRegister(this)"  action="./_php/doRegister.php"  method="post" >
            <table class="login">
                <tr>
                    <th>
                        用户名：
                    </th>
                    <td>
                        <input type="text" name="username">
                    </td>
                </tr>
                <tr>
                    <th>
                        密码：
                    </th>
                    <td>
                        <input type="password" name="password" >
                    </td>
                </tr>
                <tr>
                    <th>
                        确认密码：
                    </th>
                    <td>
                        <input type="password" name="repassword" >
                    </td>
                </tr>
                <tr>
                    <th>

                    </th>
                    <td>
                        <input type="submit" value="注册完成" />
                    </td>
                    <td>
                        <input type="button" value="返回登陆" onclick=" redirectTopage() " />
                    </td>
                </tr>
            </table>
        </form>
    </div>

</body>

</html>

register_web.js

注册引导

function checkRegister(form) {
    if (form.username.value == "" || form.username.value == null) {
        alert("！请建立新用户名");
        form.username.focus();
        return false;
    } else {
        if (form.password.value == "" || form.password.value == null) {
            alert("！需要输入注册密码");
            form.password.focus();
            return false;
        } else {
            if (form.repassword.value == "" | form.repassword.value == null) {
                alert("！需要确认密码");
                form.repassword.focus();
                return false;
            } else {
                if (form.password.value == form.repassword.value) {
                    return true;
                } else {
                    alert("！确认密码不一致");
                    form.repassword.focus();
                }
            }
        }

    }

}

function   redirectTopage(){
    window.location.href = './login.html';
}

注册处理：doRegister.php

<?php
include 'session_conn.php';

$data = [];
//  $data['$username'] = htmlspecialchars($_POST['username']);
// $data['$username'] = $_POST['username'];
//  $username = $data['username'];
$username = $_POST['username'];

$data['password'] = md5($_POST['password']);
$data['repassword'] = md5($_POST['repassword']);
$sql_select = "select * from login_user where username = '$username' limit 1;";
$sql_id = "select id from login_user";
$result_select = mysqli_query($conn, $sql_select);


if (mysqli_num_rows($result_select) != 0) {
    echo "<script language='javascript'>alert('该用户已存在，请更换用户名！');location='../register.html'</script>";

    //释放查询结果
    mysqli_free_result($result_select);
} else {
    // 先判断是否存在，再判断是否为空
    if (!empty($data['password']) && !empty($data['repassword'])) {

        if ($data['repassword'] == $data['password']) {
            $password  = $data['repassword'];
            // $result_sql_id = mysqli_query($conn, $sql_id);

            $result_id = mysqli_num_rows(mysqli_query($conn, $sql_id));
            $result_new_id = $result_id + 1;
            $sql_insert = "insert into login_user(id,username,password) values('$result_new_id','$username','$password')";

            if (mysqli_query($conn, $sql_insert)) {
                echo "<script language='javascript'>alert('注册成功请重新登录!');location = '../login.html'</script>";
                mysqli_refresh($conn,MYSQLI_REFRESH_TABLES);
                mysqli_close($conn);
                return true;
            } else {
                echo "<script language='javascript'>alert('注册失败请重新注册！');location='../register.html'</script>";
                return false;
            }
        } else {
            echo "<script language='javascript'>alert('确认密码错误！');location='../register.html'</script>";
            return false;
        }
    } else {
        echo "<script language='javascript'>alert('请完善密码。');location='../register.html'</script>";
        return false;
    }
}