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

科技2026-03-15 5

摘要

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

step 1 : 整合全部静态页面

将静态页面全部拷贝到 admin 目录中。

将文件扩展名由 .html 改为 .php ，页面中的 a 链接也需要调整。

调整页面文件中的静态资源路径，将原本的相对路径调整为绝对路径。在 sublime 工具中选中文件夹 admin 右击 --> 查找&&替换

step 2 : 抽离公共部分

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

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

com / sidebar.php

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>

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

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"' : ''; ?>>  <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"> 判断信息是否呈现

<?php if (isset($message)) : ?> <div class="alert alert-danger"> <strong>错误！</strong><?php echo $message; ?> </div> <?php endif; ?>

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; }

Processed: 0.011, SQL: 9