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

来吧展示：

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

1. 引入 jquery.js 文件

<script src="/static/assets/vendors/jquery/jquery.js"></script>

2. 显示头像的时机：在输入完邮箱后鼠标跳转到下一个input中才显示，所以事件是 blur

$('#email').on('blur', function () {
)}

3. 利用正则表达式去判断用户输入的是不是邮箱

var emailFormat = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/

4. 忽略掉文本框为空或者不是一个邮箱
   方法是 emailFormat.test()

 if (!value || !emailFormat.test(value)) return

5. 利用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)
         })
        })

6. 创建一个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'];

7. 整合 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的站点内容统计数据的动态呈现

1. 引入 functions.php 文件执行数据库的查询操作

require_once '../functions.php';

2. 执行数据的查询

$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'];

3. 将数据动态呈现到页面

<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: 使用饼图呈现统计数据

来吧展示：

1. echarts官网下载文件
   https://echarts.apache.org/zh/index.html
2. 找到想绘制的饼图实例
   
3. 引入 echarts.min.js 文件

 <script src="/static/assets/vendors/echarts/echarts.min.js"></script>

4. 准备一个盒子去展示饼图

        <div class="col-md-4">
           <div id="main" style="width: 600px;height:400px;"></div>
        </div>

5. 制作饼图

<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: 分类列表数据呈现

1. 引入 functions.php 以及判断用户登录状态

require_once '../functions.php';
get_userinfo();

2. 查询 categories 表中所有数据

$categories = mysql_all('select * from categories;');

3. 将查询到的数据渲染到页面上

 <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: 添加分类功能

来吧展示：

1. 在添加分类的 form 表单中加入 method 与 action 属性

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

2. 在名称与别名中添加 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">

3. 判断表单提交方式是否为 post ，如果是则执行add_category() 函数

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

4. 插入更新语句 更新数据库

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 ? '添加失败！' : '添加成功！';
}

5. 添加成功与添加失败的错误信息呈现
   引入 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: 单条数据删除

1. 在删除的 a 标签中更改 href 属性值，当点击删除时跳转到删除页

 <a href="/admin/categories.php?id=<?php echo $item['id']; ?>"class="btn btn-info btn-xs">编辑</a>

2. 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: 批量删除的显示与隐藏

来吧展示：

1. 给批量删除的标签加上id属性

 <a id = "btn-delete" class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>

2. 实现批量删除方法一：
   这个方法不能从根本上删除数据，不宜采纳

// 实现批量操作方法一：
  $(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()
    })
 })

3. 实现批量操作方法二：
   能从根本上实现批量删除

//实现批量操作方法二：
 $(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: 编辑分类

来吧展示：

1. 判断用户是编辑还是添加，添加是插入数据，编辑是更新数据

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

2. 编辑函数

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>

4. 在页面中判断用户是添加还是编辑，分别显示不同的页面

<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 : 退出功能

来吧展示：

1. 在 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>

2. 在 login.php 文件中加入实现退出功能代码，删除 session

// 退出功能
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action']) && $_GET['action'] === 'logout') {
  // 删除了登录标识session
  unset($_SESSION['current_login_user']);
}