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

来吧展示：

step1: 动态获取用户头像信息

引入 jquery.js 文件 <script src="/static/assets/vendors/jquery/jquery.js"></script> 显示头像的时机：在输入完邮箱后鼠标跳转到下一个input中才显示，所以事件是 blur $('#email').on('blur', function () { )} 利用正则表达式去判断用户输入的是不是邮箱 var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/ 忽略掉文本框为空或者不是一个邮箱 方法是 emailFormat.test()

if (!value || !emailFormat.test(value)) return 利用ajax的方式去获取头像信息，使用淡入淡出方式展示图片 $.get('/admin/api/avatar.php', { email: value }, function (res) { // 希望 res => 这个邮箱对应的头像地址 if (!res) return // 展示到上面的 img 元素上 // $('.avatar').fadeOut().attr('src', res).fadeIn() $('.avatar').fadeOut(function () { // // 等到 淡出完成 $(this).on('load', function () { // // 图片完全加载成功过后 $(this).fadeIn() }).attr('src', res) }) }) 创建一个api文件夹，专门用来存放接口文件 avatar.php <?php require_once '../../config.php'; // 1. 接收传递过来的邮箱 if (empty($_GET['email'])) { exit('缺少必要参数'); } $email = $_GET['email']; // 2. 查询对应的头像地址 $conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); if (!$conn) { exit('连接数据库失败'); } $res = mysqli_query($conn, "select avatar from users where email = '{$email}' limit 1;"); if (!$res) { exit('查询失败'); } $row = mysqli_fetch_assoc($res); // 3. echo echo $row['avatar']; 整合 login.php 代码 $(function ($) { var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/ $('#email').on('blur', function () { var value = $(this).val() // 忽略掉文本框为空或者不是一个邮箱 if (!value || !emailFormat.test(value)) return // console.log(value) $.get('/admin/api/avatar.php', { email: value }, function (res) { // 希望 res => 这个邮箱对应的头像地址 if (!res) return // 展示到上面的 img 元素上 // $('.avatar').fadeOut().attr('src', res).fadeIn() $('.avatar').fadeOut(function () { // // 等到 淡出完成 $(this).on('load', function () { // // 图片完全加载成功过后 $(this).fadeIn() }).attr('src', res) }) }) }) })

step2: 首页index.php的站点内容统计数据的动态呈现

引入 functions.php 文件执行数据库的查询操作 require_once '../functions.php'; 执行数据的查询 $posts_count = mysql_one('select count(1) as num from posts;')['num']; $categories_count = mysql_one('select count(1) as num from categories;')['num']; $comments_count = mysql_one('select count(1) as num from comments;')['num']; 将数据动态呈现到页面 <ul class="list-group"> <li class="list-group-item"><strong><?php echo $posts_count ;?></strong>篇文章（<strong>2</strong>篇草稿）</li> <li class="list-group-item"><strong><?php echo $categories_count; ?></strong>个分类</li> <li class="list-group-item"><strong><?php echo $comments_count; ?></strong>条评论（<strong>1</strong>条待审核）</li> </ul>

step3: 使用饼图呈现统计数据

来吧展示：

echarts官网下载文件 https://echarts.apache.org/zh/index.html找到想绘制的饼图实例 引入 echarts.min.js 文件 <script src="/static/assets/vendors/echarts/echarts.min.js"></script> 准备一个盒子去展示饼图 <div class="col-md-4"> <div id="main" style="width: 600px;height:400px;"></div> </div> 制作饼图 <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '站点内容统计', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['文章', '分类', '评论'] }, series: [ { name: '数据统计', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: <?php echo $posts_count; ?>, name: '文章'}, {value: <?php echo $categories_count; ?>, name: '分类'}, {value: <?php echo $comments_count; ?>, name: '评论'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); </script>

step4:获取当前登录用户信息与头像

sidebar.php

//php部分 require_once '../functions.php'; $current_user = get_userinfo(); //html部分 <div class="profile"> <img class="avatar" src="<?php echo $current_user['avatar'] ;?>"> <h3 class="name"><?php echo $current_user['nickname'] ;?></h3> </div>

step5: 分类列表数据呈现

引入 functions.php 以及判断用户登录状态 require_once '../functions.php'; get_userinfo(); 查询 categories 表中所有数据 $categories = mysql_all('select * from categories;'); 将查询到的数据渲染到页面上 <tbody> <?php foreach ($categories as $item): ?> <tr> <td class="text-center"><input type="checkbox"></td> <td><?php echo $item['name']; ?></td> <td><?php echo $item['slug']; ?></td> <td class="text-center"> <a href="javascript:;" class="btn btn-info btn-xs">编辑</a> <a href="javascript:;" class="btn btn-danger btn-xs">删除</a> </td> </tr> <?php endforeach ?> </tbody>

step5: 添加分类功能

来吧展示：

在添加分类的 form 表单中加入 method 与 action 属性 <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>"> 在名称与别名中添加 name 属性 name 属性的名字与id名字一致 <input id="name" name="name" class="form-control" name="name" type="text" placeholder="分类名称"> <input id="slug" name="slug" class="form-control" name="slug" type="text" placeholder="slug"> 判断表单提交方式是否为 post ，如果是则执行add_category() 函数 if($_SERVER['REQUEST_METHOD'] === 'POST'){ add_category(); } 插入更新语句 更新数据库 function add_category(){ if(empty($_POST['name']) || empty($_POST['slug'])){ $GLOBALS['message'] = '请完整填写表单'; return; } $name = $_POST['name']; $slug = $_POST['slug']; $rows = mysql_change("insert into categories values (null, '{$slug}', '{$name}');"); //添加成功与添加失败的信息提示 $GLOBALS['success'] = $rows > 0; $GLOBALS['message'] = $rows <= 0 ? '添加失败！' : '添加成功！'; } 添加成功与添加失败的错误信息呈现 引入 bootstrap.css 文件 <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css"> <?php if (isset($message)): ?> <?php if ($success): ?> <div class="alert alert-success"> <strong>成功！</strong> <?php echo $message; ?> </div> <?php else: ?> <div class="alert alert-danger"> <strong>错误！</strong> <?php echo $message; ?> </div> <?php endif ?> <?php endif ?>

step6: 单条数据删除

在删除的 a 标签中更改 href 属性值，当点击删除时跳转到删除页 <a href="/admin/categories.php?id=<?php echo $item['id']; ?>"class="btn btn-info btn-xs">编辑</a> categroies.php <?php require_once '../functions.php'; if (empty($_GET['id'])) { exit('缺少必要参数'); } $id = $_GET['id']; $rows = mysql_change('delete from categories where id in (' . $id . ');'); header('Location: /admin/categories.php'); ?>

step7: 批量删除的显示与隐藏

来吧展示：

给批量删除的标签加上id属性 <a id = "btn-delete" class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a> 实现批量删除方法一： 这个方法不能从根本上删除数据，不宜采纳 // 实现批量操作方法一： $(function($){ var $tbodyCheckboxs = $('tbody input') var $btnDelete = $('#btn_delete') $tbodyCheckboxs.on('change',function(){ var flag = false $tbodyCheckboxs.each(function(i,item){ if($(item).prop('checked')){ flag = true } }) flag ? $btnDelete.fadeIn() : $btnDelete.fadeOut() }) }) 实现批量操作方法二： 能从根本上实现批量删除 //实现批量操作方法二： $(function($){ var $tbodyCheckboxs = $('tbody input') var $btnDelete = $('#btn_delete') var allCheckeds = [] $tbodyCheckboxs.on('change',function(){ var id = $(this).data('id') if($(this).prop('checked')){ allCheckeds.push(id) }else{ allCheckeds.splice(allCheckeds.indexOf(id),1) } console.log(allCheckeds) allCheckeds.length ? $btnDelete.fadeIn() : $btnDelete.fadeOut() // 显示批量删除都有哪些id值 $btnDelete.attr('href','/admin/category-delete.php?id='+allCheckeds) // 要用到dom属性下的serch属性，所有要换成prop }) })

step8: 编辑分类

来吧展示：

判断用户是编辑还是添加，添加是插入数据，编辑是更新数据 if (empty($_GET['id'])) { // 添加 if ($_SERVER['REQUEST_METHOD'] === 'POST') { add_category(); } }else { $current_edit_category = mysql_one('select * from categories where id = ' . $_GET['id']); if ($_SERVER['REQUEST_METHOD'] === 'POST') { edit_category(); } } 编辑函数 function edit_category () { global $current_edit_category; // 接收并保存 $id = $current_edit_category['id']; $name = empty($_POST['name']) ? $current_edit_category['name'] : $_POST['name']; $current_edit_category['name'] = $name; $slug = empty($_POST['slug']) ? $current_edit_category['slug'] : $_POST['slug']; $current_edit_category['slug'] = $slug; // insert into categories values (null, 'slug', 'name'); $rows = mysql_change("update categories set slug = '{$slug}', name = '{$name}' where id = {$id}"); $GLOBALS['success'] = $rows > 0; $GLOBALS['message'] = $rows <= 0 ? '更新失败！' : '更新成功！'; }

3.在编辑的a标签中更改href属性值，根据id去执行相应的编辑功能

<a href="/admin/categories.php?id=<?php echo $item['id']; ?>" class="btn btn-info btn-xs">编辑</a> 在页面中判断用户是添加还是编辑，分别显示不同的页面 <div class="col-md-4"> <?php if (isset($current_edit_category)): ?> <form action="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php echo $current_edit_category['id']; ?>" method="post"> <h2>编辑《<?php echo $current_edit_category['name']; ?>》</h2> <div class="form-group"> <label for="name">名称</label> <input id="name" class="form-control" name="name" type="text" placeholder="分类名称" value="<?php echo $current_edit_category['name']; ?>"> </div> <div class="form-group"> <label for="slug">别名</label> <input id="slug" class="form-control" name="slug" type="text" placeholder="slug" value="<?php echo $current_edit_category['slug']; ?>"> <p class="help-block">https://zce.me/category/<strong>slug</strong></p> </div> <div class="form-group"> <button class="btn btn-primary" type="submit">保存</button> </div> </form> <?php else: ?> <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>"> <h2>添加新分类目录</h2> <div class="form-group"> <label for="name">名称</label> <input id="name" name="name" class="form-control" name="name" type="text" placeholder="分类名称"> </div> <div class="form-group"> <label for="slug">别名</label> <input id="slug" name="slug" class="form-control" name="slug" type="text" placeholder="slug"> <p class="help-block">https://zce.me/category/<strong>slug</strong></p> </div> <div class="form-group"> <button class="btn btn-primary" type="submit">添加</button> </div> </form> <?php endif ?> </div>

step 9 : 退出功能

来吧展示：

在 nav.php 文件的退出 a 链接中更改一下 href 属性值 <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.php"><i class="fa fa-desktop"></i>网站首页</a></li> <li><a href="profile.php"><i class="fa fa-user-circle-o"></i>个人中心</a></li> <li><a href="/admin/login.php?action=logout"><i class="fa fa-sign-out"></i>退出</a></li> </ul> </nav> 在 login.php 文件中加入实现退出功能代码，删除 session // 退出功能 if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action']) && $_GET['action'] === 'logout') { // 删除了登录标识session unset($_SESSION['current_login_user']); }