文章详情页面评论功能添加及实现原理

1.评论框及评论内容展示模板如下：

      <!-- 发表评论 --><div id="comment"><h3><strong>发表评论:</strong></h3><p><span>标题：</span><input type="text" name="" id="comm_title" class="text"></p><p><span>内容：</span><textarea rows="10" id="content" cols="30" class="text-textarea"></textarea></p><p style="text-align:right;"><button class="btn">发表</button></p></div>

2.评论按钮点击时触发事件，通过ajax传递给后台

        //评论事件ajax处理$('.btn').click(function(){//取得title和content的值var title=$('#comm_title').val();var content=$('#content').val();var url="{:U('Content/comment')}";if(title==''||content==''){alert("评论或标题为空！无法提交！");return false;}var art_id="{$artInfo.art_id}";$.get(url,{'art_id':art_id,'comm_title':title,'comm_content':content},function(data){//将接受到到的静态模板放到评论区块下面$('#comment').after(data);//将评论区域内容清空$('#comm_title').val('');$('#content').val('');//刷新location.reload();})})

3.后台接收ajax传递的参数进行入库处理，如果入库成功则响应一块comment模板到评论下方

    /*提交添加评论信息的方法return string*/function comment(){$data=I('get.');//添加入库时间$data['comm_time']=time();//数据入库$res=M('comm')->add($data);if($res){//如果添加成功则响应一块静态模板给前端$this->assign('data',$data);$this->display();}else{echo '评论发布失败！';}}

4.自定义comment的模板内容如下：

  <div class="media"><a class="pull-left" href="#"><img class="media-object img-circle" src="__PUBLIC__/static/Home/images/touxiang.jpg" alt="媒体对象" width="80"></a><div class="media-body"><h4 class="media-heading"><span class="pull-left">{$data.comm_title}</span><time class="pull-right">{$data.comm_time|date="Y/m/d H:i:s",###}</time></h4><p>{$data.comm_content}<a href="javascript:void(0);" class="reply">回复</a></p><br><div style="display:none;">              <textarea name="" cols="50" rows="2"</textarea><input type="button" class="replyBtn" data-id="{$data.comm_id}" value="提交"></div></div>  </div>

文章详情页面评论功能添加及实现原理相关推荐

Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页...
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
基于Spring Boot和Vue3的博客平台文章详情与评论功能实现
在前面的教程中,我们已经实现了基于Spring Boot和Vue3的发布.编辑.删除文章功能以及文章列表与分页功能.本教程将引导您实现博客平台的文章详情与评论功能. 整个实现过程可以分为以下几个步骤: ...
08 - 文章详情页面
文章详情页面 8-1:开篇从本章开始我们要进入文章详情的页面开发. 在文章详情页面可以展示: 文章标题作者信息发布时间文章内容文章评论同时你可以在这里进行: 作者关注文章评论文章点赞 ...
Python + Django4 搭建个人博客（十）：实现文章详情页面
上篇我们引入了Bootstrap,对博文列表页面进行了一些美化和布局设计. Python + Django4 搭建个人博客(九):Bootstrap实现博客列表页面_李威威wiwi的博客-CSDN博客 ...
BBS（仿博客园系统）项目03（主页搭建、个人站点搭建（侧边栏分类展示、标签展示、日期归档）、文章详情页相关功能实现）...
摘要: 主页面的搭建(导航条下面的区域) 个人站点侧边栏分类展示侧边栏标签展示侧边栏日期归档文章详情页文章内容文章点赞点踩文章评论一.主页面home.html的搭建(进一步完善) ho ...
【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面.名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面. 除了在首页 ...
新闻管理系统——新闻详情页面+评论模块
目录 1.新闻详情页面 ①Controller层 ②dao层 ③service接口 ④service实现类 ⑤效果图 2.评论模块添加评论 ①直接创建CommentsController控制类 ...
实现评论商品详情的评论功能
学习内容: 1.实现页面的渲染(从数据库拿数据去渲染页面,动态的可修改) 2.实现一个简单的登录功能 3.实现对新闻详情的评论 4.评论的时候可以上传照片 5.本次使用的是mysql+mvc+控制层+ ...
企业WEB项目实现商品详情页面展示功能
概述在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面.其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情.延迟一秒加载使用ajax c) 商品的 ...
小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面
一:案例要求和数据: (1)移动端适配 (2)列表跳详情 (3)回到顶部 (4)上下页 (5)时间格式 (6)解决接口跨域请求访问问题 (7)路由跳转无bug 接口路径均以 http://118.19 ...

文章详情页面评论功能添加及实现原理

文章详情页面评论功能添加及实现原理相关推荐

最新文章

热门文章