PHP ThinkPHP制作多层级盖楼评论系统

最新推荐文章于 2021-08-05 21:56:45 发布

牛顿就是牛

最新推荐文章于 2021-08-05 21:56:45 发布

阅读量578

点赞数 1

文章标签： php html jquery

本文链接：https://blog.csdn.net/mengliwang/article/details/112644900

版权

用PHP做一个可以多级评论的留言板。就是说可以评论别人的留言，同时你的评论又可以再被第三个人回复，这样可以有无限个循环。

在这里插入图片描述在MySQL中创建一个表命名为comment, 设置5个字段。 id是对应每一条评论的，name为评论人的昵称，content为评论内容，pid为父代评论（被回复的评论）的id号，默认为0（代表一级评论），time字段为评论时间。

下面的PHP代码写在了ThinkPHP框架里面
ThinkPHP项目controller中的index.php文件

<?php
namespace app\controller;
use app\BaseController;
use think\facade\Db;
use think\facade\View;

class Index
{
	//设置默认方法index，用来加载HTML文件，显示HTML页面。
    public function index(){
        $html=$this->show_comments();
        View::assign('html',$html);
        return view();
    }
    //设置一个递归循环的方法，对数据库中的评论逐条查找，两个参数，第一个参数是pid，代表父级评论的id，默认没有父级评论（pid=0) . 第二个参数margin代表评论div的左边距，默认为一级评论没有左边距。
    public function show_comments($pid=0,$margin=0){
        $comments=Db::table('comment')->where('pid',$pid)->select();
        $html='';
        //做判断，如果不是一级评论，则每循环一层，左边距增加40px.
        if($pid>0){
            $margin=$margin+40;
        }
        //如果搜寻的pid有数据的话就对结果进行循环，把循环出来的数据嵌入到HTML代码中
        if(count($comments)>0){
            foreach($comments as $comment){
                $html.='<div class="each_comment" style="margin-left:'.$margin.'px">';
                $html.='<div class="first"><span>发表人：'.$comment['name'].'</span><span>发表时间：'.$comment['time'].'</span></div>';
                $html.='<div class="second">'.$comment['content'].'<input type="hidden" class="pid" value="'.$comment['id'].'"></div>';
                $html.='<div class="third"><p>姓名：<input type="text" class="name"></p><textarea cols="80" rows="3" class="content"></textarea></div>';
                $html.='<div class="fourth"><a class="reply">回复</a><a class="sub">提交</a></div>';
                $html.='</div>';
                //这里是重点，每一次循环后都再次调用函数自身，目的是为了把有所有的子孙评论全部循环出来为止
                $html.=$this->show_comments($comment['id'],$margin);
            }
        }
        return $html;
    }
    
    //写一个接收评论提交的方法。
    public function sub(){
        if (!isset($_POST['name'])||!isset($_POST['content'])){
            $res = array('code'=>3,'msg'=>'内容不完整');
            return json($res);
        }
        $name=$_POST['name'];
        $content=$_POST['content'];
        $pid=isset($_POST['pid'])?$_POST['pid']:0;
        $time=date('Y-m-d H:m:i');
        $r=Db::table('comment')->insert(['name'=>$name,'content'=>$content,'pid'=>$pid,'time'=>$time]);
        if ($r==1){
            $res = array('code'=>0,'msg'=>'提交成功');
            return json($res);
        }else{
            $res = array('code'=>1,'msg'=>'提交失败！');
            return json($res);
        }
    }
}

下面是前端的代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/static/jq.js"></script>
    <title>评论样本</title>
</head>
<style>
    div#main{
        width:900px;
        margin:auto;
        padding:10px;
        border:solid 1px;
    }
    div.each_comment{
        margin:5px;
        padding:5px;
        border:solid 1px gray;
        border-radius:10px;
        background-color:lightcyan;
    }
    div.first{
        font-size:12px;
        color:gray;
    }
    div.first span{
        margin-right:50px;
    }
    div#edit_panel{
        margin-top: 40px;
    }
    div.fourth a{
        margin-right:50px;
        color:deepskyblue;
        visibility: hidden;
    }
    div.third{
        display:none;
        padding:10px;
        background-color: lightgrey;
    }


</style>
<body>
<div id="main">
    <div id="comment_display">
        {$html|raw}
    </div>
    <div id="edit_panel"><hr><p>发表人：<input type="text" class="name"></p>
    <div><span>内容：</span>
        <div><textarea cols="120" rows="4" class="content"></textarea></div>
        <input type="submit" value="提交" onclick="" class="sub">
    </div></div>
</div>
</body>
</html>

下面是JavaScript代码

<script>
    $('.sub').on('click',function(){
        var data={}
        data['pid']=$(this).parent().parent().find('.pid').val()
        data['name']=$(this).parent().parent().find('.name').val()
        data['content']=$(this).parent().parent().find('.content').val()
        $.post('index/sub',data,function(d){
            alert(d.msg)
            location.reload()
        })
    })

    $('div.each_comment').mouseenter(function(){
        $('.reply').css('visibility','hidden') //归位隐藏所有的【回复】按钮
        $(this).find('.reply').css('visibility','visible') //显示鼠标所在评论的回复按钮
    })

    $('.reply').on('click',function(){
        var btn=$(this).parent().find('.reply')
        // 如果按钮是【回复】则把回复按钮修改为【收起】按钮，并显示编辑框和提交按钮。
        if (btn.text()==='回复'){
            $('.reply').text('回复') //复位所有按钮文字
            $('div.third').hide() //复位隐藏所有打开的回复框
            $('a.sub').css('visibility','hidden')  //复位不显示的提交按钮
            btn.text('收起')  // 将回复按钮的字改变为“收起”
            $(this).parent().parent().find('div.third').show()  //显示按钮所在循环体的回复编辑框
            $(this).parent().parent().find('a.sub').css('visibility','visible')  //设置提交按钮为可见状态。
        }else{
        //如果按钮是【取消】则收起编辑框，同时把按钮回位成【回复】
            $('.reply').text('回复') //复位所有按钮文字
            $('div.third').hide() //复位隐藏所有打开的回复框
            $('a.sub').css('visibility','hidden')  //复位隐藏提交按钮
            $(this).parent().parent().find('div.third').hide()
        }
    })
</script>

在这里插入图片描述

牛顿就是牛

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
PHP ThinkPHP制作多层级盖楼评论系统

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫