阿里百秀项目实战day3

其他 2020-04-14 11:49:33 阅读次数: 0

待实现功能

在这里插入图片描述
1.数据展示
2.页数跳转，页面切换
3.分类筛选

退出界面

categories页退出，在navbar中把退出时跳转页面改为

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

在login.php中,增加检验action的代码


if($_SERVER['REQUEST_METHOD']=='GET'&&isset($_GET['action'])&&$_GET['action']==='logout')
{
  unset($_SESSION['current_login_user']);//撤销登陆校验标识
}

在这里插入图片描述

1.文章管理页面-列表展示功能实现

在这里插入图片描述

  • 在数据库中添加大量数据后 因为数据过多，所以需要分页，先做好数据的准备工作

$size = 20;//设一页显示20条数据

//处理分页页码【请求的页面不能小于1也不能超过最大页码】
// 求最大页码数（只要是处理分页功能都一定会用到最大页码数）
$total_count = (int) bx_fetch_one('select count(1) as count 
from posts inner join categories on posts.category_id=categories.id
inner join users on posts.user_id=users.id;')['count'];
$total_pages = (int) ($total_count / $size);
var_dump($total_pages);


//处理分页参数
$page = empty($_GET['page']) ? 1 : (int) $_GET['page'];

//******************方法一*******************/
// $page=$page<1?1:$page;//若强行再url上输入page=负数或超过最大页数的值，将其修改，否则下面posts获取会受影响出错
// $page=$page>$total_pages?$total_pages:$page;
//******************方法二*******************/
//上面两行代码只能修改，但是url上显示的还是不合理的值，所以直接将其跳转到合理值而不是在内部修改更好
if ($page < 1) {
  header('Location:/admin/posts.php?page=1');
}
if ($page > $total_pages) {
  header('Location:/admin/posts.php?page=' . $total_pages);
}


//计算出越过多少条
$offset = ($page - 1) * $size;

//接收筛选参数
$where = '1=1'; //1=1，让$where不为空
if (!empty($_GET['category'])&&$_GET['category']!='all') { //category不为空
  $where = 'posts.category_id=' . $_GET['category'];
}
  • 获取数据
//1.获取全部数据
$posts = bx_fetch("select posts.id,posts.title,posts.created,posts.status,categories.name,users.nickname
from posts
inner join categories on posts.category_id=categories.id
inner join users on posts.user_id=users.id
where {$where}
order by posts.created desc
limit {$offset},{$size}
");
  • html中遍历展示
   <tbody>
          <?php foreach ($posts as $item) : ?>
            <tr>
              <td class="text-center"><input type="checkbox"></td>
              <td><?php echo $item['title']; ?></td>
              <td><?php echo $item['nickname']; ?></td>
              <td><?php echo $item['name']; ?></td>
              <!-- <td><?php //echo get_user($item['user_id']); 
                        ?></td>
              <td><?php //echo get_category($item['category_id']) ; 
                  ?></td> -->
              <td class="text-center"><?php echo bx_convert_date($item['created']); ?></td>
              <!-- 一旦输出的判断或转换逻辑过于复杂，不建议直接写在混编的位置 -->
              <td class="text-center"><?php echo bx_convert_status($item['status']); ?></td>
              <td class="text-center">
                <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
              </td>
            </tr>
          <?php endforeach ?>
        </tbody>

// 2.在html中遍历展示

//处理数据格式转换
//转换状态显示
// @param string $status 英文状态
// @return string        中文状态 

function bx_convert_status($status)
{
  $dict = array(
    'published' => '已发布',
    'drafted' => '草稿',
    'trashed' => '回收站'
  );
  return isset($dict[$status]) ? $dict[$status] : '未知';
}

function bx_convert_date($created)
{
  //2017-07-01 08:08:00
  $timestamp = strtotime($created);
  //打开网页源代码发现显示的不是br，r是有特殊意义的字符，用转义符将其转回r
  return date('Y年m月d日<b\r>H:i:s', $timestamp);
}

2.页数跳转，页面切换

在这里插入图片描述
在这里插入图片描述
要求：

  1. 一次显示5个页码，除了1，2页特殊情况，其他被选中页面都居中
  2. 被选中页码高亮
  3. 点击跳转

1.php中=>一次显示5个页码，除了1，2页特殊情况，其他被选中页面都居中

//计算页码开始,设可见页码为5个
$page = $page > $total_pages ? $total_pages : $page;//请求页数不能超过最大页码
if ($page <= 3) {
  $begin = 1;
  $end = 5;
} else {
  $begin = $page - 2;
  $end = $page + 2;
}
$end = $end > $total_pages ? $total_pages : $end;//$end不能超过最大页码

html中

 <ul class="pagination pagination-sm pull-right">
          <!-- 3--点击跳转 -->
          <li><a href="?page=<?php echo $page - 1 < 1 ? 1 : $page - 1 .$search?>">上一页</a></li>
          <?php for ($i = $begin; $i <= $end; $i++) : ?>
           
            <!--  2--被选中页码高亮 -->
            <li <?php echo $i == $page ? 'class="active"' : '' ?>>
            
            <!-- 3--点击跳转 -->
            <a href="?page=<?php echo $i .$search; ?>"><?php echo $i ?></a></li>
          <?php endfor ?>
          
          <!-- 3--点击跳转 -->
          <li><a href="?page=<?php echo $page + 1 > $total_pages ? $total_pages : $page + 1 .$search?>">下一页</a></li>
        </ul>

3.分类筛选

在这里插入图片描述
php

//接收筛选参数
$where = '1=1'; //1=1，让$where不为空
 //解决=>当筛选了之后，点击下一页又会变回所有状态的情况 
$search='';
if (!empty($_GET['category']) && $_GET['category'] != 'all') { //category不为空
  $where .= ' and posts.category_id=' . $_GET['category'];
  $search .='&category='.$_GET['category'];
}
if (!empty($_GET['status']) && $_GET['status'] != 'all') { //category不为空
  $where .= " and posts.status='{$_GET['status']}' "; //状态是字符串，不能像id一样拼接！
  $search .='&status='.$_GET['status'];
  var_dump($where);
}

html

 <form class="form-inline" action="<?php echo $_SERVER['PHP_SELF']; ?>">
          <select name="category" class="form-control input-sm">
            <option value="all">所有分类</option>
            <!-- 让此value等于all是告诉服务端这不是一个id，不筛选=>value=all -->
            <?php foreach ($categories as $item) : ?>
              <!-- form 提交value中的值，通过id分类==>echo $item['id'] -->
              <!-- 被选中效果==>selected-->
              <option value="<?php echo $item['id'] ?>" <?php echo isset($_GET['category']) && $_GET['category'] == $item['id'] ? 'selected' : '' ?>>
                <?php echo $item['name'] ?>
              </option>
            <?php endforeach ?>
          </select>
          <select name="status" class="form-control input-sm">
          
            <option value="all">所有状态</option>
            <option value="drafted" <?php echo isset($_GET['status'])&&$_GET['status']=='drafted'?'selected':''?>>草稿</option>
            <option value="published"  <?php echo isset($_GET['status'])&&$_GET['status']=='published'?'selected':''?>>已发布</option>
            <option value="trashed"  <?php echo isset($_GET['status'])&&$_GET['status']=='trashed'?'selected':''?>>回收站</option>
          </select>
          <button class="btn btn-default btn-sm">筛选</button>
        </form>

在这里插入图片描述
此时，最大页数也要相应被筛选！否则数据项不匹配

//处理分页页码【请求的页面不能小于1也不能超过最大页码】
// 求最大页码数（只要是处理分页功能都一定会用到最大页码数）
$total_count = (int) bx_fetch_one("select count(1) as count 
from posts inner join categories on posts.category_id=categories.id
inner join users on posts.user_id=users.id
where {$where}
")['count'];
$total_pages = (int) ($total_count / $size);
var_dump($total_pages);

删除数据

同之前的categories-delete的代码

解决点击删除按钮后又回到所有状态的情况

****在http	请求头中，有一Referer属性，其值为发送请求前的地址****

在这里插入图片描述
通过referer回到原来的页面
posts-delete.php中

header('Location:'.$_SERVER['HTTP_REFERER']);

编辑页面post-add.php

使用前端-UEditor文本编辑器

下载ueditor包，引入项目中
在这里插入图片描述

    <div class="form-group">
            <label for="content">标题</label>
            <script id="content" name="content" cols="30" rows="10" placeholder="内容"></script>
            //把原本的textarea标签换为script
          </div>
        </div>

  <script src="/static/assets/vendors/ueditor/ueditor.config.js"></script>
  <script src="/static/assets/vendors/ueditor/ueditor.all.js"></script>
  <!-- config.js一定要在all.js前面！！否则无效！！ -->
  <script>
    var ue = UE.getEditor('content');
  </script>

在文本编辑框中提交内容
在这里插入图片描述

koeika科科
发布了7 篇原创文章 · 获赞 4 · 访问量 1041
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_44208883/article/details/105027083
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022