首页-教程-开发语言

PHP怎么实现评论回复功能

 4554

php实现评论回复功能的方法：1、进行数据表设计；2、通过递归获取评论列表；3、展示评论页面的action；4、展示页面的整体结构设计；5、创建单个评论信息p结构代码；6、设置回复评论的a标签按钮样式。


PHP怎么实现评论回复功能


php怎么实现评论回复功能？

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

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

一、效果需求分析:

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


PHP怎么实现评论回复功能


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


PHP怎么实现评论回复功能


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

4、在最后一级评论(这里设置是第三级)关闭回复功能

5、即时显示评论总数


二、实现思路及细节

1、数据表设计


PHP怎么实现评论回复功能


2、controller层关键函数:

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

  1. /**
  2.  *递归获取评论列表
  3.  */
  4. protected function getCommlist($parent_id = 0,&$result = array()){ 
  5.     $arr = M('comment')->where("parent_id = '".$parent_id."'")->order("create_time desc")->select(); 
  6.     if(empty($arr)){
  7.         return array();
  8.     }
  9.     foreach ($arr as $cm) { 
  10.         $thisArr=&$result[];
  11.         $cm["children"] = $this->getCommlist($cm["id"],$thisArr); 
  12.         $thisArr = $cm;     
  13.     }
  14.     return $result;
  15. }

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

  1. public function index(){ 
  2.     $num = M('comment')->count(); //获取评论总数
  3.     $this->assign('num',$num);
  4.     $data=array();
  5.     $data=$this->getCommlist();//获取评论列表
  6.     $this->assign("commlist",$data);
  7.     $this->display('index');
  8. }

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

  1. /**
  2.  *添加评论
  3.  */
  4. public function addComment(){  
  5.     $data=array();
  6.     if((isset($_POST["comment"]))&&(!empty($_POST["comment"]))){
  7.         $cm = json_decode($_POST["comment"],true);//通过第二个参数true，将json字符串转化为键值对数组
  8.         $cm['create_time']=date('Y-m-d H:i:s',time());
  9.         $newcm = M('comment');
  10.         $id = $newcm->add($cm);
  11.      
  12.         $cm["id"] = $id;
  13.         $data = $cm;
  14.      
  15.         $num = M('comment')->count();//统计评论总数
  16.         $data['num']= $num;
  17.  
  18.     }else{
  19.         $data["error"] = "0";
  20.     } 
  21.     echo json_encode($data);
  22.  }

3、view层实现

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


PHP怎么实现评论回复功能

实际效果:

PHP怎么实现评论回复功能


页面html代码:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <title>php无限级分类实战————评论及回复功能</title>
  6.     <link rel="stylesheet" type="text/css" href="/Public/css/comment.css" rel="external nofollow" >
  7.     <script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script>
  8.     <script type="text/javascript" src="/Public/js/comment.js" ></script>
  9. </head>
  10. <body> 
  11. <p>
  12.     <!--发表评论区begin-->
  13.     <p>
  14.         <p><span>{$num}条评论</span></p>
  15.         <p>
  16.             <p><textarea replyid="0"></textarea></p>
  17.             <p>
  18.                 <a parent_id="0" style="" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span style=''>发表评论</span></a>
  19.             </p> 
  20.         </p>
  21.     </p>
  22.     <!--发表评论区end-->
  23.     <!--评论列表显示区begin-->
  24.     <!-- {$commentlist} -->
  25.     <p >
  26.         <p><span>全部评论</span></p>
  27.         <p >
  28.             <!--一级评论列表begin-->
  29.             <ul> 
  30.                 <volist name="commlist" id="data">   
  31.                 <li comment_id="{$data.id}">   
  32.                     <p>
  33.                         <p><img src="{$data.head_pic}" alt=""></p>
  34.                         <p>
  35.                             <p>
  36.                                 <span>{$data.nickname}</span>
  37.                                 <span>{$data.create_time}</span>
  38.                             </p>
  39.                             <p>
  40.                                 <p>{$data.content}</p>
  41.                             </p>
  42.                             <p>
  43.                                 <a comment_id="{$data.id}" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>   
  44.                             </p> 
  45.                         </p>        
  46.                     </p> 
  47.                     <!--二级评论begin-->
  48.                     <ul>
  49.                         <volist name="data.children" id="child" >    
  50.                         <li comment_id="{$child.id}">   
  51.                             <p>
  52.                                 <p><img src="{$child.head_pic}" alt=""> </p>
  53.                                 <p>
  54.                                     <p>
  55.                                         <span>{$child.nickname}</span>
  56.                                         <span>{$child.create_time}</span>
  57.                                     </p>
  58.                                     <p>
  59.                                         <p>{$child.content}</p>
  60.                                     </p>
  61.                                     <p>    
  62.                                         <a replyswitch="off" comment_id="{$child.id}" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>
  63.                                     </p> 
  64.                                 </p>        
  65.                             </p> 
  66.                             <!--三级评论begin-->
  67.                             <ul>
  68.                                 <volist name="child.children" id="grandson" > 
  69.                                 <li comment_id="{$grandson.id}">
  70.                                     <p>
  71.                                         <p><img src="{$grandson.head_pic}" alt=""></p>
  72.                                         <p>
  73.                                             <p>
  74.                                                 <span>{$grandson.nickname}</span>
  75.                                                 <span>{$grandson.create_time}</span>
  76.                                             </p>
  77.                                             <p>
  78.                                                 <p>{$grandson.content}</p>
  79.                                             </p>
  80.                                             <p>
  81.                                                 <!-- <a comment_id="1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> -->
  82.                                             </p> 
  83.                                         </p>        
  84.                                     </p>
  85.                                 </li>
  86.                                 </volist>
  87.                             </ul> 
  88.                             <!--三级评论end--> 
  89.                         </li>
  90.                         </volist>
  91.                     </ul> 
  92.                     <!--二级评论end--> 
  93.                 </li>
  94.                 </volist>         
  95.             </ul>
  96.             <!--一级评论列表end-->
  97.         </p> 
  98.     </p>
  99.     <!--评论列表显示区end-->
  100. </p> 
  101. </body>
  102. </html>

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

  1. <p >
  2.     <p><img class="head-pic" src="{$data.head_pic}" alt=""></p>
  3.     <p class="cm">
  4.         <p class="cm-header">
  5.             <span>{$data.nickname}</span>
  6.             <span>{$data.create_time}</span>
  7.         </p>
  8.         <p class="cm-content">
  9.             <p>{$data.content}</p>
  10.         </p>
  11.         <p class="cm-footer">
  12.             <a class="comment-reply" comment_id="{$data.id}" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>   
  13.         </p> 
  14.     </p>        
  15. </p>

对应的效果图：


PHP怎么实现评论回复功能

对应的css代码：

  1. .head-pic{
  2.  width:40px;
  3.  height:40px; 
  4. }
  5.  
  6. .cm{
  7.  position:relative;
  8.  top:0px;
  9.  left:40px;
  10.  top:-40px;
  11.  width:600px;
  12. }
  13.  
  14. .cm-header{
  15.  padding-left:5px;
  16. }
  17.  
  18. .cm-content{
  19.  padding-left:5px;
  20. }
  21.  
  22. .cm-footer{
  23.  padding-bottom:15px;
  24.  text-align:right;
  25.  border-bottom: 1px dotted #CCC;
  26. }
  27.  
  28. .comment-reply{
  29.  text-decoration:none;
  30.  color:gray;
  31.  font-size: 14px;
  32. }


4、JS代码

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

  1. $("body").delegate(".comment-submit", "click", function() {
  2.     var content = $.trim($(this).parent().prev().children("textarea").val());
  3.     //根据布局结构获取当前评论内容
  4.     $(this).parent().prev().children("textarea").val("");
  5.     //获取完内容后清空输入框
  6.     if ("" == content) {
  7.         alert("评论内容不能为空!");
  8.     } else {
  9.         var cmdata = new Object();
  10.         cmdata.parent_id = $(this).attr("parent_id");
  11.         //上级评论id
  12.         cmdata.content = content;
  13.         cmdata.nickname = "游客";
  14.         //测试用数据
  15.         cmdata.head_pic = "/Public/images/default.jpg";
  16.         //测试用数据  
  17.         var replyswitch = $(this).attr("replyswitch");
  18.         //获取回复开关锁属性
  19.         $.ajax({
  20.             type:"POST",
  21.             url:"/index.php/home/index/addComment",
  22.             data:{
  23.                 comment:JSON.stringify(cmdata)
  24.             },
  25.             dataType:"json",
  26.             success:function(data) {
  27.                 if (typeof data.error == "undefined") {
  28.                     $(".comment-reply").next().remove();
  29.                     //删除已存在的所有回复p 
  30.                     //更新评论总数   
  31.                     $(".comment-num").children("span").html(data.num + "条评论");
  32.                     //显示新增评论
  33.                     var newli = "";
  34.                     if (cmdata.parent_id == "0") {
  35.                         //发表的是一级评论时，添加到一级ul列表中   
  36.                         newli = "<li comment_id='" + data.id + "'><p ><p><img class='head-pic' src='" + data.head_pic + "' alt=''></p><p class='cm'><p class='cm-header'><span>" + data.nickname + "</span><span>" + data.create_time + "</span></p><p class='cm-content'><p>" + data.content + "</p></p><p class='cm-footer'><a class='comment-reply' comment_id='" + data.id + "' href='javascript:void(0);'>回复</a></p></p></p><ul class='children'></ul></li>";
  37.                         $(".comment-ul").prepend(newli);
  38.                     } else {
  39.                         //否则添加到对应的孩子ul列表中    
  40.                         if ("off" == replyswitch) {
  41.                             //检验出回复关闭锁存在，即三级评论不再提供回复功能    
  42.                             newli = "<li comment_id='" + data.id + "'><p ><p><img class='head-pic' src='" + data.head_pic + "' alt=''></p><p class='children-cm'><p class='cm-header'><span>" + data.nickname + "</span><span>" + data.create_time + "</span></p><p class='cm-content'><p>" + data.content + "</p></p><p class='cm-footer'></p></p></p><ul class='children'></ul></li>";
  43.                         } else {
  44.                             //二级评论的回复按钮要添加回复关闭锁属性   
  45.                             newli = "<li comment_id='" + data.id + "'><p ><p><img class='head-pic' src='" + data.head_pic + "' alt=''></p><p class='children-cm'><p class='cm-header'><span>" + data.nickname + "</span><span>" + data.create_time + "</span></p><p class='cm-content'><p>" + data.content + "</p></p><p class='cm-footer'><a class='comment-reply' comment_id='" + data.id + "' href='javascript:void(0);' replyswitch='off' >回复</a></p></p></p><ul class='children'></ul></li>";
  46.                         }
  47.                         $("li[comment_id='" + data.parent_id + "']").children("ul").prepend(newli);
  48.                     }
  49.                 } else {
  50.                     //有错误信息
  51.                     alert(data.error);
  52.                 }
  53.             }
  54.         });
  55.     }
  56. });

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

  1. //点击"回复"按钮显示或隐藏回复输入框
  2. $("body").delegate(".comment-reply", "click", function() {
  3.     if ($(this).next().length > 0) {
  4.         //判断出回复p已经存在,去除掉
  5.         $(this).next().remove();
  6.     } else {
  7.         //添加回复p
  8.         $(".comment-reply").next().remove();
  9.         //删除已存在的所有回复p 
  10.         //添加当前回复p
  11.         var parent_id = $(this).attr("comment_id");
  12.         //要回复的评论id
  13.         var phtml = "";
  14.         if ("off" == $(this).attr("replyswitch")) {
  15.             //二级评论回复后三级评论不再提供回复功能,将关闭属性附加到"提交回复"按钮"
  16.             phtml = "<p class='p-reply-txt' style='width:98%;padding:3px;' replyid='2'><p><textarea class='txt-reply' replyid='2' style='width: 100%; height: 60px;'></textarea></p><p style='margin-top:5px;text-align:right;'><a class='comment-submit' parent_id='" + parent_id + "' style='font-size:14px;text-decoration:none;background-color:#63B8FF;' href='javascript:void(0);' replyswitch='off' >提交回复</a></p></p>";
  17.         } else {
  18.             phtml = "<p class='p-reply-txt' style='width:98%;padding:3px;' replyid='2'><p><textarea class='txt-reply' replyid='2' style='width: 100%; height: 60px;'></textarea></p><p style='margin-top:5px;text-align:right;'><a class='comment-submit' parent_id='" + parent_id + "' style='font-size:14px;text-decoration:none;background-color:#63B8FF;' href='javascript:void(0);'>提交回复</a></p></p>";
  19.         }
  20.         $(this).after(phtml);
  21.     }
  22. });


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-9174.html
站长图库 - PHP怎么实现评论回复功能
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐