zcy
/
api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端界面添加评论功能

deploy
DESKTOP-4RNDQIC\29019 2020-04-13 18:14:56 +08:00
parent 57857b23b5
commit 154842d92d
6 changed files with 307 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App/Controllers/Blog.php
View File

@ -37,11 +37,14 @@ class Blog extends Controller
if(sizeof($this->querys) != 0){
echo '<pre>';
$docModel = new Models\Doc();
$commentModel = new Models\DocComment();
$doc = $docModel->titleDoc(rawurldecode( $this->querys['title']));
$id = $doc[0]["id"];
$markdown = new Parsedown;
$content = $markdown->text($doc[0]['content']);
$typedocs = $docModel->getAllTypeDocs();
$doccoment = $commentModel->DocComments($id);
var_dump($doccoment);
echo '</pre>';
if(\App\Config::$DEBUG)
View::renderTemplate("/blog/basic.html",

5
App/Controllers/DocComment.php
View File

@ -20,4 +20,9 @@ class DocComment extends Controller
$comment->InsertObject($this->input);
//$this->JsonResp(200,$all,"OK");
}
public function getDocCommentAction(){
$comment = new Models\DocComment();
var_dump($this->input);
var_dump($comment->DocComments(1));
}
}

5
App/Models/DocComment.php
View File

@ -13,4 +13,9 @@ class DocComment extends Model
{
return parent::InsertObject($obj); // TODO: Change the autogenerated stub
}
function DocComments($docid){
$db = static::getDB();
$stmt = $db->query('SELECT * FROM doc_comment where doc_comment.doc_id = '.strval($docid));
return $stmt->fetchAll();
}
}

113
App/Views/blog/basic.html
View File

@ -5,8 +5,10 @@
<title>crystal blue</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="/api/App/Views/blog/css/left.css" rel="stylesheet" type="text/css">
<link href="/api/App/Views/blog/css/comment.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/api/App/Views/blog/js/left.js"></script>
<script type="text/javascript" src="/api/App/Views/blog/js/scripts.js"></script>
<script type="text/javascript" src="/api/App/Views/blog/js/comment.js"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
@ -220,6 +222,117 @@ ul li a{
word-break: break-all; word-wrap:break-word;">
{{ content | raw}}
</div>
<div class="comment-filed">
<!--发表评论区begin-->
<div>
<div class="comment-num">
<span>1条评论</span>
</div>
<div>
<div>
<textarea class="txt-commit" replyid="0"></textarea>
</div>
<div class="div-txt-submit">
<a class="comment-submit" parent_id="0" style="" href="javascript:void(0);"><span style=''>发表评论</span></a>
</div>
</div>
</div>
<!--发表评论区end-->
<!--评论列表显示区begin-->
<!-- {$commentlist} -->
<div class="comment-filed-list" >
<div><span>全部评论</span></div>
<div class="comment-list" >
<!--一级评论列表begin-->
<ul class="comment-ul">
<volist name="commlist" id="data">
<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>
<!--二级评论begin-->
<ul class="children">
<volist name="data.children" id="child" >
<li comment_id="{$child.id}">
<div >
<div>
<img class="head-pic" src="{$child.head_pic}" alt="">
</div>
<div class="children-cm">
<div class="cm-header">
<span>{$child.nickname}</span>
<span>{$child.create_time}</span>
</div>
<div class="cm-content">
<p>
{$child.content}
</p>
</div>
<div class="cm-footer">
<a class="comment-reply" replyswitch="off" comment_id="{$child.id}" href="javascript:void(0);">回复</a>
</div>
</div>
</div>
<!--三级评论begin-->
<ul class="children">
<volist name="child.children" id="grandson" >
<li comment_id="{$grandson.id}">
<div >
<div>
<img class="head-pic" src="{$grandson.head_pic}" alt="">
</div>
<div class="children-cm">
<div class="cm-header">
<span>{$grandson.nickname}</span>
<span>{$grandson.create_time}</span>
</div>
<div class="cm-content">
<p>
{$grandson.content}
</p>
</div>
<div class="cm-footer">
<!-- <a class="comment-reply" comment_id="1" href="javascript:void(0);">回复</a> -->
</div>
</div>
</div>
</li>
</volist>
</ul>
<!--三级评论end-->
</li>
</volist>
</ul>
<!--二级评论end-->
</li>
</volist>
</ul>
<!--一级评论列表end-->
</div>
</div>
<!--评论列表显示区end-->
</div>
</div>
{% endif %}
{% if donate == true %}

103
App/Views/blog/css/comment.css Normal file
View File

@ -0,0 +1,103 @@
.comment-filed{
width:640px;
margin-left: 20px;
margin-top: 50px;
}
.comment-num{
text-align: right;
font-size:14px;
}
.div-txt-submit{
text-align:right;
margin-top:8px;
}
.comment-submit{
background-color:#63B8FF;
margin-top:15px;
text-decoration:none;
color:#fff;
padding:5px;
font-size:14px;
}
.txt-commit{
border:1px solid blue;
width:620px;
height: 60px;
padding: 10px;
}
.txt-reply{
width: 100%;
height: 60px;
}
.comment-filed-list{
margin-top:20px;
}
.comment-list{
margin-top:2px;
width:herit;
height:50px;
border-top:1px solid gray;
}
.comment-ul{
list-style:none;
padding-left:0;
}
.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;
}
.children{
list-style:none;
background-color:#FAFAFA;
padding-left:0;
margin-left:40px;
}
.children-cm{
position:relative;
left:40px;
top:-40px;
width:90%;
}

77
App/Views/blog/js/comment.js Normal file
View File

@ -0,0 +1,77 @@
$(function(){
//点击提交评论内容
$('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);
}
}
});
}
});
//点击"回复"按钮显示或隐藏回复输入框
$("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);
}
});
})