评论功能的实现_vue实现评论评论回复功能 - CSDN
精华内容
参与话题
  • 评论回复功能实现

    万次阅读 多人点赞 2020-05-13 01:44:07
    最后的效果图如上,大家不难发现这个回复的想法和知乎的回复模式差不多(因为我就是照着那个思路实现的 :) ),只是这里少实现了查看对话的功能。下面说说我实现这个过程中遇到的一些困难。 首先讲讲我的数据库的...

     

    最后的效果图如上,大家不难发现这个回复的想法和知乎的回复模式差不多(因为我就是照着那个思路实现的 :) ),只是这里少实现了查看对话的功能。下面说说我实现这个过程中遇到的一些困难。

     

    首先讲讲我的数据库的实现:

    RId指的是每个评论的唯一id,这个R取得是review(评论)的意思

    RTId指的是每条帖子的id

    RRId指的是被回复的评论的id,如果有就是其id,无为0

    ROwnerName指的是此条评论的人的名字

    RTargetName指的是被回复的人的名字,可空

    RComments指的是评论的内容

    RTime指的是评论的时间

     

    (1)如何实现点击图中的“回复”按钮,在评论下方就弹出一个输入框。

    这个很好实现,主要涉及到的就是一些js的知识。

     

    那么,到底该怎么实现点击“回复”,就在这个评论下方弹出一个输入框而不是在其他的输入框下弹出呢?

    我们首先得给这个输入框所在的div分配一个唯一的id,这里我们可以使用评论的RId。

    然后再给回复按钮添加监听函数,也就是设置其onclick属性,传入的参数就是输入框的id。每当点击按钮的时候,都改变输入框所在div的display属性

     

    <button type="button" class="btn btn-secondary" onclick="hide('#{specificReview.RId}')">回复</button>  <br />
    <p class="cContent">#{specificReview.RComments}</p>   <!--每个人回复的评论 -->  <br />
    
    <div class="comment-edit" id="#{specificReview.RId}" style=" display: none;">
        <h:inputTextarea id="doubleComments"
                         class="form-control edit"
                         value="#{comment.RDComments}"                                
                         />
        <!--<h:message for="doubleComments" style="color:red"/>-->
        <div class="preview">
            <div class="buttons">
                <h:commandButton immediate="true" class="btn btn-secondary" rendered="#{!login.isLogin()}" value="评论前请先登录" action="#{navBean.login}" />
                <h:commandButton id="submitButton" rendered="#{login.isLogin()}" actionListener="#{discuss.setTopic(discuss.topic)}"  action="#{comment.storeIntoDB(discuss.topic.TId, specificReview.RId, login.userName, specificReview.ROwnerName)}" class="btn btn-primary post broadcast" value="回复"/>                
            </div>
        </div>
    </div>

    下面是javascript的代码

        <script>
            function hide(a) {
                if (document.getElementById(a).style.display !== 'none')
                {
                    document.getElementById(a).style.display = 'none';
                }
                else
                {
                    document.getElementById(a).style.display = '';
                }
            }
        </script>

     

    可能有的猿友会疑惑那些 h: 和 #{} 是什么东西。

     

    这个h:是JSF框架下的组件(应该不影响阅读吧,感觉和 HTML 的元素差不多),#{}是EL表达式。

     

     

    (2)我们可以看到,有那么多输入框(只是很多的display都是none,并没有显示)。那么如何确保获取到的输入框的值恰巧是我们评论的输入框的值呢?

    我们都不难想到使用EL表达式来取值,也就是上面代码中的<h:inputTextArea value="#{comment.RDComments}">

     

    但是大家可能会遇到下面这个问题:在点击“评论”按钮时,相当于提交表单,而这里就会默认将你回复的评论下面的所有的<h:inputTextArea>(也就是我们的输入框)中的value=#{comment.RDComments}执行一遍,这就导致了我们获取的评论值总是为空的情况。

    那么该怎么解决这个情况呢?

    其实很简单,就是在set函数中判断一下,如果获取的值为空,就不赋值。

        public void setRDComments(String RDComments) {
            if (RDComments.length() > 0) {
                this.RDComments = RDComments;
            }
        }

     

    (3)如何实现评论判空,我有两个想法

     

    1. 点击“评论”按钮会在其下面弹出唯一一个提示框,提示内容是“评论不能为空”。

    2.评论为空时,将评论按钮disabled掉,这个给输入框添加onchange函数就行,在函数里使用getElementById获取到输入框的value,为空则disabled。

     

    无论哪个想法,都绕不开给这个输入框分配一个唯一的id,因为我好像并没有找到获取到一个div的element,然后再获取其间的其他元素的js方法。说的有点绕

    <div id="onlyOne">
      <input name="inputText" type="text" />
      <button name="submitButton" type="button">回复</button>
    </div>

    就是我知道这个div的id是"onlyOne",我能不能通过document.getElementById("onlyOne"),然后通过某种方法得到这个div中name为inputText或者为submitButton的组件的value呢?希望有路过的猿友能提示一下到底有没有这样一种方法

    <2020-05-13> 这个是可以的,我随手搜了一下,感觉 https://stackoverflow.com/a/5753895/10315163 这个就很不错。

     

    先说一下,其实我并没有实现这个功能,只有几点关于给输入框分配唯一id的想法。

    没实现的原因是在JSF框架下,其组件的id是变的(这个我就十分不理解)。

    就像上面这个图中的id,前面的那个j_idt157怎么搞都搞不掉,后面那个10指的是这个页面第几个输入框(这个是自动生成的,0是第1个,10就是第11个),最后面的doubleComments才是设置的id。

     

    为了让这个输入框的id唯一,我尝试了一个组合id的方法:

    <div class="comment-edit" id="#{specificReview.RId}Div" style=" display: none;">
        <h:inputTextarea id="#{specificReview.RId}doubleComments"
                         class="form-control edit"
                         value="#{comment.RDComments}"                                
                         />
        <!--<h:message for="doubleComments" style="color:red"/>-->
        <div class="preview">
            <div class="buttons">
                <h:commandButton immediate="true" class="btn btn-secondary" rendered="#{!login.isLogin()}" value="评论前请先登录" action="#{navBean.login}" />
                <h:commandButton id="submitButton" rendered="#{login.isLogin()}" actionListener="#{discuss.setTopic(discuss.topic)}"  action="#{comment.storeIntoDB(discuss.topic.TId, specificReview.RId, login.userName, specificReview.ROwnerName)}" class="btn btn-primary post broadcast" value="回复"/>                
            </div>
        </div>
    </div>

    就是将id扩展一下,将原来的div的id改为"#{specificReview.RId}Div"(这样亲测有效),然后把输入框的id扩展为"#{specificReview.RId}doubleComments",然而这样并没有啥用,这个输入框的id依然是系统自己给分配的。

     

    然而,我依旧不信邪,既然div能实现组合id,那你这个输入框为啥不行,然后我就把这个输入框的id设置为"#{specificReview.RId}",然后它却报错了,报错原因是id不能为空。

     

    不过我还有一个想法,就是不使用div布局了,改用table布局。给这个table分配唯一id为"#{specificReview.RId}",然后我们就有一个document.getElementById("tableId").rows[id].cells[1].innerText;来获取到其下的<td>的值。不过我没有具体了解这个js方法,能不能实现我也不能保证。

     

    如果有猿友按照这个想法实现了,能不能劳烦通知我一声,毕竟我也想知道这玩意能不能成。

     

    (4)如何获取到被回复的人的评论的id

    这个可以通过添加函数action或者actionListener实现,然后将这个id作为调用函数的参数传进去,在调用的函数里保存这个id。

     

    当然实现类似的回复功能的方法有很多,我的这个只能算是其中的比较基础的一个。我在查看知乎评论的页面源码的时候,好像还没有发现知乎的评论输入框都有一个id之类的,这也是让我很困惑的地方。

     

    <2020-05-13> 这个东西是我好久以前做的,当时我们小组连版本管理都没有(我也不知道这个概念 XD),改完东西都是通过 U 盘拷贝来拷贝去的。依稀记得每次交换完最新代码我都是用类似 project1 等名称来命名那个文件夹,当时是清楚啥是啥,现在回去看都无法确定哪个是最新的。现在回头看来真的是感慨万千。

     

     <2020-05-13> 我对这个项目依稀的记忆是基于 JSF 的,然后还有 Java Bean,企业 Bean 什么的,服务器是 Glassfish(至于为什么不是 tomcat,我姑且不知道),IDE 是 Netbeans。这些都是个什么东西我早就忘的一干二净了,就连怎么运行这个项目也不记得了。剩下的只是项目文件夹下 12 的无意义的文件,和这篇记录当时自己颠簸的文章。还有最上面那个演示的 GIF 里回复后自动回到顶部的奇怪 bug。所以源码是不会提供了...,而且只要思路清晰,写出代码是没有问题的。(这个观念是我最近看完《如何阅读一本书》后和自己经历对比后坚信的,书中说“一个人如果说他知道他在想些什么,却说不来,通常是他其实并不知道他自己在想些什么。”)

     

    <2020-05-13> 刚刚看到了有人分享 MIT 的 [The Missing Semester of Your CS Education](https://missing.csail.mit.edu/) 这个课程,想到了自己一直不愿意直面的这篇文章,也想到了前几个月无意中逛到的几个人 ice1000ibug...,想起了龙应台的目送:“你和他的缘分就是今生今世不断地在目送他的背影渐行渐远。你站在小路的这一端,看着他逐渐消失在小路转弯的地方,而且,他用背影默默地告诉你,追不上。”(有改)。

     

    展开全文
  • java 实现评论功能

    万次阅读 多人点赞 2019-10-11 15:29:05
    用 Java 实现评论功能,这节是实现评论,之后会补充回复功能,下面是效果图(此处不会详解页面的设计,哈哈哈,因为页面也不是我设计的,而且这个页面还被我玩坏了) 其实和我上一篇博客的知识很是相近 1. 创建...

    !!!!!!!先不要用具体代码,没改好!!!!!!!!

    用 Java 实现评论功能,这节是实现评论,之后会补充回复功能,下面是效果图(此处不会详解页面的设计,哈哈哈,因为页面也不是我设计的,而且这个页面还被我玩坏了)

    其实和我上一篇博客的知识很是相近

         1. 创建数据库 (使用 MySQL 数据库)

         2. 创建 Comment 类(评论)、Reply 类(回复)

         3. 连接数据库

         4. 将相应的添加评论进数据库 

         5. 添加回复进数据库

         6. 从数据库中取出元素并创建 Comment 或 Reply 类,并将其放进 commentList 或 replyList 中

         7. 在 jsp 页面中循环数组,将需要的数据进行展示即可

    下面分开来看代码:

    1.  创建数据库 (使用 MySQL 数据库)

    Comment 数据库下的两个表
    1. Comment 表
    create table Comment(
    	comment_id serial NOT NULL,          //评论id号
    	user_id varchar(11),                 //用户id号
    	content varchar(50),                 //评论内容
    	createtime varchar(25)               //创建评论的时间
    );
    2. Reply 表
    create table Reply(
    	comment_id serial NOT NULL,          //评论id号        
    	user_id varchar(11),                 //用户id号
    	replyuser_id varchar(11),            //被回复用户的id号
    	content varchar(50),                 //评论内容
    	createtime varchar(25)               //创建评论的时间
    );

    2. 创建 Comment 类(评论)、Reply 类(回复)

    记得将这两个类创建成 javaBeans 的形式,即每一个变量都是 private ,而且都有相应的 get 和 set 的方法。

    Comment 类有以下变量 

    	private int comment_id;    //评论id号 int
    	private String user_id;    //用户id varchar(11)
    	private String username;   //用户名 varchar(10)
    	private String content;    //评论内容 varcar(50)
    	private String createtime; //评论时间 varchar(25)

    Reply 类有以下变量

    	private int comment_id;       //评论id int
    	private String user_id;       //用户id varchar(11)
    	private String username;      //用户名 varchar(10)
    	private String replyuser_id;  // 被回复人id varchar(11)
    	private String content;       //回复内容 varchar(50)
    	private String createtime;    //回复时间 varchar(25)

     3. 连接数据库

    public class BaseDao {
    	
    	public Connection getConnection() {
    		// 相关参数的设置
    		String username = "root";// 数据库用户名
    		String password = "**********";// 数据库密码
    		String driver = "com.mysql.jdbc.Driver";  
    		String url = "jdbc:mysql://localhost:3306/comment";  
    		// 数据库的连接
    		try {
    			Class.forName(driver);
    			return DriverManager.getConnection(url, username, password);
    		} catch (ClassNotFoundException e) {
    			e.printStackTrace();
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    }

    4. 将相应的添加评论进数据库  ( 4,5,6 点都在 CommentServlet 的方法中实现)

    先在 init() 方法中连接数据库
    
    	Connection dbconn = null;
    	public void init() throws ServletException {
    		dbconn = new BaseDao().getConnection();
    	}
    
    	public void addComment(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    
    		try {
    			HttpSession session = request.getSession();
    			String user_id = (String) session.getAttribute("user_id");// 得到该登录用户的id号
    			String content = new String(request.getParameter("content").getBytes("iso-8859-1"), "utf-8");
    			String createtime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());
    			String sql = "insert into Comment(user_id,content,createtime) value(?,?,?)";
    
    			try {// 将评论添加进数据库
    				PreparedStatement pstmt = dbconn.prepareStatement(sql);
    				pstmt.setString(1, user_id);
    				pstmt.setString(2, content);
    				pstmt.setString(3, createtime);
    				pstmt.executeUpdate();
    			} catch (SQLException e) {
    				e.printStackTrace();
    			}
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		 ListComment display = new ListComment(dbconn);//将数据库中的评论及回复信息加载出来并进行显示
    		 display.listComment(request, response); 
    
    	}

    一般带有评论功能的网站都是需要登录的,所以先把该用户的 user_id 放在 session 中,然后再取出即可。下面同样

    5. 添加回复进数据库

    	public void addReply(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
    
    		try {
    			String replyuser_id = request.getParameter("replyuser_id");// 得到被评论用户的id号
    		
    			HttpSession session = request.getSession();// 得到该登录用户的id号
    			String user_id = (String) session.getAttribute("user_id");
    			String content = new String(request.getParameter("content").getBytes("iso-8859-1"), "utf-8");// 评论
    			String createtime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());// 时间
    			String sql = "insert into reply(replyuser_id,user_id,content,createtime) value(?,?,?,?)";
    			// 将回复添加进comment数据库 中的 reply表
    			try {
    				PreparedStatement pstmt = dbconn.prepareStatement(sql);
    				pstmt.setString(1, replyuser_id);
    				pstmt.setString(2, user_id);
    				pstmt.setString(3, content);
    				pstmt.setString(4, createtime);
    				pstmt.executeUpdate();
    			} catch (SQLException e) {
    				e.printStackTrace();
    			}
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		 ListComment display = new ListComment(dbconn);//将数据库中的评论及回复信息加载出来并进行显示
    		 display.listComment(request, response); 
    	}

    6. 从数据库中取出元素并创建 Comment 或 Reply 类,并将其放进 commentList 或 replyList 中

    	public void listComment(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
    		List<Comment> commentList = new ArrayList<Comment>();// 评论数组
    		List<Reply> replyList = new ArrayList<Reply>();// 回复数组
    		String commentSql = "select * from Comment";
    		String replySql = "select * from Reply";
    		PreparedStatement pstmt;
    		try { // 添加评论
    			pstmt = dbconn.prepareStatement(commentSql);
    			ResultSet rst = pstmt.executeQuery();
    			while (rst.next()) {
    				int comment_id = rst.getInt("comment_id");  //得到数据库中的数据
    				String user_id = rst.getString("user_id");
    
                //得到用户名,需要在 Comment 数据库中有一个User 表,该表中至少 含有 user_id 和 username 两个属性(下同)
    				String username = getUserName(user_id);    
    				String content = rst.getString("content");
    				String createtime = rst.getString("createtime");
    
    				Comment comment = new Comment();//创建 Comment 类
    				comment.setComment_id(comment_id);
    				comment.setUser_id(user_id);
    				comment.setUsername(username);
    				comment.setContent(content);
    				comment.setCreatetime(createtime);
    
    				commentList.add(comment);// 将此评论添加到数组中
    			}
    
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    
    		try { // 添加回复
    			pstmt = dbconn.prepareStatement(replySql);
    			ResultSet rst = pstmt.executeQuery();
    			while (rst.next()) {
    
    				int comment_id = rst.getInt("comment_id");  //得到数据库中相应数据
    				String user_id = rst.getString("user_id");
    				String replyuser_id = rst.getString("replyuser_id");
    				String username = getUserName(user_id);
    				String content = rst.getString("content");
    				String createtime = rst.getString("createtime");
    
    				Reply reply = new Reply();   //创建 reply 类
    				reply.setComment_id(comment_id);
    				reply.setUser_id(user_id);
    				reply.setUsername(username);
    				reply.setReplyuser_id(replyuser_id);
    				reply.setContent(content);
    				reply.setCreatetime(createtime);
    
    				replyList.add(reply);// 将此评论添加到数组中
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		HttpSession session = request.getSession();   //得到 session 
    		session.setAttribute("commentList", commentList);   //将 评论数组 和 回复数据 均放入 session 中
    		session.setAttribute("replyList", replyList);
    		RequestDispatcher rd = request.getRequestDispatcher("HavaAComment.jsp");//跳转至评论显示页面
    		rd.forward(request, response);
    	}

    得到 username 的方法,得到用户名,需要在 Comment 数据库中有一个User 表,该表中至少 含有 user_id 和 username 两个属性

    	public String getUserName(String user_id) {
    
    		String sql = "select username from user where user_id=?";
    		String username = null;
    		try {
    			PreparedStatement pstmt = dbconn.prepareStatement(sql);
    			pstmt.setString(1, user_id);
    			ResultSet rs = pstmt.executeQuery();
    			if (rs.next()) {
    				username = rs.getString("username");
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		return username;
    	}

     7. 在 jsp 页面中循环数组,将需要的数据进行展示即可(就是因为这里还没有完成,所以导致回复功能还没有完成)

     下面的 HaveAComment.jsp 可能有些细节问题,因为这是我从中截取出来的,但是核心内容已经写在了下面。

    <html>
    <body>
    <!-- 评论展示-->
    <c:forEach var="comment" items="${commentList }">
    <div>
    <h4><a href="#">${comment.username }</a></h4>
    <span><a href="#">${comment.createtime }</a></span>
    <p>${comment.content }</p>
    <p><span class="reply"><a href="#">Reply</a></span></p>
    </div>
    </c:forEach>
    
    <!-- 评论书写框 -->
    <div>
    <h3>Leave a comment</h3>
    <form  action="addComment.do?action=addComment" method="post">
          <fieldset>
          <br style="clear:both" />
          <textarea cols="25" rows="5" name="content" >Message</textarea>
          <br style="clear:both" />
          <input type="submit" name="submit" class="button"  value="Submit"/>
          </fieldset>
     </form>
     </div>
    
    </body>
    </html>

    上面就是评论功能的大概实现,还没有回复,改日定会回来加上。

     

     

    展开全文
  • 易生活(二)-APP—安卓中评论功能实现

    万次阅读 热门讨论 2016-05-26 21:36:29
    易生活(二)-APP—安卓中评论功能实现背景 在项目开发过程中用到了社交这个功能,同时包含了评论相关,做了这一块,记录一下。 效果图实际效果图后文给出的可供下载的源码效果图环境 AndroidStudio 配置...

    易生活(二)-APP—安卓中评论功能的实现

    背景

    1. 在项目开发过程中用到了社交这个功能,同时包含了评论相关,做了这一块,记录一下。

    效果图

    实际效果图

    这里写图片描述

    后文给出的可供下载的源码效果图

    这里写图片描述

    环境

    • AndroidStudio

    • 配置

      dependencies {
          compile fileTree(dir: 'libs', include: ['*.jar'])
          testCompile 'junit:junit:4.12'
          compile 'com.android.support:appcompat-v7:23.4.0'
          compile 'com.jakewharton:butterknife:7.0.1'
          compile 'com.facebook.fresco:fresco:0.9.0+'
      }
      

    思路及实现

    1. 核心思路:因为考虑到要下拉刷新和上拉加载更多,为了避免事件冲突,我们避免使用ScrollView加Listview以及其它部分来实现。将评论列表设置成一个ListVIew,图文消息主题部分当做一个head添加到ListView中,最下层的两个按钮放到刷新布局的外面。
    2. 对于下面如何实现点击“评论”弹出评论框,同时原有两个按钮消失:设置两个LinearLayout布局,将原有按钮所在的LinearLayout设置为可见,另外一个设置为“gone”,当用户点击“评论”时,改变这两个LinearLayout的可见于不可见即可。
    3. 如何实现点击“评论”之后跳出拼音输入法,代码如下:

        /**
           * 显示或隐藏输入法
           */
          private void onFocusChange(boolean hasFocus) {
              final boolean isFocus = hasFocus;
              (new Handler()).postDelayed(new Runnable() {
                  public void run() {
                      InputMethodManager imm = (InputMethodManager)
                              MainActivity.this.getSystemService(INPUT_METHOD_SERVICE);
                      if (isFocus) {
                          //显示输入法
                          imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
                          mAmEtMsg.setFocusable(true);
                          mAmEtMsg.requestFocus();
                      } else {
                          //隐藏输入法
                          imm.hideSoftInputFromWindow(mAmEtMsg.getWindowToken(), 0);
                      }
                  }
              }, 100);
          }
      
    4. 细节不再累述,参看源码

    这是平时写的一些技术文章的微信公众号,欢迎关注:

    这里写图片描述

    演示代码下载

    http://download.csdn.net/detail/wgyscsf/9532429

    展开全文
  • 评论功能实现

    千次阅读 2019-06-21 18:20:03
    评论: 根评论:对文章的评论评论:对评论评论 区别:是否有父评论 流程 构建样式 提交根评论 显示根评论 -- render显示 -- Ajax显示 提交子评论 ...

    评论:

    • 根评论:对文章的评论

    • 子评论:对评论的评论

    • 区别:是否有父评论

    流程

    1. 构建样式

    2. 提交根评论

    3. 显示根评论

      1. -- render显示

      2. -- Ajax显示

    4. 提交子评论

    5. 显示子评论

      1. -- render显示

      2. -- Ajax显示

    html

        <!-- 评论 -->
        <div class="comments">
            <ul class="comment_list list-group">
                {% for comment in comment_list %}
                    <li class="list-group-item">
                        <div class="comment_info">
                            <a href="">#{{ forloop.counter }}楼 &nbsp;&nbsp;</a>
                            <span>{{ comment.created_time | date:'Y-m-d H:i' }} </span> &nbsp;&nbsp;
                            <a href=""><span>{{ comment.user.username }}</span></a>
                            <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                               comment_pk='{{ comment.pk }}'>回复</a>
                        </div>
    
                        {% if comment.parent_comment_id %}
                            <div class="pid_info well">  <!-- well:和子评论形成间隙 -->
                                <p>
                                    {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }}
                                </p>
                            </div>
                        {% endif %}
                        <div class="show_comment_content">
                            <p>{{ comment.content }}</p>
                        </div>
    
                    </li>
                {% endfor %}
            </ul>
            <p>评论列表</p>
            <p>发表评论</p>
            <p>
                昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                          value="{{ request.user.username }}">
            </p>
            <p>评论内容:</p>
            <p>
                <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
            </p>
    
            <button class="btn btn-default" id="comment_btn">提交评论</button>
        </div>

     

    css

    /* 评论 */
    input.author {
        background-image: url(/static/font/icon_form.gif);
        background-repeat: no-repeat;
        background-position: 3px -3px;
        border: 1px solid #ccc;
        padding: 4px 4px 4px 30px;
        width: 300px;
        font-size: 13px;
    }
    
    .show_comment_content {
        margin-top: 10px;
    }
    
    .comment_info a {
        cursor: pointer;
        text-decoration: none;
    }
    
    .comment_info a:hover {
        color: #5cb85c;
    }

     

    js

            // 点赞请求
            $('#div_digg .action').click(function () {
                let is_up = $(this).hasClass('diggit');
    
                $obj = $(this).children('span');
    
                $.ajax({
                    url: '/digg/',
                    type: 'post',
                    data: {
                        'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),
                        'is_up': is_up,
                        'article_id': "{{ article_obj.pk }}",
                    },
                    success: function (data) {
                        if (data.status) {
                            let val = parseInt($obj.text());
                            $obj.text(val + 1);
                        } else {
                            let val = data.handled ? '您已经推荐过!' : '您已经反对过!';
                            $('#digg_tips').html(val);
    
                            setTimeout(function () {
                                $('#digg_tips').html("");
                            }, 1000)
                        }
                    }
                })
            });
    
            // 评论请求
            let pid = '';
            $('#comment_btn').click(function () {
                let content = $('#comment_content').val();
    
                if (pid) {
                    let index = content.indexOf("\n");
                    content = content.slice(index + 1);
    
                }
                $.ajax({
                    url: '/comment/',
                    type: 'post',
                    data: {
                        'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),
                        'article_id': "{{ article_obj.pk }}",
                        'content': content,
                        'pid': pid,
                    },
                    success: function (data) {
                        let created_time = data.created_time;
                        let username = data.username;
                        let content = data.content;
    
                        if (data.parent_comment) {  // 用户提交的是子评论,同时显示父评论
                            let latest_comment = `
                        <li class="list-group-item">
                        <div class='well'>
                            <p>${data.parent_name}: ${data.parent_comment}</p>
                        </div>
                        <div>
                            <span>${created_time}</span> &nbsp;&nbsp;
                            <a href=""><span>${username}</span></a>
                        </div>
                        <div class="show_comment_content">
                            <p>${content}</p>
                        </div>
                        </li>`;
                            $('ul.comment_list').append(latest_comment);
    
                        } else {  // 用户提价的是根评论,只显示用户提交的评论
                            let latest_comment = `
                        <li class="list-group-item">
                        <div>
                            <span>${created_time}</span> &nbsp;&nbsp;
                            <a href=""><span>${username}</span></a>
                        </div>
                        <div class="show_comment_content">
                            <p>${content}</p>
                        </div>
                        </li>`;
                            $('ul.comment_list').append(latest_comment);
                        }
    
                        // 清空评论框
                        $('#comment_content').val('');
                        pid = "";
                    }
                })
            });
    
            // 回复按钮事件
            $('.reply_btn').click(function () {
                $('#comment_content').focus();
                let comment_user = '@' + $(this).attr('username') + "\n";
                $('#comment_content').val(comment_user);
    
                pid = $(this).attr('comment_pk');
            });

     

    py

    # urls.py
    
    # 评论
    path('comment/', views.comment),
    
    views.py
    
    # 评论
    def comment(request):
        article_id = request.POST.get("article_id")
        pid = request.POST.get('pid')
        content = request.POST.get('content')
        user_id = request.user.pk
    
        comment_obj = models.Comment.objects.create(
            user_id=user_id,
            article_id=article_id,
            content=content,
            parent_comment_id=pid
        )
    
        response = {}
        response['created_time'] = comment_obj.created_time.strftime('%Y-%m%d %X')
        response['username'] = request.user.username
        response['content'] = content
        if pid:
            parent_comment = models.Comment.objects.filter(nid=pid).first()
            response['parent_comment'] = parent_comment.content
            response['parent_name'] = parent_comment.user.username
    
        return JsonResponse(response

     

     

    转载于:https://www.cnblogs.com/lshedward/p/10396594.html

    展开全文
  • 评论功能实现

    2020-06-08 09:18:04
    个人网站优化------博客文章评论模块 摘要: 本篇将博客主要是介绍如何实现...2 评论功能实现思路 (1)数据库存储实现思路 对于评论的存储我们可以使用Mysql数据库进行存储,因为评论内容较少.如果访问量较高的情况加
  • Java+MySQL实现评论功能设计开发

    万次阅读 多人点赞 2020-03-02 10:07:34
    Java+MySQL实现评论功能设计开发 一、背景 项目初始版本上线,有时间写点东西记录一下项目中的心得体会,通过这个项目学习了很多,要写下来的有很多,先从评论功能开始吧。由于项目需要增加评论功能,之前并无此...
  • 发表评论功能实现

    千次阅读 2018-12-10 13:16:42
    1、把文本框做双向数据绑定 2、为发表按钮绑定一个事件 3、校验评论内容是否为空,...+如果调用 getComments 方法重新刷新评论列表的话,可能只能得到 最后一页的评论,前几页的评论获取不到 +换一种思路:当...
  • 微信小程序 评论功能实现

    万次阅读 2019-06-04 14:34:20
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 前端 <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76">...
  • app 评论功能实现

    千次阅读 2014-12-15 10:57:26
    //应用实现评论跳转的两种方法: //第一种: //在iOS6.0前跳转到AppStore评分一般是直接跳转到AppStore评分 //NSString *evaluateString = [NSString stringWithFormat:@"itms-apps://ax.itunes.apple....
  • 基于云开发的小程序评论功能实现

    千次阅读 2019-06-09 22:19:32
    对于文章评论,新建数据库集合来保存评论内容及相关书籍,有以下数据库字段: var args={ cNickName: that.data.userInfo.nickName, cAvatarUrl: that.data.userInfo.avatarUrl, cOpenId: app.globalData....
  • 微信小程序---评论功能实现

    千次阅读 2019-02-12 16:48:37
    提交评论: &lt;!-- 评论 --&gt; &lt;!--textarea--&gt; &lt;view class="message"&gt; &lt;form bindsubmit="formSubmit" class='form'&gt; &lt;...
  • 博客项目实现文章评论功能(重点是评论回复)

    万次阅读 热门讨论 2017-01-23 19:32:55
    ... 有了我的已成型的项目和代码,可以更容易理解这篇文章。 ...本篇文章记录下自己博客项目评论功能实现的全过程,重点其实是评论回复功能。   【一,写评论】 写评论部分我没有使用富文本编辑
  • Android评论功能实现

    万次阅读 多人点赞 2016-08-10 18:03:00
    目前,各种App的社区或者用户晒照片、发说说的地方,都提供了评论功能,为了更好地学习,自己把这个功能实现了一下,做了个小的Demo。 首先推荐一款实用的插件LayoutCreater,可以帮助开发者自动生成布局代码,...
  • springBoot+vue实现类QQ评论功能

    千次阅读 2019-08-19 22:52:05
    本文将讲如何使用一个评论功能。本文的评论功能,是我自己写的一个网站的中的评论,所以大家可以先看看效果,地址:http://www.toheart.xin(已被注销)。好了废话不说直接开讲。 使用技术介绍:后端使用了...
  • Android实现社交应用中的评论和回复功能

    万次阅读 多人点赞 2020-04-08 14:44:12
    对于需求改动和迭代较频繁的公司来说,如何快速开发一个二级界面来适应我们的功能需求无疑优先级更高一些。首先我们来看看其他社交类app的评论与回复列表如何展示的: Twitter不用说了,全球知名社交平台,上亿...
  • 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=...
  • SpringBoot-实现评论功能(事务)

    千次阅读 2020-02-17 14:53:34
    实现评论功能 数据库的构建 创建评论数据表 create table tbl_comment ( id bigint auto_increment, parent_id bigint not null comment '父类id,父类可能是question,也可以同样是comment', type int not ...
  • JavaScript是在静态页面下在网页上添加一些功能使其成为动态网页。 类似qq空间,可以对每条动态进行评论,点赞,回复等功能。 这里主要记录一下几个功能实现。1、删除一条动态在每条动态的右上方有个叉叉,...
  • 各位,帮忙看看,该怎么使用来java实现评论回复功能? 如果有视频的话,可否发给视频链接?
  • 有没有大佬有评论与回复模块的html代码,类似于csdn的评论与回复就行, 最好是使用vue实现的,其它的也可以
1 2 3 4 5 ... 20
收藏数 186,082
精华内容 74,432
关键字:

评论功能的实现