阿里百秀后台管理项目笔记 ---- Day01

摘要

在此记录一下阿里百秀项目的教学视频的学习笔记，部分页面被我修改了，某些页面效果会不一样，基本操作是一致的，好记性不如烂笔头，加油叭！！！

step 1 : 整合全部静态页面

将静态页面全部拷贝到 admin 目录中。
将文件扩展名由 .html 改为 .php ，页面中的 a 链接也需要调整。
调整页面文件中的静态资源路径，将原本的相对路径调整为绝对路径。
在 sublime 工具中选中文件夹 admin 右击 --> 查找&&替换

step 2 : 抽离公共部分

由于每一个页面中都有一部分代码（侧边栏和头部）是相同的，分散到各个文件中，不便于维护，所以应该分别抽象到一个公共的文件中。

在 admin 目录中创建一个 com （common 的简称）的文件夹
在这个目录里创建一个 sidebar.php 和 nav.php 文件
随便在一个文件中（eg: index.php）找到侧边栏和头部的代码片段将代码抽离出来

com / sidebar.php

<div class="aside"><div class="profile"><img class="avatar" src="../uploads/avatar.jpg"><h3 class="name">布头儿</h3></div><ul class="nav"><li class="active"><a href="index.php"><i class="fa fa-dashboard"></i>仪表盘</a></li><li><a href="#menu-posts" class="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"><li><a href="posts.php">所有文章</a></li><li><a href="post-add.php">写文章</a></li><li><a href="categories.php">分类目录</a></li></ul></li><li><a href="comments.php"><i class="fa fa-comments"></i>评论</a></li><li><a href="users.php"><i class="fa fa-users"></i>用户</a></li><li><a href="#menu-settings" class="collapsed" data-toggle="collapse"><i class="fa fa-cogs"></i>设置<i class="fa fa-angle-right"></i></a><ul id="menu-settings" class="collapse"><li><a href="nav-menus.php">导航菜单</a></li><li><a href="slides.php">图片轮播</a></li><li><a href="settings.php">网站设置</a></li></ul></li></ul></div>

com/nav.php

<nav class="navbar"><button class="btn btn-default navbar-btn fa fa-bars"></button><ul class="nav navbar-nav navbar-right"><li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li><li><a href="login.html"><i class="fa fa-sign-out"></i>退出</a></li></ul></nav>

在每一个需要这个模块的页面中通过 include 载入 sidebar.php

<?php include 'com/sidebar.php' ;?>

在每一个需要这个模块的页面中通过 include 载入 nav.php ，载入到 main 中

<div class="main">
<?php include 'com/nav.php';?>
</div>

step 3 : 实现侧边栏对应到相应页面显示高亮

由于侧边栏在不同页面时， active class name 出现的位置不尽相同，所以我们需要区分当前 sidebar.php 文件是在哪个页面中载入的，从而明确焦点状态。

每一个菜单项 li <元素：

 <li<?php echo $current_page == 'dashboard' ? ' class="active"' : ''; >>   <a href="index.php"><i class="fa fa‐dashboard"></i>仪表盘</a> </li>

对于有子菜单的菜单项，有一点例外：

<li <?php echo in_array($current_page,$menu_posts) ? 'class="active" ': ''?>><a href="#menu-posts" class="collapsed" data-toggle="collapse"><i class="fa fa-file-text"></i>文章管理<i class="fa fa-angle-right"></i></a><ul id="menu-posts" class="collapse<?php echo in_array($current_page, array('posts', 'post-add', 'categories')) ? ' 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>

sliderbar.php

//php部分
$current_page = isset($current_page) ? $current_page : '';

//html部分
<div class="aside"><div class="profile"><img class="avatar" src="/static/uploads/avatar.jpg"><h3 class="name">布头儿</h3></div><ul class="nav"><li<?php echo $current_page == 'dashboard' ? ' class="active"' : ''; ?>><!-- fa fa-dashboard --><a href="index.php"><i class="fa fa-list"></i>Home</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" class="collapsed" data-toggle="collapse"><i class="fa fa-file-text"></i>文章管理<i class="fa fa-angle-right"></i></a><ul id="menu-posts" class="collapse<?php echo in_array($current_page, array('posts', 'post-add', 'categories')) ? ' 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-user-circle-o"></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" class="collapsed" data-toggle="collapse"><i class="fa fa-wrench"></i>系统设置<i class="fa fa-angle-right"></i></a><ul id="menu-settings" class="collapse<?php echo in_array($current_page, array('nav-menus', 'slides', '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>

comments.php

 <?php $current_page='comments';?>

users.php

<?php $current_page = 'users'; ?>

settings.php

<?php $current_page='settings';?>

…
所有需要跳转页面显示高亮状态的页面以此类推都加上 $current_pag 变量

step 4 : 处理登录页面

调整HTML页面

将 login.php 中的登录连接换成 button 按钮

<a class="btn btn-primary btn-block btn-login" href="index.php">登 录</a>

 <button class="btn btn-primary btn-block btn-login">登录</button>

往表单元素中添加相应的属性 method 与 action

 <form class="login-wrap">

<form class="login-wrap" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >

给邮箱和密码框添加 name 属性

<input id="email" name="email" type="email" class="form-control" placeholder="邮箱" autofocus>

<input id="password" name="password" type="password" class="form-control" placeholder="密码">

处理执行PHP脚本

项目配置文件
由于在接下来的开发过程中，肯定有一部分公共的成员，例如数据库名称，数据库主机，数据库用户名密码等，这些数据应该放到公共的地方，抽象成一个配置文件 config.php 放到项目根目录下。
这个配置文件采用定义常量的方式定义配置成员：

config.php

<?php
define('DB_HOST','127.0.0.1');
/*** 数据库用户名*/
define('DB_USER','root');
/*** 数据库密码*/
define('DB_PASS', '');
/*** 数据库名称*/
define('DB_NAME', 'demo');

载入 config.php 文件

require_once '../config.php';

合法化校验及错误信息展示

if(empty($_POST['email'])){$GLOBALS['message'] = '请输入邮箱';return;}if(empty($_POST['password'])){$GLOBALS['message'] = '请输入密码';return;}

接收数据

   $email = $_POST['email'];$password = $_POST['password'];

5.校验邮箱与密码（假数据)

   if($email !== 'admin@qx.com'){$GLOBALS['message'] = '密码与邮箱不匹配';return;}if($password !== '123'){$GLOBALS['message'] = '密码与邮箱不匹配';return;}

表单状态保持
在输出时为其添加一个 value 属性，值就是 $_POST[‘email’]

<input id="email" name="email" type="email" class="form‐control" value="<?php echo  isset($_POST['email']) ? $_POST['email'] : ''; ?>" placeholder="邮箱" autofocus>

step 5 : 错误消息的呈现

当验证邮箱与密码不匹配时，页面弹出错误信息

引入 bootstarp 样式文件

  <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">

判断信息是否呈现

login.php

      <?php if (isset($message)) : ?><div class="alert alert-danger"><strong>错误！</strong><?php echo $message; ?></div><?php endif; ?><!-- 有错误信息时展示 --><!-- <div class="alert alert-danger"><strong>错误！</strong> 用户名或密码错误！</div> -->

step 6 : 错误信息呈现的动画效果

官网下载动画样式文件 https://animate.style/#migration
引入 animate.css 文件

<link rel="stylesheet" href="/static/assets/vendors/animate/animate.css">

选择错误信息呈现的动画效果

<h1 class="callout-title">Animate.css</h1>
//当选择任意一个动画效果时，会发现中有动画效果的类名添加

栗子：当点击 rubberBand 这个动画时，会在class中添加相应的动画效果的类名

animate__animated animate__rubberBand

在表单中判断是否加入产生动画效果的类

<form class="login-wrap <?php echo isset($message) ?'animate__animated animate__rubberBand' : ''; ?>"method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" novalidate autocomplete="off">//novalidate取消浏览器自定义的信息提示//autocomplete="off"取消历史记录客户端自动完成功能提示

step 7 : 登录功能的实现

来吧展示：

数据库连接查询

连接数据库

// 连接数据库$conn = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);mysqli_query($conn,'set names utf8');if(!$conn){exit('<h1>连接数据库失败</h1>');}

根据邮箱查询用户

// 根据邮箱查询用户信息，limit 是为了提高查询效率 $query = mysqli_query($conn, "select * from users where email = '{$email}' limit 1;");if (!$query) {$GLOBALS['message'] = '登录失败，请重试！';return;}

用户密码比对
其中，密码在数据库中存储的时候要进行加密，百度搜md5在线加密
网址：https://md5jiami.51240.com/
将数据库中的密码换成自己在 md5 加密的 32位密文

login.php

 // 获取登录用户$user = mysqli_fetch_assoc($query);if (!$user) {// 用户名不存在$GLOBALS['message'] = '邮箱与密码不匹配';return;}// 一般密码是加密存储的if ($user['password'] !== md5($password)) {// 密码不正确$GLOBALS['message'] = '邮箱与密码不匹配';return;}

访问控制及登陆状态保持 (用来防止用户不登陆直接跳转到其他页面)


// 将用户信息存放在session中$_SESSION['current_login_user'] = $user;header('Location:/admin/');
}

将之前的（1~4步骤）用户密码验证封装成一个 login 函数，如果是 POST 提交则处理登录业务逻辑

 if ($_SERVER['REQUEST_METHOD'] === 'POST') {login();
}

整合代码
login.php

require_once '../config.php';
// 判断用户是否登录，防止用户不登陆直接跳转到其他页面
session_start();
function login(){if(empty($_POST['email'])){$GLOBALS['message'] = '请输入邮箱';return;}if(empty($_POST['password'])){$GLOBALS['message'] = '请输入密码';return;}$email = $_POST['email'];$password = $_POST['password'];// 连接数据库$conn = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);//防止页面出现乱码（中文显示带？问号）mysqli_query($conn,'set names utf8');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);if (!$user) {// 用户名不存在$GLOBALS['message'] = '邮箱与密码不匹配';return;}// 一般密码是加密存储的if ($user['password'] !== md5($password)) {// 密码不正确$GLOBALS['message'] = '邮箱与密码不匹配';return;}//假数据//  if($email !== 'admin@qq.com'){//     $GLOBALS['message'] = '密码与邮箱不匹配';//     return;//  }// if($password !== '123'){//     $GLOBALS['message'] = '密码与邮箱不匹配';//     return;//  }// 将用户信息存放在session中$_SESSION['current_login_user'] = $user;header('Location:/admin/');
}if ($_SERVER['REQUEST_METHOD'] === 'POST') {// 如果是 POST 提交则处理登录业务逻辑login();
}

在每个页面开头部分加入session状态的判断
栗子： index.php

 session_start();if(empty($_SESSION['current_login_user'])){header('Location:/admin/login.php');
}

step 8 : 封装公共函数

由于接下来的操作（开发）过程中会有很多需要查询数据库和判断用户是否登录的地方。如果每次都按照最原始的方法去写过于麻烦。我们应该将重复的地方提取出来，封装一个公共的函数，方便后期调用和维护。

functions.php

<?php
require_once 'config.php';
//1. 封装判断用户是否登录信息，防止用户不登陆直接跳转到其他页面
session_start();
function get_userinfo(){if(empty($_SESSION['current_login_user'])){header('Location:/admin/login.php');exit();}return $_SESSION['current_login_user'];}//2.封装数据库查询，简化每次查询次数麻烦// 得先引入config.php文件，在文件开头引入// 封装多条数据
function mysql_all($sql){$conn = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);// $conn -> query("set names utf8");mysqli_query($conn,'set names utf8');if(!$conn){exit('连接失败');}$query = mysqli_query($conn,$sql);if(!$query){return false;}$result = array();while ($row = mysqli_fetch_assoc($query)) {$result[] = $row;}mysqli_free_result($query);mysqli_close($conn);return $result;
}
// 封装单条数据
function mysql_one ($sql) {$res = mysql_all($sql);return isset($res[0]) ? $res[0] : null;
}
// 封装增删改数据
function mysql_change ($sql) {$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);mysqli_query($conn,'set names utf8');if (!$conn) {exit('连接失败');}$query = mysqli_query($conn, $sql);if (!$query) {// 查询失败return false;}// 对于增删修改类的操作都是获取受影响行数$affected_rows = mysqli_affected_rows($conn);mysqli_close($conn);return $affected_rows;
}