• 基于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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>登录title>
    8.     <style type="text/css">
    9.         form{
    10.             position: absolute;
    11.             top: 20%;
    12.             left: 39%;
    13.         }
    14.         /* 控制input:name=login的元素居中 */
    15.         input[ name='login' ]{
    16.             width: 172px;
    17.             display: block;
    18.             margin-left: 28%;
    19.             margin-top: 3%;
    20.         }
    21.         input[ name='register' ]{
    22.             width: 173px;
    23.             display: block;
    24.             margin-left: 28%;
    25.             margin-top: 3%;
    26.         }
    27.     style>
    28.     <script type="text/javascript" src="./_js/login_web.js">script>
    29. head>
    30.  
    31. <body>
    32.     <form onsubmit="return checkForm(this)" action="./_php/doLogin.php" method="post" >
    33.         <fieldset>
    34.             <legend>
    35.                 用户登录-php登录与注册系统测试
    36.             legend>
    37.             <ul>
    38.                 <li>
    39.                     <label> 
    40.                         用户名：
    41.                     label>
    42.                     <input type="text" name="username" />
    43.                 li>
    44.                 <li>
    45.                     <label>密 码：label>
    46.                     <input type="password" name="password" />
    47.                 li>
    48.                 <label>label>
    49.                onclick="checkForm(form)" /> -->
    50.  
    51.                 <input type="submit" name="login" value="登录" />
    52.  
    53.                onclick="redirectToPage()" /> -->
    54.                 <input type="button" name="register" value="注册" onclick="redirectTopage()" />
    55.  
    56.             ul>
    57.         fieldset>
    58.     form>
    59. body>
    60.  
    61. html>

    login_web.js：

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

    1. function checkForm(form) {
    2.     // 表单.文本域名.value
    3.     if (form.username.value == "" || form.username.value == null) {
    4.         alert("用户名不能为空");
    5.         form.username.focus();
    6.         return false;
    7.     }
    8.     else if (form.password.value == "" || form.password.value == null) {
    9.         alert("密码不能为空");
    10.         form.password.focus();
    11.         return false;
    12.     }
    13.     else {
    14.         return true;
    15.     }
    16.  
    17. }
    18. function redirectTopage() {
    19.     window.location.href = './register.html';
    20. }

    登录处理实现：doLogin.php

    2. include './session_conn.php';
    3. session_start();
    4. // $username = htmlspecialchars($_POST['username']);
    5. $username = $_POST['username'];
    6. $password = md5($_POST['password']);
    7.  
    8. // $conn = mysqli_connect($host, $db_username, $db_pwd, $db_name);
    9.  
    10. if (!$conn) {
    11.     // 判断数据库连接状态
    12.     // die()，输出一条信息，然后退出脚本.
    13.     die('连接数据库失败！请检查数据库是否开启' . mysqli_connect_errno());
    14. } else {
    15.     
    16.     if(isset($username) && !empty($username)) {
    17.  
    18.         if (isset($_POST['password']) && !empty($_POST['password'])) {
    19.  
    20.             $Logincheck_query = mysqli_query($conn, "select * from login_user where username = '$username' limit 1");
    21.  
    22.             // 从查询结果中取得一行作为结果集
    23.             // $arr = mysqli_fetch_assoc($Logincheck_query);
    24.             $arr = mysqli_fetch_assoc(mysqli_query($conn, "select * from login_user where username = '$username' limit 1"));
    25.  
    26.             if ($password == $arr['password']) {
    27.  
    28.                 $_SESSION['username'] = $arr['username'];
    29.                 $_SESSION['id'] = $arr['id'];
    30.                 echo "";
    31.                 return true;
    32.  
    33.             } else {
    34.                 echo "";
    35.                 return false;
    36.             }
    37.         } else {
    38.             echo "";
    39.             return false;
    40.         }
    41.     } else {
    42.         echo "";
    43.         return false;
    44.     }
    45. }

    用户欢迎页面：welcome.php

    2. "en">
    4.     "UTF-8">
    5.     "viewport" content="width=device-width, initial-scale=1.0">
    6.     welcome
    7.     
    8.     
    11.     







    12.         
    13.         include "./session_conn.php";   //数据库连接信息引入
    14.         session_start();
    15.         $user_id = $_SESSION['id'];
    16.  
    17.         if (empty($user_id)) {
    18.             
    19.             echo "";
    20.             exit;
    21.         } else {
    22.        $username = $_SESSION['username'];
    23.     //    $conn = mysqli_connect('$host','$db_username','$db_pwd','$db_name');
    24.  
    25.        if (!$conn) {
    26.         die('数据库连接失败！请检查数据库是否开启？'. mysqli_connect_error());
    27.         }
    28.         else {
    29.             if (isset($_SESSION['username']) && !empty($_SESSION['username']) ) {
    30.                 echo "
      登录成功，欢迎用户：$username 
       "      ;
    31.                 echo "修改密码";
    32.             } else {
    33.                 // $_SESSION['username']  =false;
    34.                 die("超时，重新登录");
    35.             }
    36.             
    37.         }
    38.         echo "";
    39.         echo "用户注销";
    40.     }
    41.     
    42.         ?>

    密码修改页面：change_password.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>账户修改title>
    8.     <style type="text/css">
    9.         .title {
    10.             text-align: center;
    11.         }
    12.  
    13.         .change_password{
    14.             text-align: center;
    15.         }
    16.     style>
    17.     <script type="text/javascript" src="./_js/change_password.js">script> 
    18. head>
    19.  
    20. <body>
    21.     <div class="box">
    22.         <div class="title">
    23.             change your password
    24.         div>
    25.         
    26.             <form  action="./_php/doChangePassword.php" method="post">
    27.             <table class="change_password">
    28.                 <tr>
    29.                     <th>
    30.                         当前用户名：
    31.                     th>
    32.                     <td>
    33.                         <input type="text" name="username" />
    34.                     td>
    35.                 tr>
    36.                 <tr>
    37.                     <th>
    38.                         原密码：
    39.                     th>
    40.                     <td>
    41.                         <input type="password" name="OldPassword">
    42.                     td>
    43.                 tr>
    44.                 <tr>
    45.                     <th>
    46.                         新密码：
    47.                     th>
    48.                     <td>
    49.                         <input type="password" name="NewPassword" />
    50.                     td>
    51.                 tr>
    52.                 <tr>
    53.                     <th>
    54.                         确认密码：
    55.                     th>
    56.                     <td>
    57.                         <input type="password" name="ConfirmNewPassword" />
    58.                     td>
    59.                 tr>
    60.             table>
    61.             <input type="submit" name="confirm" value="确认修改"  />
    62.             <input type="button" name="back" value="返回登录" onclick="redirectTopage()">
    63.         form>
    64.     div>
    65. body>
    66.  
    67. html>

    change_password.js

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

    1. function redirectTopage() {
    2.     window.location.href = '../htdocs/login.html';
    3. }
    4. function check() {
    5.     // if (form.OldPassword.value === "" && form.OldPassword.value === null && form.OldPassword.value === undefined) {
    6.     if (form.OldPassword.value == "" && form.OldPassword.value == null) {
    7.         alert("原密码为空");
    8.         form.OldPassword.focus();
    9.         return false;
    10.     } else {
    11.         // if (form.NewPassword.value === "" && form.NewPassword.value === null && form.NewPassword.value === undefined) {
    12.         if (form.NewPassword.value == "" && form.NewPassword.value == null) {
    13.             alert("输入新密码");
    14.             form.NewPassword.focus();
    15.             return false;
    16.         }
    17.         else {
    18.             // if (form.ConfirmNewPassword.value === "" && form.ConfirmeNewPassword.value === null && form.ConfirmNewPassword.value === undefined) {
    19.             if (form.ConfirmNewPassword.value == "" && form.ConfirmeNewPassword.value == null) {
    20.                 alert("请确认密码");
    21.                 form.ConfirmNewPassword.focus();
    22.                 return false;
    23.             } else {
    24.                 return true;
    25.             }
    26.         }
    27.     }
    28. }
    29. function   redirectTopage(){
    30.     window.location.href = './login.html';
    31. }

    修改处理：doChangePassword.php 

    2. include("session_conn.php");
    3.  
    4. $change_password = [];
    5. $change_password["old_password"] = md5($_POST["OldPassword"]);
    6. $change_password["Newpassword"] = md5($_POST["NewPassword"]);
    7. $change_password["confirm_Newpassword"] = md5($_POST["ConfirmNewPassword"]);
    8. $MD5_NewPassword = $change_password["Newpassword"];
    9.  
    10. if (!$conn) {
    11.     die('数据库连接失败！' . mysqli_connect_errno());
    12. } else {
    13.     if (isset($_POST["OldPassword"]) && (strlen($_POST["OldPassword"]) != 0)) {
    14.  
    15.         if (isset($_POST["NewPassword"])  && (strlen($_POST["NewPassword"]) != 0)) {
    16.  
    17.             if (isset($_POST["ConfirmNewPassword"]) && (strlen($_POST["ConfirmNewPassword"]) != 0)) {
    18.  
    19.                 if ($change_password["confirm_Newpassword"] == $change_password["Newpassword"]) {
    20.  
    21.                     //  $MD5_NewPassword = $change_password["Newpassword"];
    22.  
    23.                     $username = $_POST['username'];
    24.  
    25.                     $sql_update = "update login_user set password = '$MD5_NewPassword' where username = '$username' ";
    26.  
    27.                     if (mysqli_query($conn, $sql_update)) {
    28.                         echo "";
    29.                         return true;
    30.                     } else {
    31.                         echo "";
    32.                         return false;
    33.                     }
    34.                 } else {
    35.                     echo "";
    36.                     return false;
    37.                 }
    38.             } else {
    39.                 echo "";
    40.                 return false;
    41.             }
    42.         } else {
    43.             echo "";
    44.             return false;
    45.         }
    46.     } else {
    47.         echo "";
    48.         return false;
    49.     }
    50. }

     用户注册页面：register.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>用户注册title>
    8. head>
    9. <style type="text/css">
    10.     .title {
    11.         /* 文本排列到中央 */
    12.         text-align: center;
    13.  
    14.         /* 行间距 */
    15.         /* line-height: 80%;     */
    16.         margin-top: 6%;
    17.         margin-left: 8%;
    18.     }
    19.  
    20.     .login {
    21.         display: block;
    22.         position: absolute;
    23.         transform: translate(-50%, -61.8%);
    24.  
    25.         left: 56%;
    26.         top: 20%;
    27.         width: 450px;
    28.         border: redius 8px;
    29.         ;
    30.         background: rgba(255, 255, 255, 0.9);
    31.     }
    32.  
    33.     input[type='submit'] {
    34.         width: 173px;
    35.         display: block;
    36.         margin-left: 0%;
    37.         margin-top: 3%;
    38.     }
    39.  
    40.     input[type='button'] {
    41.         width: 173px;
    42.         display: block;
    43.         margin-left: 0%;
    44.         margin-top: 3%;
    45.  
    46.     }
    47. style>
    48. <script type="text/javascript" src="./_js/register_web.js">script>
    49. <body>
    50.     <div class='box'>
    51.         <div class='title'>new user registerdiv>
    52.         <form onsubmit="return checkRegister(this)"  action="./_php/doRegister.php"  method="post" >
    53.             <table class="login">
    54.                 <tr>
    55.                     <th>
    56.                         用户名：
    57.                     th>
    58.                     <td>
    59.                         <input type="text" name="username">
    60.                     td>
    61.                 tr>
    62.                 <tr>
    63.                     <th>
    64.                         密码：
    65.                     th>
    66.                     <td>
    67.                         <input type="password" name="password" >
    68.                     td>
    69.                 tr>
    70.                 <tr>
    71.                     <th>
    72.                         确认密码：
    73.                     th>
    74.                     <td>
    75.                         <input type="password" name="repassword" >
    76.                     td>
    77.                 tr>
    78.                 <tr>
    79.                     <th>
    80.  
    81.                     th>
    82.                     <td>
    83.                         <input type="submit" value="注册完成" />
    84.                     td>
    85.                     <td>
    86.                         <input type="button" value="返回登陆" onclick=" redirectTopage() " />
    87.                     td>
    88.                 tr>
    89.             table>
    90.         form>
    91.     div>
    92.  
    93. body>
    94.  
    95. html>

     register_web.js

    注册引导

    1. function checkRegister(form) {
    2.     if (form.username.value == "" || form.username.value == null) {
    3.         alert("！请建立新用户名");
    4.         form.username.focus();
    5.         return false;
    6.     } else {
    7.         if (form.password.value == "" || form.password.value == null) {
    8.             alert("！需要输入注册密码");
    9.             form.password.focus();
    10.             return false;
    11.         } else {
    12.             if (form.repassword.value == "" | form.repassword.value == null) {
    13.                 alert("！需要确认密码");
    14.                 form.repassword.focus();
    15.                 return false;
    16.             } else {
    17.                 if (form.password.value == form.repassword.value) {
    18.                     return true;
    19.                 } else {
    20.                     alert("！确认密码不一致");
    21.                     form.repassword.focus();
    22.                 }
    23.             }
    24.         }
    25.  
    26.     }
    27.  
    28. }
    29.  
    30. function   redirectTopage(){
    31.     window.location.href = '../login.html';
    32. }

    注册处理：doRegister.php

    2. include 'session_conn.php';
    3.  
    4. $data = [];
    5. //  $data['$username'] = htmlspecialchars($_POST['username']);
    6. // $data['$username'] = $_POST['username'];
    7. //  $username = $data['username'];
    8. $username = $_POST['username'];
    9.  
    10. $data['password'] = md5($_POST['password']);
    11. $data['repassword'] = md5($_POST['repassword']);
    12. $sql_select = "select * from login_user where username = '$username' limit 1;";
    13. $sql_id = "select id from login_user";
    14. $result_select = mysqli_query($conn, $sql_select);
    15.  
    16.  
    17. if (mysqli_num_rows($result_select) != 0) {
    18.     echo "";
    19.  
    20.     //释放查询结果
    21.     mysqli_free_result($result_select);
    22. } else {
    23.     // 先判断是否存在，再判断是否为空
    24.     if (!empty($data['password']) && !empty($data['repassword'])) {
    25.  
    26.         if ($data['repassword'] == $data['password']) {
    27.             $password  = $data['repassword'];
    28.             // $result_sql_id = mysqli_query($conn, $sql_id);
    29.  
    30.             $result_id = mysqli_num_rows(mysqli_query($conn, $sql_id));
    31.             $result_new_id = $result_id + 1;
    32.             $sql_insert = "insert into login_user(id,username,password) values('$result_new_id','$username','$password')";
    33.  
    34.             if (mysqli_query($conn, $sql_insert)) {
    35.                 echo "";
    36.                 mysqli_refresh($conn,MYSQLI_REFRESH_TABLES);
    37.                 mysqli_close($conn);
    38.                 return true;
    39.             } else {
    40.                 echo "";
    41.                 return false;
    42.             }
    43.         } else {
    44.             echo "";
    45.             return false;
    46.         }
    47.     } else {
    48.         echo "";
    49.         return false;
    50.     }
    51. }

  • 相关阅读:
    吴恩达deeplearning.ai:使用多个决策树&随机森林
    健康云HIS系统源码，满足基层医疗机构业务需求，提供挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生站和护士站等功能
    在VS Code 中调试远程服务器的PHP代码
    八个解决你80%需求的CSS动画库
    ARM Linux如何模拟PTE的脏位，访问位和文件位？
    LeetCode 热题100——栈与队列专题（三）
    Android学习笔记5 - 初学Activity（二）多个、生命周期、启动模式
    轻松学习jQuery控制DOM
    操作系统-设备
    docker安装nexus3并配置统一前缀url prefix
  • 原文地址：https://blog.csdn.net/qq_44846097/article/details/141090486