• <big date-time='zaro0kxy'></big>

            <ol id='0s0rf1'></ol>

          • <b dir='tih5wmr'></b><th lang='ogcmv4mr'></th>
          • 文章熱詞:PHP,無限極分類,評論

            日期:2019-05-23 10:03 by admin 1483 0 收藏
            我要分享

            摘要:​經常在各大論壇或新聞闆塊詳情頁面下邊看到評論功能,當然不單單是直接發表評論内容那麽簡單,可以對别人的評論進行回複,别人又可以對你的回複再次評論或回複,如此反複,理論上可以說是沒有休止,從技術角度分析很容易想到運用無限級分類技術存儲數據,運用遞歸獲取評論層級結構數據,運用ajax實現評論頁面交互```

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

            一、效果需求分析:

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

            640.png

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

            640.jpg

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

            4.在最後一級評論(這裏設置是第三級)關閉回複功能

            5.即時顯示評論總數

            二、實現思路及細節

            1.數據表設計

            640 (1).jpg

            2.controller層關鍵函數:

            (1). 遞歸獲取評論列表

            /**
            *遞歸獲取評論列表
             */
             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;
             }

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

            public function index(){ 
             $num = M(comment)->count(); //獲取評論總數
             $this->assign(num,$num);
             $data=array();
             $data=$this->getCommlist();//獲取評論列表
             $this->assign("commlist",$data);
             $this->display(index);
             }

            (3).評論頁面ajax訪問添加評論的action

            /**
            *添加評論
             */
             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);
             }

            3.view層實現

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

            640 (1).png

            實際效果:

            640 (2).jpg

            頁面html代碼:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <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>
            <div>
             <!--發表評論區begin-->
             <div>
             <div>
             <span>{$num}條評論</span>
             </div>
             <div>
             <div>
             <textarea replyid="0"></textarea>
             </div>
             <div>
              <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>
             </div> 
             </div>
             </div>
             <!--發表評論區end-->
             <!--評論列表顯示區begin-->
             <!-- {$commentlist} -->
             <div >
             <div><span>全部評論</span></div>
             <div >
              <!--一級評論列表begin-->
              <ul> 
              <volist name="commlist" id="data">   
               <li comment_id="{$data.id}">   
               <div >
               <div>
                <img src="{$data.head_pic}" alt=""> 
               </div>
               <div>
                <div>
                <span>{$data.nickname}</span>
                <span>{$data.create_time}</span>
                </div>
                <div>
                <p>
                 {$data.content}
                </p>
                </div>
                <div>
                <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>   
                </div> 
               </div>        
               </div>
               <!--二級評論begin-->
               <ul>
               <volist name="data.children" id="child" >    
               <li comment_id="{$child.id}">   
                <div >
                <div>
                 <img src="{$child.head_pic}" alt=""> 
                </div>
                <div>
                 <div>
                 <span>{$child.nickname}</span>
                 <span>{$child.create_time}</span>
                 </div>
                 <div>
                 <p>
                  {$child.content}
                 </p>
                 </div>
                 <div>    
                 <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>
                 </div> 
                </div>        
                </div>
                <!--三級評論begin-->
                <ul>
                <volist name="child.children" id="grandson" > 
                <li comment_id="{$grandson.id}">   
                 <div >
                 <div>
                  <img src="{$grandson.head_pic}" alt=""> 
                 </div>
                 <div>
                  <div>
                  <span>{$grandson.nickname}</span>
                  <span>{$grandson.create_time}</span>
                  </div>
                  <div>
                  <p>
                   {$grandson.content}
                  </p>
                  </div>
                  <div>    
                  <!-- <a comment_id="1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回複</a> -->
                  </div> 
                 </div>        
                 </div>
                </li>
                </volist>
                </ul> 
                <!--三級評論end-->
               </li>
               </volist>
               </ul> 
               <!--二級評論end-->
              </li>
              </volist>         
              </ul>
              <!--一級評論列表end-->
             </div> 
             </div>
             <!--評論列表顯示區end-->
            </div> 
            </body>
            </html>

            (2). 單個評論信息div結構代碼

            <div >
             <div>
             <img class="head-pic" src="{$data.head_pic}" alt=""> 
             </div>
             <div class="cm">
             <div class="cm-header">
              <span>{$data.nickname}</span>
              <span>{$data.create_time}</span>
              </div>
             <div class="cm-content">
               <p>
               {$data.content}
               </p>
             </div>
             <div 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>   
             </div> 
             </div>        
            </div>

            對應的效果圖:

            640 (2).png

            對應的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操作

            $(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();//删除已存在的所有回複div 
               //更新評論總數   
               $(".comment-num").children("span").html(data.num+"條評論");
               //顯示新增評論
               var newli = "";   
               if(cmdata.parent_id == "0"){
                //發表的是一級評論時,添加到一級ul列表中   
                newli = "<li comment_id="+data.id+"><div ><div><img class=head-pic src="+data.head_pic+" alt=></div><div class=cm><div class=cm-header><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=cm-content><p>"+data.content+"</p></div><div class=cm-footer><a class=comment-reply comment_id="+data.id+" href=javascript:void(0);>回複</a></div></div></div><ul class=children></ul></li>";    
                $(".comment-ul").prepend(newli);
               }else{
                //否則添加到對應的孩子ul列表中    
                if(off==replyswitch){//檢驗出回複關閉鎖存在,即三級評論不再提供回複功能    
                newli = "<li comment_id="+data.id+"><div ><div><img class=head-pic src="+data.head_pic+" alt=></div><div class=children-cm><div class=cm-header><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=cm-content><p>"+data.content+"</p></div><div class=cm-footer></div></div></div><ul class=children></ul></li>";
                }else{//二級評論的回複按鈕要添加回複關閉鎖屬性   
                newli = "<li comment_id="+data.id+"><div ><div><img class=head-pic src="+data.head_pic+" alt=></div><div class=children-cm><div class=cm-header><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=cm-content><p>"+data.content+"</p></div><div class=cm-footer><a class=comment-reply comment_id="+data.id+" href=javascript:void(0); replyswitch=off >回複</a></div></div></div><ul class=children></ul></li>";
                }    
                $("li[comment_id="+data.parent_id+"]").children("ul").prepend(newli);
               }
               }else{
               //有錯誤信息
               alert(data.error);
               }
              }
              });
             }
             });

            (2).回複評論:回複評論的a标簽按鈕引用了樣式comment-reply,在其點擊事件中進行顯示或隐藏評論輸入框的操作

            //點擊"回複"按鈕顯示或隐藏回複輸入框
             $("body").delegate(".comment-reply","click",function(){
             if($(this).next().length>0){//判斷出回複div已經存在,去除掉
              $(this).next().remove();
              }else{//添加回複div
              $(".comment-reply").next().remove();//删除已存在的所有回複div 
              //添加當前回複div
              var parent_id = $(this).attr("comment_id");//要回複的評論id
              var divhtml = "";
              if(off==$(this).attr("replyswitch")){//二級評論回複後三級評論不再提供回複功能,将關閉屬性附加到"提交回複"按鈕"
              divhtml = "<div class=div-reply-txt style=width:98%;padding:3px; replyid=2><div><textarea class=txt-reply replyid=2 style=width: 100%; height: 60px;></textarea></div><div 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></div></div>";
              }else{
              divhtml = "<div class=div-reply-txt style=width:98%;padding:3px; replyid=2><div><textarea class=txt-reply replyid=2 style=width: 100%; height: 60px;></textarea></div><div 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></div></div>";
              }  
              $(this).after(divhtml);
              }
             });

            三、完整代碼免費下載


            上一篇:php生成word并下載

            下一篇:PHP實現頁面靜态化


            評論

            -->