ThinkPHP带表情无限级评论回复

今天就tp中（含表情）无限级评论回复做一个个人总结。

1.准备TP基本框架

2.数据库，数据表的建立

A.先说说数据库（表）的建立。

a-1,数据库：blog

a-2,数据表：bolg_comment. 建立如下：

CREATE TABLE IF NOT EXISTS `blog_comment` (`id` int(10) NOT NULL AUTO_INCREMENT,`content` varchar(500) NOT NULL,`pid` int(10) NOT NULL,`email` varchar(50) DEFAULT NULL,`add_time` int(30) NOT NULL,`author` varchar(30) NOT NULL,`isShow` int(1) NOT NULL DEFAULT '0',`ip` varchar(50) NOT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=12 ;

NSERT INTO `blog_comment` (`id`, `content`, `pid`, `email`, `add_time`, `author`, `isShow`, `ip`) VALUES
(1, '路过，路过', 0, '', 0, '隔壁老王', 0, ''),
(2, '暂停一下', 0, '', 0, '兔斯基', 0, ''),
(3, '你好', 1, '', 0, '会飞的鱼', 0, ''),
(4, 'helloword', 2, '', 0, '丘比龙', 0, ''),
(5, 'hello', 3, '', 0, '蜡笔小新', 0, ''),
(6, 'hellorword', 3, '', 1450247783, '漫步语林', 0, '0.0.0.0'),
(7, '围观,你们继续', 2, '', 1450248001, '维尼熊', 0, '0.0.0.0'),
(8, '[em_1]', 1, '', 1450248492, '小飞象', 0, '0.0.0.0'),
(11, 'qqqq22222', 0, NULL, 1450772015, 'qq222222', 0, '127.0.0.1');

其中，content表：评论内容；pid表关联的父id；add_time表评论时间；author表评论作者；ip表发评论者的ip。

==================================================================================

B.接着就是TP框架，我选用的是：thinkphp_3.2.3_full版本，服务器Nginx，数据库MariaDB

b-1,我的应用名称：tper

b-1,数据库信息配置：tper/Application/Common/conf/config.php

<?php
return array(//'配置项'=>'配置值'/* 大小写URL */'URL_CASE_INSENSITIVE'  =>    false,/* 数据库设置 */'DB_TYPE'               =>  'mysql','DB_HOST'               =>  'localhost','DB_NAME'               =>  'blog','DB_USER'               =>  'root','DB_PWD'                =>  'root','DB_PORT'               =>  '3306','DB_PREFIX'             =>  'blog_',/* 模块列表 */'MODULE_ALLOW_LIST'     =>  array ('Home','Admin'),/* 默认模块 */'DEFAULT_MODULE'        => 'Home','SHOW_PAGE_TRACE'=>true,// 'URL_MODEL' => 2,

);

b-2,控制器：CommonController.class.php 和 IndexController.class.php

<?php
namespace Home\Controller;
use Think\Controller;
class CommonController extends Controller {function _initialize(){header("Content-type: text/html; charset=utf-8");}
}?>

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends CommonController {public function index(){$comment = $this->CommentList($pid = 0, $commentList = array(), $spac = 0);// var_dump($comment);$this->assign('commentList', $comment);$this->display();// $this->display();
     }//评论public function addComment() {// var_dump(I('post.'));// $ip = get_client_ip();// echo $ip;// $iplong = ip2long($ip);// echo '<br/>';// echo $iplong;$rules = array(//定义动态验证规则array('comment', 'require', '评论不能为空'),array('username', 'require', '昵称不能为空'),
//            array('username', '3,15', '用户名长度必须在3-15位之间！', 0, 'length', 3),
        );$data = array('content' => I("post.comment"),'ip' => get_client_ip(),'add_time' => time(),'pid' => I('post.pid'),'author' => I('post.username'),);$comment = M("comment"); // 实例化User对象if (!$comment->validate($rules)->create()){//验证昵称和评论exit($comment->getError());}else{$add = $comment->add($data);if($add){$this->success('评论成功');}else{$this->error('评论失败');}}}//评论列表function CommentList($pid = 0, &$commentList = array(), $spac = 0) {static $i = 0;$spac = $spac + 1; //初始为1级评论$List = M('comment')->field('id,add_time,author,content,pid')->where(array('pid' => $pid))->order("id DESC")->select();// echo '<pre>';        // var_dump($List); foreach ($List as $k => $v) {$commentList[$i]['level'] = $spac; //评论层级$commentList[$i]['author'] = $v['author'];$commentList[$i]['id'] = $v['id'];$commentList[$i]['pid'] = $v['pid']; //此条评论的父id$commentList[$i]['content'] = $v['content'];$commentList[$i]['time'] = $v['add_time'];// $commentList[$i]['pauthor']=$pautor;$i++;$this->CommentList($v['id'], $commentList, $spac);}return $commentList;}
}

其中评论列表的方法：“CommentList”，值得学习。

b-3.模板：View/Index/index.html

<!doctype html>
<html><head><meta charset="utf-8"/><title>Thinkphp带表情的无限评论回复</title><meta name="keywords" content="无限评论" /><meta name="description" content="" /><link href="__PUBLIC__/Home/css/base.css" rel="stylesheet"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><!--[if lt IE 9]><script src="__PUBLIC__/Home/js/modernizr.js"></script><![endif]--><style>.input-group .emotion:hover{cursor:pointer;}#wuheng:hover{cursor:pointer;}</style></head><body><div class="ibody"><article><div class="pinglun "><div class="pl" type="button" >评论</div><div class="collapse"><div class="well"><form action="{:U('Index/addComment')}" method="post" role="form" ><div class="input-group"><span class="input-group">昵称</span><input type="text" class="name1 input-group" placeholder="昵称" name="username" value="{$username}"><input type="hidden" class=" input-group" placeholder="" name="pid" value="0"></div><div class="input-group"><span class="emotion input-group">表情</span></div><div class="input-group"><textarea class="comment" id="content-text" name="comment" rows="3" placeholder="请输入评论内容"></textarea></div><div class="input-group submit"><button class="submit-btn" type="submit" >提交</button></div></form></div></div></div><input type="hidden" name="pid" value="{$vo.author}"/><div ><h2></h2><volist name="commentList" id="vo"><eq name="vo.pid" value="0"><hr class="solidline"/><else/><hr class="dottedline"/></eq><div class="commentList "  style="padding-left:{$vo['level']-1}cm"><div><span class="user"><if condition="($vo.pauthor eq NULL)">{$vo.author}<else /> {$vo.author}<span class="black" style="color: #000101">回复</span>{$vo.pauthor}</if></span><a class="hf" id="{$vo.id}" style="float: right">回复</a><span  class="hftime">{$vo.time|date="Y-m-d",###}</span></div><div class="content">{$vo.content|reFace}</div></div></volist></div></div></article><script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="__PUBLIC__/js/jquery.qqFace.js" ></script><script type="text/javascript">$(function() {$('.emotion').qqFace({id: 'facebox', //表情ID
                assign: 'content-text', //赋予到具体位置
                path: '__PUBLIC__/Face/'    //表情路径
            });$(".hf").click(//点击回复按钮事件function(e) {var $this = $(this);if ($this.parent().parent().next().hasClass('hftext')) {$this.parent().parent().next().remove();} else {$this.parent().parent().after('<div class="hftext"><form action="__APP__/Index/addComment" method="post" role="form" > <input name="article_id" type="hidden"  value="{$Article.id}" /><input id="pid" type="hidden" name="pid" value="{$vo.id}"/> <div class="input-group home-from-box"><span class="input-group">昵称</span><input type="text" class="input-group name1" placeholder="昵称" name="username" value="{$username}"></div><div class="input-group"> <span class="input-group emotion2" id="wuheng" style="color:red;">表情</span>  </div><div class="input-group">  <textarea style="display: inline" class="input-group comment" id="content-text2" name="comment" rows="3" placeholder="请输入评论内容"></textarea>  </div><div class="submit">  <input style="width:100px;height:35px "  class="submit-btn" type="submit" value="提交"></div> </form></div>');var v_id = $(e.target).attr('id');//获取元素id;
                            $("#pid").val(v_id);$('.emotion2').qqFace({id: 'facebox', //表情ID
                                assign: 'content-text2', //赋予到具体位置
                                path: '__PUBLIC__/Face/'   //表情路径
                            });}$(".submit-btn").click(function() {var $this = $(this);var name = $this.parent().siblings().children('.name1').val();var content = $this.parent().siblings().children('.comment').val();if (name == "" || content == "") {alert("昵称或者评论不能为空哦");return false;}});});$(".submit-btn").click(function() {var $this = $(this);var name = $this.parent().siblings().children('.name1').val();var content = $this.parent().siblings().children('.comment').val();if (name == "" || content == "") {alert("昵称或者评论不能为空哦");return false;}});//可以进行 ajax处理即选择表情后，立马显示   // $("#content-text").blur(function(){// var ss = $(this).val();// // alert(ss);//    // $.ajax()// });//动态添加元素，并添加相关的事件
});</script><div class="clear"></div><!-- 清除浮动 --></body>
</html>

其中：

 <div class="content">{$vo.content|reFace}</div>中的reFace方法如下：（tper/Application/Common/Common/function.php）

<?php
/*** Created by PhpStorm.* User: yanluan* Date: 15/11/4* Time: 下午2:41*/// 评论显示替换表情标签
function reFace($str){for($i=1;$i<76;$i++){// $path = __URL__;// echo $path;$str = str_replace("[em_$i]","<img src='".__ROOT__."/Public/Face/$i.gif'/>",$str);}return $str;
}

还有一点注意：

"<img src='".__ROOT__."/Public/Face/$i.gif'/>"  这里是使用__ROOT__,而不是__APP__.不然表情图片会调用不成功。

当然还有其他文件，如js,css,images等。这里就不做细讲。

来源：http://www.sucaihuo.com/js/557.html

示例：http://www.sucaihuo.com/jquery/5/557/demo/

注意：下载后，不一定会执行成功，里面有些调用不一定正确。如：上面提到的__ROOT__的使用，而不是__APP__的使用。

如果优化代码，增加客户体验，可以做如下的代码处理。

思路：当客户选择“表情”图片后，<textarea>域里面展示的是代替字符，并不是当前的表情图片，只有当提交信息后才会显示。

处理：当鼠标离开<testarea>后，通过事件的到域中内容，然后通过Ajax处理，得到当前的"表情"图片。方法已有，如：

function reFace($str){for($i=1;$i<76;$i++){// $path = __URL__;// echo $path;$str = str_replace("[em_$i]","<img src='".__ROOT__."/Public/Face/$i.gif'/>",$str);}return $str;
}

适当处理即可。

ThinkPHP带表情无限级评论回复相关推荐

Thinkphp带表情的评论回复实例
Thinkphp带表情的评论回复实例基于Thinkphp开发的一个简单的带表情的评论回复实例,可以无限回复,适合新手学习或作为毕业设计作品等. 评论提交验证 1 $(".submit-bt ...
微信小程序点赞+评论（无限级评论回复）/带图评论解决方案
微信小程序点赞+评论(无限级评论回复)/带图评论解决方案需求描述实现要点分析目录结构前端功能方法集成后端方法数据库结构效果展示未解决的问题需求描述最近在思考一个需求:文章可以评论 ...
html中的评论框怎么写,利用HTML、CSS 实现带表情的评论框的制作教程
HTML带表情的评论框,表情通过Json数据加载,可以根据自己的喜好改变表情.本评论框代码为HTML,CSS,JQ三个方面的代码.图1为原始状态,图2为点击表情时出现的表情列表,可以任意选择一个或者多 ...
html评论输入表情,HTML带表情的评论框
HTML带表情的评论框,表情通过Json数据加载,可以根据自己的喜好改变表情.本评论框代码为HTML,CSS,JQ三个方面的代码. 效果图: Html确定 CSS.Input_Box { width: ...
使用SpringBoot实现无限级评论回复功能
评论功能已经成为APP和网站开发中的必备功能.本文采用springboot+mybatis-plus框架,通过代码主要介绍评论功能的数据库设计和接口数据返回.我们返回的格式可以分三种方案,第一种方案是 ...
微信公众号开发者模式回复信息带表情（QQ，emoji）
最近做微信公众号的迭代老板非要发送消息带表情我调研了网上的各种方法各种开源代码和项目经验没一个能用的- o(╥﹏╥)o emoji 下面是整个流程首先,我自己测试,先往公众号发表情,后台去接 ...
php无限评论回复_php如何制作无限级评论功能？
php如何制作无限级评论功能? 发布时间:2020-05-20 11:18:47 来源:亿速云阅读:198 作者:Leah php如何制作无限级评论功能?这篇文章运用了实例代码展示,代码非常详细,可 ...
视频网站开发：JavaWeb做一个带自定义小表情的评论功能
前几天一直在做视频网站的评论功能,如今虽然说做的不是很好,但也算是挺满意的实现了.自我感觉做的最好的最有花样的就是为评论功能添加了小表情评论.见如下效果图 1.首先第一步,收集你想要使用的小表情,我因 ...
微信回应朋友圈表情包评论关闭：灰度测试；Twitter漏洞波及1700万用户；Ruby 2.7.0发布 | 极客头条...
整理 | 郭芮快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
实现微信公众号评论回复功能
最近做一个项目,实现类似微信公众号评论回复功能,如图所示: 大概分以下几个组件: 表情包组件: <template><div class="showEmjio" ...

ThinkPHP带表情无限级评论回复

ThinkPHP带表情无限级评论回复相关推荐

最新文章

热门文章