阿里百秀后台管理项目笔记 ---- 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;
}
