用户登录动态切换头像及切换名字

其他 2019-05-09 21:50:48 阅读次数: 0

登录前验证用户动态切换头像

效果图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>

做一个记录把，每天进步一点点，有兴趣的小伙伴私信加关注哦。

猜你喜欢

转载自blog.csdn.net/qq_31147847/article/details/89387975
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022