0
0

【PHP【实战项目】系统性教学】——使用最精简的代码完成用户的登录与退出

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：PHP程序开发

⭐🅰⭐

— 请添加图片描述

文章目录

⭐前言⭐

  如果用户进入需要密码登录凭证的页面，此时就要求用户输入账号和密码进行登录，否则用户无权访问。因此用户登录成功后，需要保留一个登录凭证，以便在各个页面之间进行请求操作。
由于HTTP是一种无状态的请求——响应协议，没有办法记录多个事务请求之间的状态。即访问一个一个页面请求再请求另外一个页面时无法判断两次请求来自同一个用户。通过使用会哈技术，可以将来自同一浏览器的请求联系起来。

🎶一、 会话的定义

  PHP中的session会话包括包含以下两个部分：
  ①会话ID:是加密的随机数，由PHP生成，在会话的生命周期中都会保存在客户端。
  ②session：保存登录信息，存放在服务器。
当用户登录成功时，PHP启动会话，这样就可以实现全局预定义$ _SESSION中存储登录凭证，同时PHP还会给这个会话生成一个加密的ID发送给浏览器，用于浏览器与此会话的联系，浏览器关闭后这个ID也回被销毁，所以浏览器关闭后，都需要重新登录系统。
  当没有关闭浏览器，且用户再次访问其他页面时，回携带此ID，此时服务器会依据ID获得对于的对话，从会话中读取用户登录凭证进行判断。

🎶二、 启动会话

  把登录信息存储到PHP session中之前，必须通过sesion_start( )启动会话。sesion_start( )函数必须位于标签之前，且前面不能有任何输出，下面通过编写一个没有启动的会话和启动的会话的案例代码查看两者的区别。

（1）没有启动的会话：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 让网页的宽度自动适应手机屏幕的宽度 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>没有启动会话</title>
    </head>
    <body>
    没有启动会话
    </body>
</html>

（2）启动的会话：
定义一个for循环访问数组：

<?php
//启动会话
session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 让网页的宽度自动适应手机屏幕的宽度 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>没有启动会话</title>
    </head>
    <body>
    没有启动会话
    </body>
</html>

🎶三、 会话变量

  如果会话不存储用户的信息，那么就传递会话ID，服务器并不能判断当前访问的用户是谁。会话启动后，应该将用户的保存在PHP全局预定义的数组$_SESSION中如下例案例代码模拟了页面·访问次数。如果第一次登录（关闭浏览器访问案例代码），保存登录凭证，计数为1；如果浏览器登录案例代码后，刷新当前页面，此处登录凭证还存在，计数为1；

（1）刷新会话计数加1

<?php

//启动会话
session_start();
//判断是否存在用户的登录凭证，如果存在count加1
if(isset($_SESSION['login_status'])){

    //用户登录后，再次访问页面
    $_SESSION['login_status']['count']++;
}else{
    //用户第一次登录访问，模拟保存用户信息
    $_SESSION['login_status']=array('id'=>'1','name'=>'杨浪','tel'=>'143243243','cout'=>'1');
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 让网页的宽度自动适应手机屏幕的宽度 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>启动会话</title>
    </head>
    <body>
    <?php
    echo $_SESSION['login_status']['name'].",欢迎你,".
    "这是你在此页面留下的笔".$_SESSION['login_status']['count']."次脚印！";
    ?>
    </body>
</html>

  案列效果图如下图所示。在不关闭浏览器的情况下，如果服务器发送会话ID，后面的请求将不会发送新的会话ID。
在这里插入图片描述

🎶四、删除会话

  如果希望删除某些session数据，可以使用unset（）或者session_destroy()函数。unset()函数用于释放指定的sesion变量，session_destroy( )函数彻底销毁session。删除会话的用法将会在案列中实施。

🎶五、首页登录凭证验证

  使用WEUI的底部导航构建首页面，之间拷贝对应的资源，在顶部编写PHP代码，启动会话，并判断是否存在登录凭证，如果1不存在就跳到登录页面，如果存在，则进入首页面，并在顶部页面显示用户欢迎页面。
在这里，约定登录凭证保存在session数组中的login_statuis键中，并且登录凭证是一组数据，存放登录用户的ID和姓名。

(1)给首页添加验证【index.php】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页面</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link rel="stylesheet" href="css/weui.css" />
        <!-- 自定义的css -->
        <link rel="stylesheet" href="css/demo.css" />
    </head>
    <body ontouchstart>
    <?php
    //通过session获取登录信息
    session_start();
    $data=$_SESSION['login_status'];
    if($data==null){
        header("Refresh:1,Url=del.php");
    }

    ?>
    <div class="page__bd" style="margin: 10px;">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <img src="images/me.png" alt="">
                </div>
                <div class="weui-cell__bd">
                    <span><?php echo $data['name']?></span>
                    <div><?php echo $data['tel']?></div>
                </div> 
                <div class="weui-cell__ft">
                    <a style="color: red;" href="loginOut.php">退出</a>
                </div> 
            </div>
        </div>
    </div>
        <div class="weui-tabbar" style="width: 100%; position: fixed; bottom: 0;">
            <div class="weui-tabbar__item">
                <div tyle="display: inline-block; position: relative;">
                    <img src="./images/home.png" alt="" class="weui-tabbar__icon">
                </div>
                <p class="weui-tabbar__label">首页</p>
            </div>
            <div class="weui-tabbar__item">
                <img src="./images/type.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">分类</p>
            </div>
            <div class="weui-tabbar__item">
                <div style="display: inline-block; position: relative;">
                    <img src="./images/car.png" alt="" class="weui-tabbar__icon">
                </div>
                <p class="weui-tabbar__label">购物车</p>
            </div>
            <div class="weui-tabbar__item weui-bar__item_on">
                <img src="./images/me.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">我</p>
            </div>
        </div>
    </body>
</html>

🎶六、创建登录首页

  新建html文件，在登录页面中使用WeUI表单组件构成，主键与表单注册页面类似，登录表单中包含电话和密码，登录时不使用表单提交方式，而是给按钮添加点击事件，在绑定事件login方法中使用AJAX POST提交登录信息。

（1）给首页添加验【del.php】：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 让网页的宽度自动适应手机屏幕的宽度 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>用户注册</title>
         <!-- 引入 本地 css文件 -->
        <link rel="stylesheet" href="css/weui.css"/>
        <link rel="stylesheet" href="jquery-confirm/jquery-confirm.css"/>
        <!-- 引入本地js文件 -->
        <script src="js/jquery-3.6.1.min.js"></script>
        <script src="jquery-confirm/jquery-confirm.js"></script>
        
    </head>
    <body>
    
        <form class="weui-form" id="login_form">
        <div class="weui-form__text-area">
          <h2 class="weui-form__title">用户登录</h2>
        </div>
        <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells">
                    <label class="weui-cell">
                        <div class="weui-cell__hd"><span class="weui-label">手机</span></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" name="tel" placeholder="填写本人手机号" />
                        </div>
                    </label>
                    
                    
                    <label class="weui-cell">
                        <div class="weui-cell__hd"><span class="weui-label">密码</span></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" name="pwd" placeholder="填写六位密码" type="password" />
                        </div>
                    </label>
                    
                </div>
            </div>
        </div>
        <div class="weui-form__tips-area"></div> <!-- 表单提示 -->
        <div class="weui-form__opr-area">
            <button type="button" class="weui-btn weui-btn_primary" onclick="login()">登录</button>
        </div>
        </form>
        <script>
       function login(){
    $.aler(
    {
    titlr:'提示',
    content:'按下登录按钮！';
    })
       }
        </script>
    </body>
</html>

🎶七、登录验证

在登录页面用户输入手机和密码，并按下登录键时，触发按钮onclick事件，调用login方法。在login方法中获取手机和密码，使用jQuery中的POST提交方法，将数据提交到修改登录页面进行处理。将获取的密码用MD5加密，然后拼接成查询语句执行。如果存在用户，将用户存储信息存储在会话中，并将执行结果返回调用页面，在此任务中需要修改给首页添加验证的代码。

修改login方法【del.php】：

<script>
       function login(){
        //获取表单的内容
           var tel=$('#login_form input[name=tel]').val();
           var pwd=$('#login_form input[name=pwd]').val();
           //表单内容通过ajax进行提交
         $.post(
            "delyz.php",
            {"tel":tel,"pwd":pwd},
            function(res){
                //将PHP返回的JSON字符串解析成对象
                var obj=$.parseJSON(res);
               if(obj.success){                            
                $.confirm({
                    title:'登录提示！',
                    content:obj.msg,
                    buttons:{
                        "确实":function(){
                            //跳转到首页
                            window.location="index.php"

                        }
                    }
                });
               }else{
                $.alert(obj.msg);
                
               }
            }
         )
       }
        </script>

修改login方法的运行结果：
在这里插入图片描述
（2）给页面添加验证的数据库处理代码怕【delyz.php】：

<?php
// 默认返回前端的数据
$obj=array("success"=>false,"msg"=>"登录失败，用户名或密码错误请重新输入");
// 1.建立数据库shop连接
$conn=mysqli_connect("localhost","root","123456","shop");
//2.编写SQL语句
//获取电话号码和密码
$tel=$_POST['tel'];
$pwd=md5($_POST['pwd']);
$sql="select * from users where tel='$tel' and pwd='$pwd'";
// echo $sql;
//3.执行SQL语句，保存结果及对象
$rs=mysqli_query($conn,$sql);
//4.处理结果集如果存在查询的用户
if(mysqli_num_rows($rs)){
    //启动会话
    session_start();
    //将登录凭证保存
    //获取第一行数据
    $row=mysqli_fetch_array($rs);

    $_SESSION['login_status']=array("id"=>$row['Id'],
                                   "name"=>$row['name'],
                                   "tel"=>$row['tel'], );
$obj=array("success"=>true,"msg"=>"登录成功请点击进入首页");
}
echo json_encode($obj);
//释放资源，关闭连接
mysqli_free_result($rs);
mysqli_close($conn);
exit;
?>

运行结果图：

请添加图片描述
请添加图片描述

🎶八、退出登录

退出登录只需要销毁会话即可，在首页添加一个【退出】按钮链接，点击此按钮会调用登录界面，而首页会话将会销毁，3秒后跳转到登录页面。
（1）给首页添加验证代码【loginOut.php】：

<?php 
session_start();
unset($_SESSION["login_status"]);
//页面3秒后进行跳转
header("Refresh:3,Url=del.php");
echo "退出成功,3秒后跳转到登录界面";
?>

运行结果：
在这里插入图片描述

结束语🥇

以上就是PHP程序设计
持续更新PHP程序设计教程，欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

标签： php android 开发语言
本文转载自: https://blog.csdn.net/2301_77628600/article/details/138722445
版权归原作者 曼亿点 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【PHP【实战项目】系统性教学】——使用最精简的代码完成用户的登录与退出”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航