2.9 主页文章列表

第 16 节 / 共 46 节 课程：ThinkPHP
首页文章显示功能
1.网页端：
修改view/Index/index.html:
<!-- 文章列表 - 使用 PHP 原生循环 -->
    <?php if(!empty($result)): ?>
        <?php foreach($result as $article): ?>
        <div class="col-12 row article-list">
            <div class="col-sm-3 col-3 thumb d-none d-sm-block">
                <img src="/thumb/<?php echo $article['thumbnail']; ?>" class="img-fluid"/>
            </div>
            <div class="col-sm-9 col-xs-12 detail">
                <div class="title">
                    <a href="/article/<?php echo $article['articleid']; ?>">
                        <?php echo $article['headline']; ?>
                    </a>
                </div>
                <div class="info">
                    作者：<?php echo $article['nickname']; ?>   
                    类别：<?php 
                        // 临时处理分类，避免配置不存在报错
                        $types = [1=>'新闻', 2=>'教程', 3=>'随笔', 4=>'攻略'];
                        echo $types[$article['category']] ?? '其他'; 
                    ?>   
                    日期：<?php echo $article['createtime']; ?>   
                    阅读：<?php echo $article['readcount']; ?> 次   
                    消耗积分：<?php echo $article['credit']; ?> 分
                </div>
                <div class="intro">
                    <?php echo mb_substr(strip_tags($article['content']), 0, 85); ?> ...
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    <?php else: ?>
        <div class="col-12">暂无文章</div>
    <?php endif; ?>

复制完后是这样的：

这是一个循环，把取回来的文章循环展示，这里的result就是文章article的集合

2.index.php
修改app/controller/index.php

//略去其他引用
use app\model\Article;//要加入一个引用
class Index extends BaseController
{
//略去其他函数
    public function index()
    {
        $article = new Article();
        $result = $article->findLimitWithUser(0, 10);
   
        $total = ceil($article->getTotalCount()/10);
        return view("index",['result'=>$result, 'total'=>$total]);
    }
}

3./app/model/Article.php
Article类的函数findLimitWithUser和getTotalCount，复制进去
    public function findLimitWithUser($start, $count) {
        $result = $this->alias('a')->join('users u', 'u.userid=a.userid')
            ->where('a.hide', 0)->where('a.drafted', 0)->where('a.checked', 1)
            ->field('a.*, u.nickname')
            ->order('a.articleid', 'desc')->limit($start, $count)->select();
        return $result;
    }
    // 获取文章总数
    public function getTotalCount() {
        $count = $this->where('hide', 0)->where('drafted', 0)
            ->where('checked', 1)->count();
        return $count;
    }
这个函数是指取得文章，两个参数分别是开始位置和文章数量，例如findLimitUser(0,10)就表示取得前10篇文章

二.分页
首先修改controller部分：
class Index extends BaseController
{
    public function index()
    {
        //从url取得page参数，它是一个整数，表示第几页
        $page = Request::param('page');
        $article = new Article();
        //每页显示5篇文章，按需更改
        $article_num=5;
        $start=($page-1)*$article_num;
        $start=$start>0?$start:0;
        $result = $article->findLimitWithUser($start, $article_num);
        //total是总页数
        $total = ceil($article->getTotalCount()/$article_num);
        return view("index",['result'=>$result, 'total'=>$total]);
    }
//其他省略...
}

然后修改index.html关于页码的部分：
<!-- 分页导航栏 -->
    <div class="col-12 paginate">
        <!-- 上一页 -->
        <?php
            $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
            // 每页显示 5 篇文章
            $pageSize = 5;
            // 总页数（后端已经传给你了，直接用）
            $totalPage = $total;
        ?>
        <?php if($page <= 1): ?>
            <a href="javascript:;" class="disabled">上一页</a>
        <?php else: ?>
            <a href="?page=<?php echo $page-1; ?>">上一页</a>
        <?php endif; ?>
        <!-- 页码 -->
        <?php for($i=1; $i<=$totalPage; $i++): ?>
        <?php if($i == $page): ?>
            <a href="?page=<?php echo $i; ?>" class="active"><?php echo $i; ?></a>
        <?php else: ?>
            <a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a>
        <?php endif; ?>
        <?php endfor; ?>
        <!-- 下一页 -->
        <?php if($page >= $totalPage): ?>
            <a href="javascript:;" class="disabled">下一页</a>
        <?php else: ?>
            <a href="?page=<?php echo $page+1; ?>">下一页</a>
        <?php endif; ?>
    </div>