php无限级分类实战——评论及回复功能

经常在各大论坛或新闻板块详情页面下边看到评论功能，当然不单单是直接发表评论内容那么简单，可以对别人的评论进行回复，别人又可以对你的回复再次评论或回复，如此反复，理论上可以说是没有休止，从技术角度分析很容易想到运用无限级分类技术存储数据，运用递归获取评论层级结构数据，运用ajax实现评论页面交互，这里用thinkphp框架做个简单的demo练练手，为了简化流程这里第三级评论不再提供回复功能，当然只要在这个基础上稍作修改就可以实现无限回复功能，主要是view层样式修改较麻烦，需花些时间。

一、效果需求分析:

在头部可以直接发布一级评论,最新发表的评论显示在最上面,如下效果图

对发表的评论可以回复，回复显示在上级评论下边，形成层级关系，如下效果图

页面操作细节:点击某个评论的回复按钮时，显示回复文本输入框，同时其他评论的回复文本输入框消失，当再次点击该回复按钮时，该文本框消失

在最后一级评论(这里设置是第三级)关闭回复功能<喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCry0yrHP1Mq+xsDC29fcyv0NCjxoMSBpZD0="二实现思路及细节"> 二、实现思路及细节

1.数据表设计

2.controller层关键函数:

(1). 递归获取评论列表

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<code class="hljs" php="">/** *递归获取评论列表    */    protected function getCommlist($parent_id = 0,&$result = array()){           $arr = M('comment')->where(parent_id = '.$parent_id.')->order(create_time desc)->select();       if(empty($arr)){         return array();     }     foreach ($arr as $cm) {          $thisArr=&$result[];         $cm[children] = $this->getCommlist($cm[id],$thisArr);            $thisArr = $cm;                                        }     return $result;    }</code>

(2). 展示评论页面的action

?

1 2 3 4 5 6 7 8

<code class="hljs" lasso="">public function index(){      $num =  M('comment')->count(); //获取评论总数     $this->assign('num',$num);       $data=array();     $data=$this->getCommlist();//获取评论列表     $this->assign(commlist,$data);       $this->display('index');   }</code>

(3).评论页面ajax访问添加评论的action

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<code class="hljs" php="">/** *添加评论    */    public function addComment(){                $data=array();     if((isset($_POST[comment]))&&(!empty($_POST[comment]))){         $cm = json_decode($_POST[comment],true);//通过第二个参数true，将json字符串转化为键值对数组         $cm['create_time']=date('Y-m-d H:i:s',time());         $newcm = M('comment');         $id = $newcm->add($cm);           $cm[id] = $id;         $data = $cm;           $num =  M('comment')->count();//统计评论总数         $data['num']= $num;       }else{         $data[error] = 0;     }         echo json_encode($data);    }</code>

3.view层实现

(1). 展示页面的整体结构设计

实际效果:

页面html代码:

?

1 2	<code class="hljs" xml=""> </code>

<script type=text/javascript src=/Public/js/jquery-1.11.3.min.js ></script><script type=text/javascript src=/Public/js/comment.js ></script>

{$num}条评论

发表评论

全部评论

• 

  {$data.nickname} {$data.create_time}

  {$data.content}

  回复

  • 

    {$child.nickname} {$child.create_time}

    {$child.content}

    回复

    • 

      {$grandson.nickname} {$grandson.create_time}

      {$grandson.content}

(2). 单个评论信息p结构代码

?

1

{$data.nickname} {$data.create_time}

{$data.content}

回复

对应的效果图:

对应的css代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<code class="hljs" css="">.head-pic{     width:40px;     height:40px;    }   .cm{     position:relative;     top:0px;     left:40px;     top:-40px;     width:600px; }   .cm-header{     padding-left:5px; }   .cm-content{     padding-left:5px; }   .cm-footer{     padding-bottom:15px;     text-align:right;     border-bottom: 1px dotted #CCC; }   .comment-reply{     text-decoration:none;     color:gray;     font-size: 14px; }</code>

4. JS代码

(1). 提交评论:提交评论的a标签按钮引用了样式comment-submit，在其点击事件中进行ajax操作

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<code class="hljs" xml="">$('body').delegate('.comment-submit','click',function(){           var content = $.trim($(this).parent().prev().children(textarea).val());//根据布局结构获取当前评论内容         $(this).parent().prev().children(textarea).val();//获取完内容后清空输入框         if(==content){             alert(评论内容不能为空!);             }else{             var cmdata = new Object();             cmdata.parent_id = $(this).attr(parent_id);//上级评论id             cmdata.content = content;             cmdata.nickname = 游客;//测试用数据             cmdata.head_pic = /Public/images/default.jpg;//测试用数据                          var replyswitch = $(this).attr(replyswitch);//获取回复开关锁属性             $.ajax({                 type:POST,                 url:/index.php/home/index/addComment,                 data:{                     comment:JSON.stringify(cmdata)                              },                 dataType:json,                            success:function(data){                     if(typeof(data.error)==undefined){                         $(.comment-reply).next().remove();//删除已存在的所有回复p                            //更新评论总数                                                $(.comment-num).children(span).html(data.num+条评论);                         //显示新增评论                         var newli = ;                                             if(cmdata.parent_id == 0){                          //发表的是一级评论时，添加到一级ul列表中                                               newli = </code>

• 

  +data.nickname++data.create_time+

  +data.content+

  回复

• ; $(.comment-ul).prepend(newli); }else{ //否则添加到对应的孩子ul列表中 if('off'==replyswitch){//检验出回复关闭锁存在，即三级评论不再提供回复功能 newli =

  • 

    +data.nickname++data.create_time+

    +data.content+

  • ; }else{//二级评论的回复按钮要添加回复关闭锁属性 newli =

    • 

      +data.nickname++data.create_time+

      +data.content+

      回复

    • ; } $(li[comment_id='+data.parent_id+']).children(ul).prepend(newli); } }else{ //有错误信息 alert(data.error); } } }); } });

      (2).回复评论:回复评论的a标签按钮引用了样式comment-reply，在其点击事件中进行显示或隐藏评论输入框的操作

      ?

      1 2 3 4 5 6 7 8 9 10 11 12

      <code class="hljs" scilab="">//点击回复按钮显示或隐藏回复输入框     $(body).delegate(.comment-reply,click,function(){         if($(this).next().length>0){//判断出回复p已经存在,去除掉             $(this).next().remove();          }else{//添加回复p             $(.comment-reply).next().remove();//删除已存在的所有回复p                //添加当前回复p             var parent_id = $(this).attr(comment_id);//要回复的评论id               var phtml = ;             if('off'==$(this).attr(replyswitch)){//二级评论回复后三级评论不再提供回复功能,将关闭属性附加到提交回复按钮                 phtml = </code>

      提交回复

      ; }else{ phtml =

      提交回复

      ; } $(this).after(phtml); } });

      ?

      1	<code> </code>