用戶登錄動態切換頭像及切換名字

登錄前驗證用戶動態切換頭像

效果圖1

效果圖2

效果圖3

效果圖4

登錄頁面由JS調用AJAX請求服務器
示例代碼


<!--
    提交數據表單
    驗證用戶賬號密碼
    連接數據庫



-->
<?php

    //保存用戶信息
    session_start();
    //載入配置文件

    require_once '../config.php';
    //1.效驗
    function login(){
        //效驗用戶名
        if (empty($_POST['email'])) {
            $GLOBALS['message'] = "用戶名爲空";
            return;
        }
        if (empty($_POST['password'])){
            $GLOBALS['message'] = "密碼爲空";
            return;
        }

        // //提供假數據
        // $email = $_POST['email'];
        // $password = $_POST['password'];

        // if ($email !== 'admin' ){
        //     $GLOBALS['message'] ="用戶名不存在";
        //     return;
        // }
        // if ($password !== '1234'){
        //     $GLOBALS['message'] = "密碼不正確";
        //     return;
        // }
       //保存用戶信息
       $email = $_POST['email'];
       $password = $_POST['password'];

    //2.持久化
    //數據庫連接
   $conn = mysqli_connect(BXiu_DB_HOST, Bxiu_DB_USER, BXiu_DB_PASS, BXiu_DB_NAME);
   if (!$conn){
       exit("<h1>數據庫登錄失敗</h1>");
   }
   
       //數據庫查詢
      $query = mysqli_query($conn,"select * from users where email ='{$email}' limit 1");
      
       //判斷是否登錄成功
       if (!$query){
           $GLOBALS['message'] = "登錄失敗";
           return;
       }
       
       //遍歷
      $user = mysqli_fetch_assoc($query);
      //記錄session 這時候，當前用戶登錄的信息已經保存在SESSION中
       $_SESSION['current_login_user'] = $user;
   
   
        if(!$user){
            $GLOBALS['message'] = "用戶不存在";
            return;
        }

        //數據庫密碼驗證
        if($user['password'] !==$password ){
            $GLOBALS['message'] = "用戶密碼不正確";
            return;
        }
   
   
   
       //3.響應



        header('Location:/admin/index.php');
    } 




if (empty($_SERVER['REQUEST_METHOD'] ==='$_POST')){
    login();
}
?>

<!DOCTYPE php>
<php lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Sign in &laquo; Admin</title>
  <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../assets/css/admin.css">
  <link rel="stylesheet" href="../assets/vendors/animate/animate.css" >
</head>
<body>
  <div class="login">
    <!--清除表單的自動效驗功能 novalidate-->
    <!--客戶端的自動完成功能 autocomplete-->
    <form class="login-wrap<?php echo isset($message) ? " shake animated" : "" ;?>" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" autocomplete="off" novalidate>
      <img class="avatar" src="../assets/img/default.png">
      <!-- 有錯誤信息時展示 -->
      <!-- <div class="alert alert-danger">
        <strong>錯誤！</strong> 用戶名或密碼錯誤！
      </div> -->
      <!--提示錯誤信息-->
      <?php if(isset($message)):?>
            <div class="alert alert-danger">
        <strong>錯誤！</strong><?php echo $message;?>
      </div> 
      <?php endif?>


      <div class="form-group" >
        <label for="email" class="sr-only">郵箱</label>
        <input id="email" name="email" type="email" class="form-control" placeholder="郵箱" autofocus >
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">密碼</label>
        <input id="password" name="password" type="password" class="form-control" placeholder="密碼">
      </div>
      <button class="btn btn-primary btn-block" href="index.php">登 錄</button>
    </form>
  </div>
<script src="/assets/vendors/jquery/jquery.js"></script>
<script>
 //獲取用戶失去焦點的值

 $(function(){
     //獲取文本值
    $("#email").on("blur",function () {
         var value = $(this).val();
        //  console.log(value);獲取值
        if (!value) return;

        //發送AJAX請求
        $.get('/admin/api/avatar-2.php', {email : value}, function (res) {
        //服務器返回的數據
            if (!res) return;
        //設置img 圖片
        $(".avatar").attr("src",res);
        })
    })

 })


</script>
  
 
</body>
</php>

PHP後臺代碼
注意載入配置文件路徑要正確

<?php

//載入配置信息
 require_once '../../config-2.php';
//接收客戶端的請求
if (empty($_GET['email'])){
    exit("請傳入用戶參數");
}
//保護用戶值
$email = $_GET['email'];

//登錄數據庫

$connt = mysqli_connect(BAXIU_DB_HOST, BAIXIU_DB_USER, BAIXIU_DB_PASS, BAIXIU_DB_NAME);
//判斷用戶登錄成功
if(!$connt){
    exit('用戶登錄失敗');
}
//查詢
 $querys =  mysqli_query($connt, "select avatar from users where email = '{$email}' limit 1");
if(!$querys){
    exit("不存在");
}

//遍歷數據
    $res = mysqli_fetch_assoc($querys);

//輸出數據
   echo $res['avatar'];


?>

抽離共用代碼原來的

      <img class="avatar" src="/static/uploads/avatar.jpg">
      <h3 class="name">小花</h3>

修改爲

      <img class="avatar" src="<?php echo $user_current['avatar']?>">
      <h3 class="name"><?php echo $user_current['nickname']?></h3>

後臺源碼

 <?php
require_once '../function.php';

//拿到的是結果集
$user_current = BAIXIU_get_current_user();




?>
<div class="aside">
    <div class="profile">
      <img class="avatar" src="<?php echo $user_current['avatar']?>">
      <h3 class="name"><?php echo $user_current['nickname']?></h3>
    </div>
    <ul class="nav">
      <li <?php echo $current_page === 'index' ? ' class="active"' : '';?>>
        <a href="index.php"><i class="fa fa-dashboard"></i>儀表盤</a>
      </li>
      <?php $menu_posts = array('posts', 'post-add', 'categories');?>
      <li <?php echo in_array($current_page, $menu_posts)? ' class="active"' : '' ;?>>
        <a href="#menu-posts" <?php echo in_array($current_page, $menu_posts)? '' :' class="collapse collapsed"';?>  data-toggle="collapse">
          <i class="fa fa-thumb-tack"></i>文章<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-posts" class="collapse <?php echo in_array($current_page, $menu_posts)? ' in' : '';?>">
          <li <?php echo $current_page === 'posts' ? ' class="active"' : '';?>><a href="posts.php">所有文章</a></li>
          <li <?php echo $current_page === 'post-add'? ' class = "active"' : '';?>><a href="post-add.php">寫文章</a></li>
          <li <?php echo $current_page === 'categories'? ' class = "active"' : '';?>><a href="categories.php">分類目錄</a></li>
        </ul>
      </li>
      <li <?php echo $current_page ==='comments' ? ' class = "active"' :''; ?>>
        <a href="comments.php"><i class="fa fa-comments"></i>評論</a>
      </li>
      <li <?php echo $current_page ==='users'? ' class ="active"' :'';?>>
        <a href="users.php"><i class="fa fa-users"></i>用戶</a>
      </li>
      <?php $menu_settings = array('nav-menus', 'slides', 'settings');?>
      <li <?php echo in_array($current_page, $menu_settings)? ' class="active"': '';?>>
        <a href="#menu-settings" <?php echo in_array($current_page, $menu_settings) ? '' :' class="collapse collapsed"';?> data-toggle="collapse">
          <i class="fa fa-cogs"></i>設置<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-settings" class="collapse <?php echo in_array($current_page, $menu_settings) ? ' in' : '';?>">
          <li <?php echo $current_page === 'nav-menus'? ' class="active"': '';?>><a href="nav-menus.php">導航菜單</a></li>
          <li <?php echo $current_page === 'slides' ? ' class="active"' : '';?>><a href="slides.php">圖片輪播</a></li>
          <li <?php echo $current_page === 'settings'? ' class="active"' :'';?>><a href="settings.php">網站設置</a></li>
        </ul>
      </li>
    </ul>
  </div>

封裝共用session 代碼
function.php文件

<?php

//封裝共用函數

session_start();

//獲取當前用戶信息，如果沒有獲取到則直接跳轉登錄頁

    function BAIXIU_get_current_user () {
        if(empty($_SESSION['current_login_user'])){
            //沒有登錄信息
            header('Location:/admin/login-1.php');
            exit();//結束代碼
        }
        return $_SESSION['current_login_user'];
    }



?>

重點 session 保存用戶數據
用戶登陸數據庫時保存用戶信息
部分代碼

  //2.持久化
    //數據庫連接
   $conn = mysqli_connect(BXiu_DB_HOST, Bxiu_DB_USER, BXiu_DB_PASS, BXiu_DB_NAME);
   if (!$conn){
       exit("<h1>數據庫登錄失敗</h1>");
   }
   
       //數據庫查詢
      $query = mysqli_query($conn,"select * from users where email ='{$email}' limit 1");
      
       //判斷是否登錄成功
       if (!$query){
           $GLOBALS['message'] = "登錄失敗";
           return;
       }
       
       //遍歷
      $user = mysqli_fetch_assoc($query);
      //記錄session 這時候，當前用戶登錄的信息已經保存在SESSION中
       $_SESSION['current_login_user'] = $user;
   
   
        if(!$user){
            $GLOBALS['message'] = "用戶不存在";
            return;
        }

        //數據庫密碼驗證
        if($user['password'] !==$password ){
            $GLOBALS['message'] = "用戶密碼不正確";
            return;
        }
   
   
   
       //3.響應



        header('Location:/admin/index.php');

登錄界面全部源碼與上面，這裏重點介紹session有重複

<!--
    提交數據表單
    驗證用戶賬號密碼
    連接數據庫



-->
<?php

    //保存用戶信息
    session_start();
    //載入配置文件

    require_once '../config.php';
    //1.效驗
    function login(){
        //效驗用戶名
        if (empty($_POST['email'])) {
            $GLOBALS['message'] = "用戶名爲空";
            return;
        }
        if (empty($_POST['password'])){
            $GLOBALS['message'] = "密碼爲空";
            return;
        }

        // //提供假數據
        // $email = $_POST['email'];
        // $password = $_POST['password'];

        // if ($email !== 'admin' ){
        //     $GLOBALS['message'] ="用戶名不存在";
        //     return;
        // }
        // if ($password !== '1234'){
        //     $GLOBALS['message'] = "密碼不正確";
        //     return;
        // }
       //保存用戶信息
       $email = $_POST['email'];
       $password = $_POST['password'];

    //2.持久化
    //數據庫連接
   $conn = mysqli_connect(BXiu_DB_HOST, Bxiu_DB_USER, BXiu_DB_PASS, BXiu_DB_NAME);
   if (!$conn){
       exit("<h1>數據庫登錄失敗</h1>");
   }
   
       //數據庫查詢
      $query = mysqli_query($conn,"select * from users where email ='{$email}' limit 1");
      
       //判斷是否登錄成功
       if (!$query){
           $GLOBALS['message'] = "登錄失敗";
           return;
       }
       
       //遍歷
      $user = mysqli_fetch_assoc($query);
      //記錄session 這時候，當前用戶登錄的信息已經保存在SESSION中
       $_SESSION['current_login_user'] = $user;
   
   
        if(!$user){
            $GLOBALS['message'] = "用戶不存在";
            return;
        }

        //數據庫密碼驗證
        if($user['password'] !==$password ){
            $GLOBALS['message'] = "用戶密碼不正確";
            return;
        }
   
   
   
       //3.響應



        header('Location:/admin/index.php');
    } 




if (empty($_SERVER['REQUEST_METHOD'] ==='$_POST')){
    login();
}
?>

<!DOCTYPE php>
<php lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Sign in &laquo; Admin</title>
  <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../assets/css/admin.css">
  <link rel="stylesheet" href="../assets/vendors/animate/animate.css" >
</head>
<body>
  <div class="login">
    <!--清除表單的自動效驗功能 novalidate-->
    <!--客戶端的自動完成功能 autocomplete-->
    <form class="login-wrap<?php echo isset($message) ? " shake animated" : "" ;?>" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" autocomplete="off" novalidate>
      <img class="avatar" src="../assets/img/default.png">
      <!-- 有錯誤信息時展示 -->
      <!-- <div class="alert alert-danger">
        <strong>錯誤！</strong> 用戶名或密碼錯誤！
      </div> -->
      <!--提示錯誤信息-->
      <?php if(isset($message)):?>
            <div class="alert alert-danger">
        <strong>錯誤！</strong><?php echo $message;?>
      </div> 
      <?php endif?>


      <div class="form-group" >
        <label for="email" class="sr-only">郵箱</label>
        <input id="email" name="email" type="email" class="form-control" placeholder="郵箱" autofocus >
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">密碼</label>
        <input id="password" name="password" type="password" class="form-control" placeholder="密碼">
      </div>
      <button class="btn btn-primary btn-block" href="index.php">登 錄</button>
    </form>
  </div>
<script src="/assets/vendors/jquery/jquery.js"></script>
<script>
 //獲取用戶失去焦點的值

 $(function(){
     //獲取文本值
    $("#email").on("blur",function () {
         var value = $(this).val();
        //  console.log(value);獲取值
        if (!value) return;

        //發送AJAX請求
        $.get('/admin/api/avatar-2.php', {email : value}, function (res) {
        //服務器返回的數據
            if (!res) return;
        //設置img 圖片
        $(".avatar").attr("src",res);
        })
    })

 })


</script>
  
 
</body>
</php>

後臺主頁面源碼

<?php
//載入配置文件
require_once "../config-2.php";
//記錄SESION
// session_start();
// if(empty($_SESSION['current_login_user'])){
//   header('Location:/admin/login-2.php');
// }
require_once "../function.php";

?>

<!DOCTYPE php>
<php lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Dashboard &laquo; Admin</title>
  <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../assets/css/admin.css">
  <script src="../assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
  <?php include 'inc/nav.php';?>
    <div class="container-fluid">
      <div class="jumbotron text-center">
        <h1>用行動照亮夢想</h1>
        <p>力量, 故事 和 主意.</p>
        <p><a class="btn btn-primary btn-lg" href="post-add.php" role="button">寫文章</a></p>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">站點內容統計：</h3>
            </div>
            <ul class="list-group">
              <li class="list-group-item"><strong>10</strong>篇文章（<strong>2</strong>篇草稿）</li>
              <li class="list-group-item"><strong>6</strong>個分類</li>
              <li class="list-group-item"><strong>5</strong>條評論（<strong>1</strong>條待審覈）</li>
            </ul>
          </div>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
    </div>
  </div>
<?php $current_page = 'index';?>
<?php include 'inc/aside.php';?>
  <script src="../assets/vendors/jquery/jquery.js"></script>
  <script src="../assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
</body>
</php>

做一個記錄把，每天進步一點點，有興趣的小夥伴私信加關注哦。

用戶登錄動態切換頭像及切換名字

登錄前驗證用戶動態切換頭像

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

用戶登錄動態切換頭像及切換名字

新手怎麼學習SEO，SEO入門必學【精品】

雲服務建站

php用戶登錄驗證及效驗

php單條刪除

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結