登录前验证用户动态切换头像
效果图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 « 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 « 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 « 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>
做一个记录把,每天进步一点点,有兴趣的小伙伴私信加关注哦。
扫描二维码关注公众号,回复:
6181903 查看本文章