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

我经常在各大论坛或新闻版块的详情页底部看到评论功能。当然不是直接发表评论那么简单，而是可以回复别人的评论，别人可以评论或者再回复你的回复。如此反复，可以说理论上是没有终点的。从技术角度来看，很容易想到用无限分类技术存储数据，用递归获取评论层次数据，用ajax实现评论页面交互。这里，我们使用thinkphp框架作为一个简单的演示训练器。为了简化流程，三级评论开始停止回复。当然，我们只需稍加修改就可以实现无限回复功能。主要原因是修改视图图层样式需要一些时间。

一、效果需求分析：

1.一级评论可以直接贴在头部，最新评论显示在顶部，如下图所示

2.可以对发布的评论进行回复，回复显示在上级评论下，形成层级关系，如下图

3.页面操作详情：点击评论的回复按钮，显示回复文字输入框，其他评论的回复文字输入框消失。再次单击回复按钮时，文本框消失。

4.关闭最后一级评论的回复功能(这里设置了第三级)

5.立即显示评论总数

二、实现思路和细节

1.数据表设计

2 .控制器层按键功能：

(1).递归获取注释列表

/* * *递归获取注释列表*/protected函数getcommlist ($ parent _ id=0，$ result=array()){ $ arr=m(' comment ')-其中(' parent _ id=' ')。$ parent _ id。)-order(' ' if(empty($ arr)){ return array()；} foreach($ arr as $ cm){ $ ThisArr=$ result[]；$ cm[' children ']=$ this-getCommlist($ cm[' id ']，$ this arr)；$ thisArr=$ cm}返回$ result}(2).显示评论页面的操作

公共函数索引(){ $ num=M(' comment ')-count()；//获取注释总数$this-assign('num '，$ num)；$ data=array()；$ data=$ this-getCommlist()；//获取注释列表$ this-assign ('comblist '，$ data)；$ this-display(' index ')；}(3).ajax对注释页面的访问添加了注释操作

/* * *添加注释*/public函数add comment(){ $ data=array()；if((isset($_POST['comment']))(！空($ _ POST[' comment ']))){ $ cm=JSON _ decode($ _ POST[' comment ']，true)；//在第二个参数为true的情况下，将json字符串转换为键值对数组$ cm[' create _ time ']=date(' y-m-d h : I 3360s '，time())；$ newcm=M(' comment ')；$ id=$ new cm-add($ cm)；$ cm[' id ']=$ id；$ data=$ cm$ num=M(' comment ')-count()；//统计注释总数$ data[' num ']=$ num；} else { $ data[' error ']=' 0 '；} echo JSON _ encode($ data)；} 3.视图层的实现

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

实际效果：

网页html代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML lang=' EN ' head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8' titlephp无限级分类实战————评论及回复功能/title link rel='样式表type=' text/CSS ' href='/Public/CSS/comment。CSS ' rel='外部无跟随'脚本类型=' text/JavaScript ' src=' http :/Public/js/jquery-1。11 .3 .量滴js /脚本脚本脚本类型=' text/JavaScript ' src=' http :/Public/js/comment。js '/script/headdydiv class=' comment-field-发表评论区begin-div class=' comment-num ' span { $ num }条评论/span/div textarea class=' txt-commit ' repl yid=' 0 '/textarea/div div class=' div-txt-submit ' a class=' comment-submit ' parent _ id=' 0 ' style=' href=' JavaScript : void(0)；'rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' span style=' '发表评论/span/a/div/div/-发表评论区结束了。-评论列表显示区开始！-{ $ comment list }-div class=' comment-field-list ' div span全部评论/span/div class=' comment-list '！-一级评论列表begin-ul class=' comment-ul ' volist name=' commlist ' id=' data ' Li comment _ id=' { $ data。id } ' div img class=' head-pic ' src=' http : { $ data。head _ pic } ' alt=' '/div class=' cm ' div class=' cm-head ' span { $ data。昵称}/span { $ data。create _ time }/span/div class=' cm-content ' p { $ data。内容} .rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '回复/a/div/div/-二级评论begin-ul class=' children ' volist name=' data。children ' id=' child '李comment _ id=' { $ child。id } ' div img class=' head-pic ' src=' http : { $ child。head _ pic } ' alt=' '/div class=' children-cm ' div class=' cm-header ' span { $ child。昵称}/span { $ child。create _ time }/span/div class=' cm-content ' p { $子内容.rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '回复/a/div/div/-三级评论begin-ul class=' child ' volist name=' child。儿童' id='孙子li comment _ id=' { $孙子。id } ' div img class=' head-pic ' src=' http : { $孙子。head _ pic } ' alt=' '/div class=' children-cm ' div class=' cm-header ' span { $孙子。昵称}/span { $孙子。create _ time }/span/div class=' cm-content ' p { $孙子。内容.-a class=' comment-reply ' comment _ id=' 1 ' href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '回复/a-/div/div/Li/volist/ul！-三级评论end - /li /volist /ul！-二级评论end - /li /volist /ul！-一级评论列表end - /div /div！-评论列表显示区end - /div /body/html(2).单个评论信息差异结构代码

div div img类=' head-pic ' src=' http : { $ data。head _ pic } ' alt=' '/div class=' cm ' div class=' cm-head ' span { $ data。昵称}/span { $ data。create _ time }/span/div class=' cm-content ' p { $ data。content }/p/div class=' cm-footer ' a class=' comment-reply ' comment _ id=' { $ data。id } ' href=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '回复a/部门/部门/部门对应的效果图：

对应的钢性铸铁代码：head-pic {宽度：40 px高度：40 px}.cm { position : relative to p :0 pxleft :40 pxtop :-40px；宽度宽度：600px}。cm-header {填充-左侧：5 px}.cm-内容{填充-左侧：5 px}.cm-页脚{填充-底部：15 px向右文本对齐：边框-bottom: 1px虚线# CCC}。评论-回复{ text-decoration : nonecolor : gray font-size : 14px；}4.射流研究…代码

(1).提交评论：提交评论的a标签按钮引用了样式评论-提交，在其点击事件中进行创建交互式、快速动态网页应用的网页开发技术操作

$(“正文”).委托('。comment-submit '，' click '，function(){ var content=$ .修剪($(这个)。父项()。prev().子代(“textarea”).val())；//根据布局结构获取当前评论内容$(这个)。父项()。prev().子代(“textarea”).val(" ")；//获取完内容后清空输入框if('===content){ alert('评论内容不能为空！');} else { var cmdata=new Object()；cmdata.parent_id=$(this).attr(' parent _ id ')；//上级评论id cmdata.content=contentcmdata。昵称='游客；//测试用数据cmdata。head _ pic='/Public/images/default。jpg '；//测试用数据var replyswitch=$(this).attr('回复开关')；//获取回复开关锁属性$.ajax({ type:'POST '，URL : '/index。PHP/home/index/addComment '，数据： { comment : JSON。stringify(cmdata)}，dataType:'json '，success :函数(data){ if(type of(data。错误)='未定义'){ $().注释-回复')。下一个()。移除();//删除已存在的所有回复分区/更新评论总数$('.注释号').儿童(' span ').html(data.num '条评论');//显示新增评论var newli=if(cmdata . parent _ id==' 0 '){//发表的是一级评论时，添加到一级保险商实验所列表中newli=' Li comment _ id='数据。id ' ' div div class=' head-pic ' src=' data。head _ pic ' ' alt=' '/div div class=' cm ' div class=' cm-head ' span '数据。昵称/span span '数据。create _ time/span/div class=' cm-content ' p '数据。content/p/div div class=' cm-footer ' a class=' comment-reply ' comment _ id=' data。id ' ' href=' JavaScript 33333 '回复/a/div/div/div ul class=' child '/ul/Li；$('.注释-ul ').prepend(newli)；}else{ //否则添加到对应的孩子保险商实验所列表中if('off'==replyswitch){//检验出回复关闭锁存在，即三级评论不再提供回复功能newli=' Li comment _ id='数据。id ' div div class=' head-pic ' src=' data。head _ pic ' ' alt=' '/div div class=' children-cm ' div class=' cm-head ' span ' data。昵称/span span '数据。create _ time/span/div class=' cm-content ' p '数据。content '/p/div class=' cm-footer '/div/div ul class=' children '/ul/Li '；}else{//二级评论的回复按钮要添加回复关闭锁属性newli=' Li comment _ id='数据。id ' ' div div class=' head-pic ' src=' data。head _ pic ' ' alt=' '/div div class=' children-cm ' div class=' cm-head ' span ' data。昵称/span span '数据。create _ time/span/div class=' cm-content ' p '数据。content/p/div class=' cm-footer ' a class=' comment-reply ' comment _ id=' data。id“href=”JAVAScript 36 reply switch=“off”回复/a/div/div/div ul class=' child '/ul/Li；} $('李[comment _ id='数据。parent _ id ' ']').儿童(' ul ').prepend(newli)；} }else{ //有错误信息警报(数据。错误)；} } });} });(2).回复评论：回复评论的a标签按钮引用了样式评论-回复，在其点击事件中进行显示或隐藏评论输入框的操作

//点击'回复'按钮显示或隐藏回复输入框$(“正文”).委托('。comment-reply '，' click '，function(){ if($(this)).下一个(.)长度0){//判断出回复差异已经存在，去除掉$(这个)。下一个()。移除();}else{//添加回复div $(' .注释-回复')。下一个()。移除();//删除已存在的所有回复分区/添加当前回复div var parent_id=$(this).attr(' comment _ id ')；//要回复的评论id var divhtml=if('off'==$(this).attr('回复开关'){//二级评论回复后三级评论不再提供回复功能，将关闭属性附加到'提交回复'按钮div html=' div class=' div-reply-txt ' style=' width :98%；padd :3 px ' repl yid=' 2 ' divtextarea class=' txt-repl ' repl yid=' 2 ' style=' width : 100%；'height : 60px '/text area/div div style=' margin-top :5 px；文本右对齐：'a class=' comment-submit ' parent _ id=' parent _ id ' ' style=' font-size :14 px；文本装饰：无；背景-颜色： # 63B8ffhref=' JavaScript : void(0)；replyswitch='off '提交回复/a/div/div '；} else { div html=' div class=' div-reply-txt ' style=' width :98%；padd :3 px ' repl yid=' 2 ' divtextarea class=' txt-repl ' repl yid=' 2 ' style=' width : 100%；'height : 60px '/text area/div div style=' margin-top :5 px；文本右对齐：'a class=' comment-submit ' parent _ id=' parent _ id ' ' style=' font-size :14 px；文本装饰：无；背景-颜色： # 63B8ffhref=' JavaScript : void(0)；'提交回复/a/div/div '；} $(这个)。after(div html)；} });三、完整代码免费下载

服务器端编程语言(专业超文本预处理器的缩写)无限级分类实现评论及回复

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。