PHP简单的登录前后端整理(伪分离)

最新推荐文章于 2023-11-07 19:48:57 发布

丨Daisy丨

最新推荐文章于 2023-11-07 19:48:57 发布

阅读量1k

点赞数

分类专栏： PHP 文章标签： html5

本文链接：https://blog.csdn.net/Daisy_Journal/article/details/108277397

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基于之前的session登录案例,为了简化前端代码并且做到前后端分离(token还不会,只能算思路更清晰),今天研究了一下写出了一下一种方案,总结一下,能给大家提供一个思路就更好啦!

思路:

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login {
            width: 400px;
            margin: 0 auto ;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div class="login">
        <h2> 登录</h2>
        <p>帐号: <input type="text">
        <p>密码: <input type="password">
        <p><a id="login">登录</a>
    </div>
   <h3>注销</h3>
</body>
</html>
<!-- 引入jq文件 -->
<script src="http://www.juhuaguai.club//public/jq.js"></script>
<script>
    document.querySelector("#login").addEventListener('click',function(){
       let usr = document.querySelector('.login input[type = text]').value
       let pwd = document.querySelector('.login input[type = password]').value
       if ( usr.length >0 && pwd.length>0 ){
           $.ajax({
               type:'post',
               url:'./login.php',
               data:{
                "usr":usr,
                "pwd":pwd,
               },
               async:false,
               success:function(res){
                //后台请求返回数据
                //    console.log(res);
                res = JSON.parse(res)
                if (res.type == 'success') {
                    //成功登录
                    location.reload()
                }else{
                    //登录失败
                    alert(res.msg)
                }
               }
            })
       }else{
           alert('帐号或密码为空')
       }
    })

    document.querySelector("h3").addEventListener('click',function(){
        $.ajax({
            type:'post',
            url:'./login.php',
            data:{
                'act':"zhuxiao"
            },
            async:false,
            success:function(res){
                console.log(res);
            }
         })
    })
</script>
<?php
    //开启会话
    session_start();
    if (  !$_SESSION["login"] ) {
        //没有登录,显示登录框
        echo "
        <script>
        document.querySelector('.login').style.display = 'block'
        </script>
        ";
    }else{
        echo "
        登录成功
        ";
    }
?>

<?php
if ( isset($_POST['act']) ){
    //注销功能
    session_start();
    $_SESSION['login'] = false;
}else{
    //登录
    $usr = $_POST['usr'];
    $pwd = $_POST['pwd'];
    //判断条件 此处只是简单举例,具体请更加业务需求更改
    if ( $usr == '123' ){
        session_start();
        $_SESSION['login'] = true;
        $ret['type'] = 'success';
    }else{
        $ret['type'] = 'fail';
        $ret['msg'] = '账户错误';
    }
    echo json_encode($ret); 
}