Skip to content

Latest commit

 

History

History
194 lines (153 loc) · 5.43 KB

管理后台首页.md

File metadata and controls

194 lines (153 loc) · 5.43 KB
Raw

管理后台首页(index.php)

一般我们需要在管理后台首页呈现站点内容统计，站点内容分类图标展示，实现个人中心和退出等功能

管理后台

统计数据

站点内容统计版块的数据，需要通过查询数据库得到具体的数值。

这里使用的mysql数据库

mysql

-- 文章总数:
select count(1) from posts

-- 草稿总数:
select count(1) from posts where status = 'drafted'

-- 分类总数:
select count(1) from categories

-- 评论总数:
select count(1) from comments

-- 待审核的评论总数:
select count(1) from comments where status = 'held'

执行sql查询语句

在index.php加载页面时，执行sql查询语句，获取所需数据

// 查询文章总数
$connection = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// 连接数据库
if (!$connection) {
  die('<h1>Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error() . '</h1>');
}
// 查询数据库
if ($result = mysqli_query($connection, 'select count(1) from posts')) {
  $post_count = mysqli_fetch_row($result)[0];
  // 释放查询数据
  mysqli_free_result($result);
}
// 关闭数据库
mysqli_close($connection);

由于想到在下面的开发过程中，有很多需要查询数据库的操作，故选择封装数据库连接和查询函数xiu_fetch_all($sql)和xiu_fetch_one($sql)到之前的公共函数functions.php文件中，分别负责查询多条数据和单条数据

functions.php

/**
 * 通过一个数据库查询获取多条数据
 * => 索引数组套关联数组
 * @param  [type] $sql [description]
 * @return [type]      [description]
 */
function xiu_fetch_all ($sql) {
  $conn = mysqli_connect(XIU_DB_HOST, XIU_DB_USER, XIU_DB_PASS, XIU_DB_NAME);
  if (!$conn) {
    exit('连接失败');
  }
  $query = mysqli_query($conn, $sql);
  if (!$query) {
    // 查询失败
    return false;
  }
  $result = array();
  while ($row = mysqli_fetch_assoc($query)) {
    $result[] = $row;
  }
  return $result;
}

/**
 * 通过数据库查询获取单条数据
 * => 关联数组
 * @param  [type] $sql [description]
 * @return [type]      [description]
 */
function xiu_fetch_one ($sql) {
  $res = xiu_fetch_all($sql);
  return isset($res[0]) ? $res[0] : null;
}

此时在index.php文件中就可以引入该公共函数的文件，调用相关函数，查询数据库，并用变量接收保存

require_once '../functions.php';
// 判断用户是否登录一定是最先去做
xiu_get_current_user();
// 获取界面所需要的数据
// 文章总数
$posts_count = xiu_fetch_one('select count(1) as num from posts;')['num'];
// 分类总数
$categories_count = xiu_fetch_one('select count(1) as num from categories;')['num'];
// 评论总数
$comments_count = xiu_fetch_one('select count(1) as num from comments;')['num'];

在下面的HTML代码中用php输出的方式呈现出来

index.php

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

后台数据的统计和图表呈现

一半后台数据需要在后台首页（index.php）以图表的形式呈现出来，方面直接看到站点整体数据

这里用到的框架是Chart

引入chart.js文件

<script src="/static/assets/vendors/chart/Chart.js"></script>
var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        datasets: [
          {
            data: [<?php echo $posts_count; ?>, <?php echo $categories_count; ?>, <?php echo $comments_count; ?>],
            backgroundColor: [
              'hotpink',
              'pink',
              'deeppink',
            ]
          },
          {
            data: [<?php echo $posts_count; ?>, <?php echo $categories_count; ?>, <?php echo $comments_count; ?>],
            backgroundColor: [
              'hotpink',
              'pink',
              'deeppink',
            ]
          }
        ],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: [
          '文章',
          '分类',
          '评论'
        ]
      }
    });

个人中心

个人中心呈现一些个人资料，以及需要的修改功能，这在profile.php文件中会讲到个人资料修改功能

退出功能

用户点击退出，返回到登录页

技术的角度就是用户点击登录，清除用户信息，返回到登录页

给退出的a链接上加上一个action表标识，用户点击退出的时候，服务端接收该action，并判断标识，完成删除用户信息操作

navbar.php

 <a href="/admin/login.php?action=logout"><i class="fa fa-sign-out"></i>退出</a>

login.php

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