PHP实现用户登录页面

客官°小女子只卖身不卖艺 2022-01-25 22:35 342阅读 0赞

PHP学习日常，放在上面记录一下咯  
我用了bootstrap框架，这样的界面要好看一点  
登录页面：  
![image.png][]  
必须用户名、密码、验证码都输入正确才能登录成功喔，否则出现下面提示  
![image.png][image.png 1]  
![image.png][image.png 2]  
登陆成功之后，登录和注册选项切换为用户昵称和注销选项：  
![image.png][image.png 3]  
登陆成功之后：  
![登录成功之后][20190527140059481.png]  
选择注销：  
![在这里插入图片描述][20190527143258633.png] ![在这里插入图片描述][20190527143314762.png]  
HTML代码：

JS代码：

connect.php(连接数据库)：

<?php
    $link=new PDO("mysql:host=localhost;port=3306;dbname=db","root","");
    $link->query("set names utf8");

get.php(获取用户登录信息):

<?php
    include_once ("connect.php");
    session_start();/*开启会话*/
    if (isset($_SESSION['username'])){
       /* 判断用户会话里用户名是否存在，即用户是否登录*/
        $json['nc']=$_SESSION['nc'];/*把昵称存起来，一会返回给首页*/
        $json['flag']=true;/*用户已经登录，标志flag为true*/
    }else
        $json['flag']=false;/*用户已经登录，标志flag为true*/
    echo json_encode($json);/*返回json*/

<?php
    include_once ("connect.php");
    session_start();/*开启会话*/
    $user=$_GET['username'];/*获取登录表单提交过来的数据*/
    $pwd=$_GET['pwd'];
    $yzm=$_GET['yzm'];
    if($yzm==$_SESSION['vCode']){/*当用户输入的验证码和图片验证码相同时*/
        $result=$link->query("select * from `user` where username='$user' and pwd='$pwd'");
        $link = null;
        $row = $result->fetch();/*读取从数据库获取的数据*/
        if ($row) {/*如果数据存在，即用户登录成功*/
            $_SESSION['username'] = $row['username'];
            /*将用户名和昵称存在服务器，可以多个页面使用*/
            $_SESSION['nc'] = $row['nc'];
            $flag=3;
        }else{/*用户名或密码错误*/
            $flag=2;
        }
    }else{/*验证码输入错误*/
        $flag=1;
    }
    echo $flag;

logout.php(注销)：

<?php
    session_start();
    unset($_SESSION['username']);//销毁用户名
    unset($_SESSION['nc']);//销毁昵称
    echo json_encode(true);//返回结果

[image.png]: /images/20220126/8c8d824ee3e2495c8bbf2fda2515fe73.png
[image.png 1]: /images/20220126/9e2dace5fcb144be985058e77033c7ee.png
[image.png 2]: /images/20220126/ba451a375b18400d93f11dc32cde9021.png
[image.png 3]: /images/20220126/d676d173eacd4f6b95485175335356e4.png
[20190527140059481.png]: /images/20220126/eda113f012be41f9b7252b04c875f20b.png
[20190527143258633.png]: https://img-blog.csdnimg.cn/20190527143258633.png
[20190527143314762.png]: /images/20220126/4530cfaffb7445fb803740002f9405de.png