cookie的demo(简单的登陆验证支付)

最新推荐文章于 2023-01-23 06:05:57 发布

咩有猫腻.

最新推荐文章于 2023-01-23 06:05:57 发布

阅读量422

点赞数

分类专栏：前端后端

本文链接：https://blog.csdn.net/DcTbnk/article/details/105696420

版权

前端后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

在这里插入图片描述
index.html

<body>
    <h1>我是首页面</h1>
    <button name="reg">注册</button><br>
    <button name="login">登录</button><br>
    <button name="back">退出登录</button><br>
    <button name="pay">支付</button>

    <!-- 加载外部js文件,其中有设定cookie和获取cookie函数方法 -->
    <script src="../utils.js"></script>
    <script>
        // 登录按钮
        const oLogin = document.querySelector('[name="login"]');

        // 退出登录按钮
        const oBack = document.querySelector('[name="back"]');

        // 支付按钮
        const oPay = document.querySelector('[name="pay"]');

        // 登录事件
        oLogin.addEventListener('click' , ()=>{
            // 跳转至登录页面
            window.location.href = './02_login.html';
        });

        // 退出登录,就是删除 登录 cookie
        oBack.addEventListener('click' , ()=>{
            // 设定 login cookie 的时效 是负数,就是删除 这条cookie
            mySetCookie('login' , '1111' , -1);
            window.alert('您已经退出登录');
        });


        // 跳转支付事件
        oPay.addEventListener('click' , ()=>{
            // 先判断,是否已经登录,如果没有登录,要先登录,才能去支付页面
            // 如果登录,会设定一个cookie值,表示登录成功
            // 没有这个cookie值,表示没有登录
            // 实际项目中,cookie值的键名和数值,都是固定的,不能随便设定
            
            // 通过外部文件函数,获取cookie对象
            const cookieObj = myGetCookie(document.cookie);
            // 如果有这个cookie键名,输出结果是 cookie的数值
            // 如果没有是undefined
            // cookie中存储的都是字符串内容
            if(cookieObj.login === '1'){
                // 如果有这个 cookie 证明已经登录,直接跳转登录页面
                window.location.href = '04_pay.html';
            }else{
                // 如果没有login,证明还没有登录
                // 弹出确认框 询问是否要跳转值登录页面
                // 点击确定 返回值是true  点击取消 返回值是false
                let bool = window.confirm('您还没有登录,点击确定跳转登录页面');
                // 如果是 true,跳转至登录页面,否则不做任何操作
                if(bool === true){
                    window.location.href = '02_login.html';
                }
            }
        })

    </script>
</body>

login.html

<body>
    <h1>登录页面</h1>
    <!-- 输入账号密码,跳转PHP页面,做验证操作 -->
    <form action="./03_login.php" method="POST">
        账号 : <input type="text" name="regname"><br>
        密码 : <input type="password" name="regpwd"><br>
        <button>登录</button>
    </form>


</body>

login.php

<?php

// 1,获取前端参数
$regname = $_POST['regname'];
$regpwd = $_POST['regpwd'];

// 2,操作数据库

// 链接数据库
$link = mysqli_connect('127.0.0.1' , 'root' , 'root' , 'nz2002' , 3306);

// 设定SQL语句
$sql = "SELECT * FROM `user` WHERE `username` = '{$regname}' AND `userpwd` = '{$regpwd}'";

// 执行SQL语句
$result = mysqli_query($link , $sql);

// 获取执行结果
$arr = mysqli_fetch_all($result);

// 执行判断
if(count($arr) !== 0){
    // 如果数组长度不是0,证明有数据,登录成功
    echo '登录成功';
    // 输出一个 跳转 首页面 的超链接,模拟登录成功的页面内容
    echo '<a href="./01_index.html">返回首页</a>';
    // 通过PHP来设定cookie
    // time() php中获取当前时间
    // 当期事件 + 7天表示的秒数
    setcookie('login' , 1 , time()+7*24*60*60);
}else{
    // 如果登录不成功
    // 输出登录失败的信息内容
    echo '登录失败';
    echo '<a href="./02_login.html">返回登录页面</a>';

}

// PHP中有专门设定cookie的函数方法
// setcookie(键名,数据,时效) 
// setcookie()会自动设定为服务器时间,不用我们转化
// 语法 :  setcookie(键名 , 数值 , time() + 时效时间);
//         time()是PHP获取当前时间的方法
//         PHP中,时间单位都是秒

// PHP中有专门获取cookie的函数方法
// 所有的 cookie 都存储在预定义变量 $_COOKIE 中
// 以数值的方式存储,可以直接通过 $_COOKIE[键名] 获取数据

pay.html

<body>
    <h1>我是支付页面</h1>
</body>

咩有猫腻.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
cookie的demo(简单的登陆验证支付)

index.html<body> <h1>我是首页面</h1> <button name="reg">注册</button><br> <button name="login">登录</button><br> <button name="back"&gt...
复制链接

扫一扫