2.11 完善文章页面

第 18 节 / 共 46 节 课程：ThinkPHP
上一节展示了如何文章简单显示，这一节将把文章页面的其他功能加上。
1.收藏功能
首先添加收藏favorite模型，在app/model中添加Favorite.php
<?php
namespace app\model;
use think\Model;
class Favorite extends Model{
    protected $pk = 'favoriteid';
    // 插入文章收藏数据
    public function insertFavorite($articleid) {
        // 如果是之前已经收藏后来取消收藏的文章，则直接修改其状态
        $row = $this->where('userid', session('userid'))->where('articleid', $articleid)->find();
        if ($row != null) {
            $row->canceled = 0;
            $row->save();
        }
        // 否则，新增一条收藏记录即可
        else {
            $now = date('Y-m-d H:i:s');
            $this->articleid = $articleid;
            $this->userid = session('userid');
            $this->canceled = 0;
            $this->createtime = $now;
            $this->updatetime = $now;
            $this->save();
        }
    }
    // 取消文章收藏
    public function cancelFavorite($articleid) {
        $row = $this->where('userid', session('userid'))->where('articleid', $articleid)->find();
        $row->canceled = 1;
        $row->save();
    }
    // 判断文章是否已经被收藏
    public function checkFavorite($articleid) {
        $row = $this->where('userid', session('userid'))->where('articleid', $articleid)->find();
        if ($row == null || $row->canceled == 1) {
            return false;
        }
        return true;
    }
    // 为用户中心查询我的收藏添加数据操作方法
    public function findMyFavorite() {
        // 与文章表进行连接查询以显示文章标题
        $result =$this->alias('f')->join('article a', 'a.articleid=f.articleid')->where('f.userid', session('userid'))->select();
        return $result;
    }
    // 切换收藏和取消收藏的状态
    public function switchFavorite($favoriteid) {
        $favorite = $this->find($favoriteid);
        if ($favorite->canceled == 1) {
            $favorite->canceled = 0;
        }
        else {
            $favorite->canceled = 1;
        }
        $favorite->save();
        return $favorite->canceled;
    }
}

然后修改controller处理函数，加入对收藏表favorate表的查询，看此文章是否被当前登录者收藏
public function read($articleid) {
        try {
            $article = new \app\model\Article();
            $result = $article->findByArticleId($articleid);            
           
            if ($result=="") {
                return view('../view/public/error_500.html');
            }            
            
            // 检查该文章是否已经被用户收藏
            $favorite = new \app\model\Favorite();
            $favorited = $favorite->checkFavorite($articleid);
            // 在view目录下新建article目录，并创建read.html模板页面       
            return  view('read', ['article'=>$result[0],'favorited'=>$favorited]);
        }
            // 可能出现异常的情况就是文章ID不正确，则直接响应500页面
        catch (\Exception $e) {
            return view('../view/public/error_500.html');
        }
    }
函数的返回，也加入了favorited
最后，修改view/article/read.html文件
{extend name="../view/public/base.html" /}
{block name="content"}
<!--
<script type="text/javascript" src="/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/ue/ueditor.all.min.js"> </script>
<script type="text/javascript" src="/ue/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('comment', {
        initialFrameHeight: 150,    // 编辑器初始高度
        autoHeightEnabled: true,    // 根据内容自动调整高度
        serverUrl: '/uedit',        // 指定后台接口地址
        toolbars: [ [
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            '|',
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'forecolor', //字体颜色
            'bold', //加粗
            '|',
            'formatmatch', //格式刷
            'horizontal', //分隔线
            'link', //超链接
            'unlink', //取消链接
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'emotion', //表情
            'spechars', //特殊字符
            '|',
            'fullscreen', //全屏
            'autotypeset', //自动排版
            'removeformat', //清除格式
            'insertcode', //代码语言
        ] ]
    });
</script>
-->
<div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
    <div class="col-12 article-detail row">
        <div class="col-9 title">
            {$article.headline}
        </div>
        <div class="col-3 favorite">
            {if $favorited == true}
            <label class="favorite-btn" onclick="cancelFavorite('{$article.articleid}')">
                <span class="oi oi-circle-x" aria-hidden="true"></span> 取消收藏
            </label>
            {else /}
            <label class="favorite-btn" onclick="addFavorite('{$article.articleid}')">
                <span class="oi oi-heart" aria-hidden="true"></span> 收藏本文
            </label>
            {/if}
        </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 info">
        作者：{$article.nickname}   类别：{$Think.config.article_type[$article.category]}   
        日期：{$article.createtime}   
        阅读：{$article.readcount} 次   消耗积分：{$article.credit} 分
    </div>
    <div class="col-12 content" id="content">
        {$article.content | raw}    <!-- 要保持HTML原样输出，不能转义 -->
    </div>
</div>
{include file="../view/public/side.html" /}
{/block}

45到55行的代码就是加入了收藏，首先46行判断是否已经收藏，如果已经收藏，那么显示的是47-49行的html，否则（没有收藏）就显示51-53的html