php怎麼實現評論回應功能-PHP問題-PHP中文網

首頁

後端開發

PHP問題

php怎麼實現評論回應功能

藏色散人

Sep 12, 2021 am 09:57 AM

php回覆評論

php實現評論回覆功能的方法：1、進行資料表設計；2、透過遞迴取得評論清單；3、展示評論頁面的action；4、展示頁面的整體結構設計；5、建立單一評論訊息p結構代碼；6、設定回覆評論的a標籤按鈕樣式。

php怎麼實現評論回應功能

本文操作環境：windows7系統、PHP7.1版，DELL G3電腦

php怎麼實作評論回覆功能？

php無限級分類實現評論及回覆功能

經常在各大論壇或新聞板塊詳情頁面下邊看到評論功能，當然不單單是直接發表評論內容那麼簡單，可以對別人的評論進行回复，別人又可以對你的回复再次評論或回复，如此反复，理論上可以說是沒有休止，從技術角度分析很容易想到運用無限級分類技術儲存數據，運用遞歸獲取評論層級結構數據，運用ajax實現評論頁面交互，這裡用thinkphp框架做個簡單的demo練練手，為了簡化流程這裡第三級評論開始停止回复，當然只要在這個基礎上稍作修改可實現無限回復功能，主要是view層樣式修改較麻煩，需花點時間。

一、效果需求分析:

1.在頭部可以直接發布一級評論,最新發表的評論顯示在最上面,如下效果圖

2.對發表的評論可以回复，回复顯示在上級評論下邊，形成層級關係，如下效果圖

3.頁面操作細節:點擊某個評論的回复按鈕時，顯示回复文本輸入框，同時其他評論的回复文本輸入框消失，當再次點擊該回复按鈕時，該文本框消失

# 4.在最後一級評論(這裡設定是第三級)關閉回應功能

5.即時顯示評論總數

##二、實現想法及細節

#1.資料表設計

2.controller層關鍵函數:

(1). 遞迴取得評論清單

/**
*递归获取评论列表
 */
 protected function getCommlist($parent_id = 0,&$result = array()){ 
 $arr = M(&#39;comment&#39;)->where("parent_id = &#39;".$parent_id."&#39;")->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;
 }

(2). 展示評論頁面的action#

public function index(){ 
 $num = M(&#39;comment&#39;)->count(); //获取评论总数
 $this->assign(&#39;num&#39;,$num);
 $data=array();
 $data=$this->getCommlist();//获取评论列表
 $this->assign("commlist",$data);
 $this->display(&#39;index&#39;);
 }

(3).評論頁面ajax訪問新增評論的action

/**
*添加评论
 */
 public function addComment(){  
 $data=array();
 if((isset($_POST["comment"]))&&(!empty($_POST["comment"]))){
 $cm = json_decode($_POST["comment"],true);//通过第二个参数true，将json字符串转化为键值对数组
 $cm[&#39;create_time&#39;]=date(&#39;Y-m-d H:i:s&#39;,time());
 $newcm = M(&#39;comment&#39;);
 $id = $newcm->add($cm);

 $cm["id"] = $id;
 $data = $cm;

 $num = M(&#39;comment&#39;)->count();//统计评论总数
 $data[&#39;num&#39;]= $num;

 }else{
 $data["error"] = "0";
 }


 echo json_encode($data);
 }

#3.view層實作

##(1).展示頁面的整體結構設計

實際效果:

#頁面html程式碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>php无限级分类实战————评论及回复功能</title>
 <link rel="stylesheet" type="text/css" href="/Public/css/comment.css" rel="external nofollow" >
 <script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script>
 <script type="text/javascript" src="/Public/js/comment.js" ></script>
</head>
<body>

<p class="comment-filed">
 <!--发表评论区begin-->
 <p>
 <p class="comment-num">
 <span>{$num}条评论</span>
 </p>
 <p>
 <p>
 <textarea class="txt-commit" replyid="0"></textarea>
 </p>
 <p class="p-txt-submit">
  <a class="comment-submit" parent_id="0"  href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span style=&#39;&#39;>发表评论</span></a>
 </p> 
 </p>
 </p>
 <!--发表评论区end-->

 <!--评论列表显示区begin-->
 <!-- {$commentlist} -->
 <p class="comment-filed-list" >
 <p><span>全部评论</span></p>
 <p class="comment-list" >
  <!--一级评论列表begin-->
  <ul class="comment-ul"> 
  <volist name="commlist" id="data">   
   <li comment_id="{$data.id}">   
   <p >
   <p>
    <img class="head-pic lazy"  src="/static/imghwm/default1.png"  data-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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>   
    </p> 
   </p>        
   </p>

   <!--二级评论begin-->
   <ul class="children">
   <volist name="data.children" id="child" >    
   <li comment_id="{$child.id}">   
    <p >
    <p>
     <img class="head-pic lazy"  src="/static/imghwm/default1.png"  data-src="{$child.head_pic}"    alt=""> 
    </p>
    <p class="children-cm">
     <p class="cm-header">
     <span>{$child.nickname}</span>
     <span>{$child.create_time}</span>
     </p>
     <p class="cm-content">
     <p>
      {$child.content}
     </p>
     </p>
     <p class="cm-footer">    
     <a class="comment-reply" 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>
     </p> 
    </p>        
    </p>

    <!--三级评论begin-->
    <ul class="children">
    <volist name="child.children" id="grandson" > 
    <li comment_id="{$grandson.id}">   
     <p >
     <p>
      <img class="head-pic lazy"  src="/static/imghwm/default1.png"  data-src="{$grandson.head_pic}"    alt=""> 
     </p>
     <p class="children-cm">
      <p class="cm-header">
      <span>{$grandson.nickname}</span>
      <span>{$grandson.create_time}</span>
      </p>
      <p class="cm-content">
      <p>
       {$grandson.content}
      </p>
      </p>
      <p class="cm-footer">    
      <!-- <a class="comment-reply" comment_id="1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> -->
      </p> 
     </p>        
     </p>
    </li>
    </volist>
    </ul> 
    <!--三级评论end-->

   </li>
   </volist>
   </ul> 
   <!--二级评论end-->

  </li>
  </volist>         
  </ul>
  <!--一级评论列表end-->
 </p> 
 </p>
 <!--评论列表显示区end-->
</p> 
</body>
</html>

(2). 單一評論訊息p結構代碼

<p >
 <p>
 <img class="head-pic lazy"  src="/static/imghwm/default1.png"  data-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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>   
 </p> 
 </p>        
</p>

對應的效果圖:

#對應的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;
}

#################################################### #####4. JS程式碼############(1). 提交評論:提交評論的a標籤按鈕引用了樣式comment-submit，在其點擊事件中進行ajax操作# ##

$(&#39;body&#39;).delegate(&#39;.comment-submit&#39;,&#39;click&#39;,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 = "<li comment_id=&#39;"+data.id+"&#39;><p ><p><img class=&#39;head-pic&#39; src=&#39;"+data.head_pic+"&#39; alt=&#39;&#39;></p><p class=&#39;cm&#39;><p class=&#39;cm-header&#39;><span>"+data.nickname+"</span><span>"+data.create_time+"</span></p><p class=&#39;cm-content&#39;><p>"+data.content+"</p></p><p class=&#39;cm-footer&#39;><a class=&#39;comment-reply&#39; comment_id=&#39;"+data.id+"&#39; href=&#39;javascript:void(0);&#39;>回复</a></p></p></p><ul class=&#39;children&#39;></ul></li>";    
    $(".comment-ul").prepend(newli);
   }else{
    //否则添加到对应的孩子ul列表中    
    if(&#39;off&#39;==replyswitch){//检验出回复关闭锁存在，即三级评论不再提供回复功能    
    newli = "<li comment_id=&#39;"+data.id+"&#39;><p ><p><img class=&#39;head-pic&#39; src=&#39;"+data.head_pic+"&#39; alt=&#39;&#39;></p><p class=&#39;children-cm&#39;><p class=&#39;cm-header&#39;><span>"+data.nickname+"</span><span>"+data.create_time+"</span></p><p class=&#39;cm-content&#39;><p>"+data.content+"</p></p><p class=&#39;cm-footer&#39;></p></p></p><ul class=&#39;children&#39;></ul></li>";
    }else{//二级评论的回复按钮要添加回复关闭锁属性   
    newli = "<li comment_id=&#39;"+data.id+"&#39;><p ><p><img class=&#39;head-pic&#39; src=&#39;"+data.head_pic+"&#39; alt=&#39;&#39;></p><p class=&#39;children-cm&#39;><p class=&#39;cm-header&#39;><span>"+data.nickname+"</span><span>"+data.create_time+"</span></p><p class=&#39;cm-content&#39;><p>"+data.content+"</p></p><p class=&#39;cm-footer&#39;><a class=&#39;comment-reply&#39; comment_id=&#39;"+data.id+"&#39; href=&#39;javascript:void(0);&#39; replyswitch=&#39;off&#39; >回复</a></p></p></p><ul class=&#39;children&#39;></ul></li>";
    }    
    $("li[comment_id=&#39;"+data.parent_id+"&#39;]").children("ul").prepend(newli);
   }

   }else{
   //有错误信息
   alert(data.error);
   }

  }
  });
 }


 });

###(2).回覆評論:回覆評論的a標籤按鈕引用了樣式comment-reply，在其點擊事件中進行顯示或隱藏評論輸入框的操作###

//点击"回复"按钮显示或隐藏回复输入框
 $("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(&#39;off&#39;==$(this).attr("replyswitch")){//二级评论回复后三级评论不再提供回复功能,将关闭属性附加到"提交回复"按钮"
  phtml = "<p class=&#39;p-reply-txt&#39; style=&#39;width:98%;padding:3px;&#39; replyid=&#39;2&#39;><p><textarea class=&#39;txt-reply&#39; replyid=&#39;2&#39; style=&#39;width: 100%; height: 60px;&#39;></textarea></p><p style=&#39;margin-top:5px;text-align:right;&#39;><a class=&#39;comment-submit&#39; parent_id=&#39;"+parent_id+"&#39; style=&#39;font-size:14px;text-decoration:none;background-color:#63B8FF;&#39; href=&#39;javascript:void(0);&#39; replyswitch=&#39;off&#39; >提交回复</a></p></p>";
  }else{
  phtml = "<p class=&#39;p-reply-txt&#39; style=&#39;width:98%;padding:3px;&#39; replyid=&#39;2&#39;><p><textarea class=&#39;txt-reply&#39; replyid=&#39;2&#39; style=&#39;width: 100%; height: 60px;&#39;></textarea></p><p style=&#39;margin-top:5px;text-align:right;&#39;><a class=&#39;comment-submit&#39; parent_id=&#39;"+parent_id+"&#39; style=&#39;font-size:14px;text-decoration:none;background-color:#63B8FF;&#39; href=&#39;javascript:void(0);&#39;>提交回复</a></p></p>";
  }  
  $(this).after(phtml);
  }
 });

###推薦學習：《###PHP影片教學###》###

以上是php怎麼實現評論回應功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn