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 '',
`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开发的一个简单的带表情的评论回复实例,可以无限回复,适合新手学习或作为毕业设计作品等. 评论提交验证 $(".submit-btn").click(functi ...
- PHP无限级评论回复功能实现
protected function commentList($aid,$pid = 0,&$result=array()){ $arr = ArticleComment::relation( ...
- WordPress添加评论回复的电子邮件警报通知
评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需 ...
- 纯代码实现WordPress评论回复自动添加@评论者的功能
先看看效果: 这个有什么用呢?添加了@功能之后那些用户评论之间的层次关系就很清晰了,我们可以清楚地知道这些评论是谁发给谁的. 其实主要是为了提升逼格. 实现方法: 将下面代码加入function.ph ...
- falsk sqlalchemy 自关联创建评论回复数据库
本项目在于创建类似微信上的评论回复功能的数据库 基类: from app import db from datetime import datetime class Basemadel(object) ...
- 【python3】酷狗音乐及评论回复下载
新年快乐,上班第一天分享一个python源码,功能比较简单,就是实现酷狗音乐的音乐文件(包含付费音乐)和所有评论回复的下载. 以 米津玄師 - Lemon 为例, 以下为效果图: 1.根据关键词搜索指 ...
- thinkphp 带条件分页查询
thinkphp 带条件分页查询:form表单传值时候,method='get'. 用 get 传值
- Android UI【android 仿微信、QQ聊天，带表情，可翻页，带翻页拖动缓冲】
http://blog.csdn.net/lnb333666/article/details/8546497 如题,这是公司项目的一个功能模块,先上个效果图: 其次大致说说原理: 1,首先判断输入的字 ...
- 微信朋友圈评论/回复/cell/键盘谈起
微信朋友圈评论功能的细节考虑及实现 微信朋友圈回复tableview iOS 实现微信朋友圈评论回复功能(一)
随机推荐
- min-height IE6的解决方案
selector { min-height:500px; height:auto !important; height:500px; } 因为IE6中当内容大于容器高度或宽度时,就会撑破容器.并且在同 ...
- Laravel系列教程一：安装及环境配置
免费视频教程地址https://laravist.com/series/laravel-5-basic 最近在SF上面看到越来越多的Laravel相关的问题,而作为一个Laravel的脑残粉,本来打算 ...
- Spark Streaming从Flume Poll数据案例实战和内幕源码解密
本节课分成二部分讲解: 一.Spark Streaming on Polling from Flume实战 二.Spark Streaming on Polling from Flume源码 第一部分 ...
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- Appium Python 一：环境搭建
安装Android SDK以及模拟器 由于Appium依赖于Android SDK,所以需要先安装SDK. 这里由于需要在Android模拟器上跑测试用例,所以同时需要安装Android 模拟器. 1 ...
- Androidproject师进阶之路 ：《Android开发进阶:从小工到专家》上市啦!
封面 文件夹1 文件夹2 - 当当购买链接 - 京东购买链接 为什么写这本书 写这本书的念头由来已久了. 或许是从我打算写<Android源代码设计模式解析与实战>那时起就萌生了这个念头, ...
- js 根据身份证获取出生日期及性别
js根据身份证获取出生日期及性别 CreateTime--2017年6月2日11:45:16Author:Marydon 第一步:身份证号格式校验 /** * 身份证号格式校验 */ functi ...
- iOS活体人脸识别的Demo和一些思路
代码地址如下:http://www.demodashi.com/demo/12011.html 之前公司项目需要,研究了一下人脸识别和活体识别,并运用免费的讯飞人脸识别,在其基础上做了二次开发,添加了 ...
- php如何通过get方法发送http请求，并且得到返回的参数
向指定的url发送参数,这是一个跨域访问问题,具体事例如下:/test.php<?php$ch = curl_init(); $str ='http://127.0.0.1/form.php?i ...
- java 开发中的debug
mysql 的 级联删除与级联更新 create table student( id int, departmentId int, foreign key(departmentId) referenc ...