JavaWeb_(视频网站)_三、用户模块5 评论回复

 

 

用户评论模块

  用户评论模块分析

 

   编写Comment表字段

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    //评论时间
    private String commentTime;
    //评论内容
    private String commentContent;
    
    //这条评论的所有回复
    @OneToMany(targetEntity = Reply.class)
    @JoinColumn(name="comment_id")
    private Set<Reply> replys = new HashSet<Reply>(); 
    
    //这条评论是评论谁的
    @OneToOne
    @JoinColumn(name = "comment_user_id")
    private User commentUser;
    
    //这条评论是谁发的
    @ManyToOne(targetEntity = User.class)
    @JoinColumn(name="user_id")
    private User user;

    //同意
    @ManyToMany(mappedBy = "agreeComments")
    private Set<User> agreeUsers = new HashSet<User>();
    
    //不同意
    @ManyToMany(mappedBy = "disagreeComments")
    private Set<User> disagreeUsers = new HashSet<User>();

 

  一个用户发n条回复,一个回复回复一个用户

  一条回复回复一条评论,一条评论下面有多条回复

 

  谁发的回复  多对一

  这条回复是回复哪一个评论的  多对一

  这条回复是回复哪一个回复的  多对一

  有那些回复是回复本条回复的  多对多

 

 

  修改特定的Domain实体层,User用户实体,Comment评论实体层,Repy回复实体层

package com.Gary.betobe.domain;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.JoinTable;
import javax.persistence.Lob;
import javax.persistence.ManyToMany;
import javax.persistence.OneToMany;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String username;
    private String password;
    private String email;
    
    private String firstName;
    private String lastName;
    
    private String displayName;
    //个人首页
    private String webUrl;
    
    private String phone;
    //个人描述
    @Lob
    //长文本 ->lob对应mysql的数据类型  longtext
    private String description;
    //social Link
    private String qqLink;
    private String weixinLink;
    
    //封面头像
    private String coverImage;
    //头像
    private String headImage;
    //创建时间
    private String createTime;
    
    //用户发的所有评论
    @OneToMany(targetEntity = Comment.class)
    @JoinColumn(name = "user_id")
    private Set<Comment> comments = new HashSet<Comment>();

    //我关注了哪些用户
    //该用户关注了哪些用户  在保存的时候,会级联保存所有临时对象
    @ManyToMany(cascade = CascadeType.PERSIST)
    @JoinTable(
            name="user_follow",
            joinColumns = @JoinColumn(name = "user_id"),
            inverseJoinColumns = @JoinColumn(name = "follow_id")
            )
    private Set<User> follows = new HashSet<User>();
    
    //用户,同意了哪些评论
    @ManyToMany
    @JoinTable(
            name="agree_user_comment",
            joinColumns = @JoinColumn(name="user_id"),
            inverseJoinColumns = @JoinColumn(name = "comment_id")
            )
    private Set<Comment> agreeComments = new HashSet<Comment>();
    
    
    //用户,不同意了哪些评论
    @ManyToMany
    @JoinTable(
            name="disagree_user_comment",
            joinColumns = @JoinColumn(name="user_id"),
            inverseJoinColumns = @JoinColumn(name="comment_id")
            )
    private Set<Comment> disagreeComments = new HashSet<Comment>();

    
    //用户同意了哪些回复
    @ManyToMany
    @JoinTable(
            name="agree_user_reply",
            joinColumns = @JoinColumn(name="user_id"),
            inverseJoinColumns = @JoinColumn(name="reply_id")
            )
    private Set<Reply> agreeReplys = new HashSet<Reply>();
    
    //用户不同意了哪些回复
    @ManyToMany
    @JoinTable(
            name="disagree_user_reply",
            joinColumns=@JoinColumn(name="user_id"),
            inverseJoinColumns = @JoinColumn(name="reply_id")
            )
    private Set<Reply> disagreeReplys = new HashSet<>();
    
    
    //JPA的标准
    protected User()
    {
        
    }

    
    
    
    @Override
    public String toString() {
        return "User [id=" + id + ", username=" + username + ", password=" + password + ", email=" + email
                + ", firstName=" + firstName + ", lastName=" + lastName + ", displayName=" + displayName + ", webUrl="
                + webUrl + ", phone=" + phone + ", description=" + description + ", qqLink=" + qqLink + ", weixinLink="
                + weixinLink + ", coverImage=" + coverImage + ", headImage=" + headImage + ", createTime=" + createTime
                + ", comments=" + comments + ", follows=" + follows + ", agreeComments=" + agreeComments
                + ", disagreeComments=" + disagreeComments + ", agreeReplys=" + agreeReplys + ", disagreeReplys="
                + disagreeReplys + "]";
    }

    
    public User(Long id, String username, String password, String email, String firstName, String lastName,
            String displayName, String webUrl, String phone, String description, String qqLink, String weixinLink,
            String coverImage, String headImage, String createTime, Set<Comment> comments, Set<User> follows,
            Set<Comment> agreeComments, Set<Comment> disagreeComments, Set<Reply> agreeReplys,
            Set<Reply> disagreeReplys) {
        super();
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
        this.firstName = firstName;
        this.lastName = lastName;
        this.displayName = displayName;
        this.webUrl = webUrl;
        this.phone = phone;
        this.description = description;
        this.qqLink = qqLink;
        this.weixinLink = weixinLink;
        this.coverImage = coverImage;
        this.headImage = headImage;
        this.createTime = createTime;
        this.comments = comments;
        this.follows = follows;
        this.agreeComments = agreeComments;
        this.disagreeComments = disagreeComments;
        this.agreeReplys = agreeReplys;
        this.disagreeReplys = disagreeReplys;
    }


    public Set<Reply> getAgreeReplys() {
        return agreeReplys;
    }


    public void setAgreeReplys(Set<Reply> agreeReplys) {
        this.agreeReplys = agreeReplys;
    }


    public Set<Reply> getDisagreeReplys() {
        return disagreeReplys;
    }


    public void setDisagreeReplys(Set<Reply> disagreeReplys) {
        this.disagreeReplys = disagreeReplys;
    }


    public Set<Comment> getComments() {
        return comments;
    }



    public void setComments(Set<Comment> comments) {
        this.comments = comments;
    }

    public Set<Comment> getAgreeComments() {
        return agreeComments;
    }

    public void setAgreeComments(Set<Comment> agreeComments) {
        this.agreeComments = agreeComments;
    }

    public Set<Comment> getDisagreeComments() {
        return disagreeComments;
    }

    public void setDisagreeComments(Set<Comment> disagreeComments) {
        this.disagreeComments = disagreeComments;
    }

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getFirstName() {
        return firstName;
    }
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getWebUrl() {
        return webUrl;
    }
    public void setWebUrl(String webUrl) {
        this.webUrl = webUrl;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public String getQqLink() {
        return qqLink;
    }
    public void setQqLink(String qqLink) {
        this.qqLink = qqLink;
    }
    public String getWeixinLink() {
        return weixinLink;
    }
    public void setWeixinLink(String weixinLink) {
        this.weixinLink = weixinLink;
    }
    public String getCoverImage() {
        return coverImage;
    }
    public void setCoverImage(String coverImage) {
        this.coverImage = coverImage;
    }
    public String getHeadImage() {
        return headImage;
    }
    public void setHeadImage(String headImage) {
        this.headImage = headImage;
    }
    public String getCreateTime() {
        return createTime;
    }
    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }

    public Set<User> getFollows() {
        return follows;
    }

    public void setFollows(Set<User> follows) {
        this.follows = follows;
    }

    public String getDisplayName() {
        return displayName;
    }

    public void setDisplayName(String displayName) {
        this.displayName = displayName;
    }

}
User.java

 

package com.Gary.betobe.domain;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToMany;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.OneToOne;

@Entity
public class Comment {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    //评论时间
    private String commentTime;
    //评论内容
    private String commentContent;
    
    //这条评论的所有回复
    @OneToMany(targetEntity = Reply.class)
    @JoinColumn(name="comment_id")
    private Set<Reply> replys = new HashSet<Reply>(); 
    
    //这条评论是评论谁的
    @OneToOne
    @JoinColumn(name = "comment_user_id")
    private User commentUser;
    
    //这条评论是谁发的
    @ManyToOne(targetEntity = User.class)
    @JoinColumn(name="user_id")
    private User user;

    //同意
    @ManyToMany(mappedBy = "agreeComments")
    private Set<User> agreeUsers = new HashSet<User>();
    
    //不同意
    @ManyToMany(mappedBy = "disagreeComments")
    private Set<User> disagreeUsers = new HashSet<User>();
    
    
    
    public Set<User> getAgreeUsers() {
        return agreeUsers;
    }

    public void setAgreeUsers(Set<User> agreeUsers) {
        this.agreeUsers = agreeUsers;
    }

    public Set<User> getDisagreeUsers() {
        return disagreeUsers;
    }

    public void setDisagreeUsers(Set<User> disagreeUsers) {
        this.disagreeUsers = disagreeUsers;
    }

    //JPA标准
    protected Comment()
    {
        
    }
    

    
    public Comment(Long id, String commentTime, String commentContent, Set<Reply> replys, User commentUser, User user,
            Set<User> agreeUsers, Set<User> disagreeUsers) {
        super();
        this.id = id;
        this.commentTime = commentTime;
        this.commentContent = commentContent;
        this.replys = replys;
        this.commentUser = commentUser;
        this.user = user;
        this.agreeUsers = agreeUsers;
        this.disagreeUsers = disagreeUsers;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getCommentTime() {
        return commentTime;
    }

    public void setCommentTime(String commentTime) {
        this.commentTime = commentTime;
    }

    public String getCommentContent() {
        return commentContent;
    }

    public void setCommentContent(String commentContent) {
        this.commentContent = commentContent;
    }

    public Set<Reply> getReplys() {
        return replys;
    }

    public void setReplys(Set<Reply> replys) {
        this.replys = replys;
    }

    public User getCommentUser() {
        return commentUser;
    }

    public void setCommentUser(User commentUser) {
        this.commentUser = commentUser;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }
    
    
    
}
Comment.java

 

package com.Gary.betobe.domain;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.JoinTable;
import javax.persistence.ManyToMany;
import javax.persistence.ManyToOne;

//回复,回复的是谁(评论还是回复)
@Entity
public class Reply {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    //回复内容
    private String replyContent;
    
    //回复时间
    private String replyTime;
    
    //谁发的回复
    @ManyToOne(targetEntity = User.class)
    @JoinColumn(name = "user_id")
    private User user;
    
    //这条回复是回复哪一个评论的
    @ManyToOne(targetEntity = Comment.class)
    @JoinColumn(name="comment_id")
    private Comment comment;
    
    //这条回复是回复哪一个回复的
    @ManyToOne(targetEntity = Reply.class)
    @JoinColumn(name="reply_id")
    private Reply reply;
    
    //有哪些回复是回复本条回复的
    @ManyToMany
    @JoinTable(
            name="reply_reply",
            joinColumns=@JoinColumn(name="reply_id"),
            inverseJoinColumns =@JoinColumn(name="reply_reply_id")
            )
    private Set<Reply> replys = new HashSet<Reply>();
    
    @ManyToMany(mappedBy = "disagreeReplys")
    private Set<User> disagreeUsers = new HashSet<User>();
    
    @ManyToMany(mappedBy = "agreeReplys")
    private Set<User> agreeUsers = new HashSet<User>();

    //JPA标准
    protected Reply()
    {
        
    }
    
    public Reply(Long id, String replyContent, String replyTime, User user, Comment comment, Reply reply,
            Set<Reply> replys, Set<User> disagreeUsers, Set<User> agreeUsers) {
        super();
        this.id = id;
        this.replyContent = replyContent;
        this.replyTime = replyTime;
        this.user = user;
        this.comment = comment;
        this.reply = reply;
        this.replys = replys;
        this.disagreeUsers = disagreeUsers;
        this.agreeUsers = agreeUsers;
    }

    public String getReplyContent() {
        return replyContent;
    }

    public void setReplyContent(String replyContent) {
        this.replyContent = replyContent;
    }

    public String getReplyTime() {
        return replyTime;
    }

    public void setReplyTime(String replyTime) {
        this.replyTime = replyTime;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public Comment getComment() {
        return comment;
    }

    public void setComment(Comment comment) {
        this.comment = comment;
    }

    public Reply getReply() {
        return reply;
    }

    public void setReply(Reply reply) {
        this.reply = reply;
    }

    public Set<Reply> getReplys() {
        return replys;
    }

    public void setReplys(Set<Reply> replys) {
        this.replys = replys;
    }

    public Set<User> getDisagreeUsers() {
        return disagreeUsers;
    }

    public void setDisagreeUsers(Set<User> disagreeUsers) {
        this.disagreeUsers = disagreeUsers;
    }

    public Set<User> getAgreeUsers() {
        return agreeUsers;
    }

    public void setAgreeUsers(Set<User> agreeUsers) {
        this.agreeUsers = agreeUsers;
    }
    
    
    
}
Reply.java

 

  此时数据库中出现了很多表

  

 

  agree_user_comment表:用户同意了哪些评论

  agree_user_reply表:用户同意了哪些回复

  disagree_user_comment表:用户不同意哪些评论

  disagree_user_reply表:用户不同意哪些回复

  comment表:评论表

  reply表:回复表

  persistent_logins:记住我功能表

  reply_reply表:回复回复表

 

 

用户评论

  profile-comments中设置回复表单样式

  

  <div style="font-size:12px">
    <span style="font-size:12px;color:#444444;font-weight:bold;" class="name">
      Reply:
       <a>Gary</a>
    </span>
    <span style="color:#aaaaaa">Said:</span>
  </div>
                                            
  <form method="post">
    <textarea style="max-width:631px; min-width:631px;" name="commentText" placeholder="Add a comment here.."></textarea>
    <input type="submit" name="submit" value="send">
  </form>

 

  完成评论后端代码接收,当用户编写完form表单后,发送@{~/saveComment}请求

  <form method="post" th:action="@{~/saveComment}">
    <textarea style="max-width:631px; min-width:631px;" name="commentContent" placeholder="Add a comment here.."></textarea>
    <input style="display:none;" type="text" name="userId" th:value="${user.id}">
    <input type="submit" name="submit" value="send">
  </form>

 

  CommentController.java接收saveComment请求

@RequestMapping("/saveComment")
    public String saveComment(Comment comment,String userId)
    {
        //封装commentTime
        Date date = new Date(System.currentTimeMillis());
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        String commentTime = format.format(date);
        //评论的创建时间
        comment.setCommentTime(commentTime);
        
        //评论哪一个User的
        User commentUser = userService.findUserById(userId);
        comment.setCommentUser(commentUser);
        
        //哪一个User发表的评论(登陆的人发表的评论)
        User user = (User) session.getAttribute("user");
        comment.setUser(user);
        
        //保存comment
        commentService.saveComment(comment);
        
        return "redirect:/findUserCommentsById?id=";
    }

 

 

  在前端进行数据的回显,讲评论信息存放到commentList中

  //用户评论ID
    @RequestMapping("/findUserCommentsById")
    public String findUserCommentsById(String id,Model model)
    {
        User user = userService.findUserById(id);
        //查找所有评论用户为id的评论
        List<Comment> commentList = commentService.findCommentListByCommentUserId(id);
        
        
        //当前查看用户的所有评论
        model.addAttribute("commentList",commentList);
        
        Integer followersNum = userService.findFollowersNumById(id);
        model.addAttribute("followersNum",followersNum);
        model.addAttribute("user",user);
        model.addAttribute("page","Comments");
        return "profile-comments.html";
    }

 

  在CommentRepository.java中根据用户ID查询回复内容

public interface CommentRepository extends CrudRepository<Comment,Long>{
    @Query(value = "select * from comment where comment_user_id = ?1",nativeQuery = true)
    List<Comment> findCommentListByCommentUserId(String id);
}

 

  在profile-comment中显示用户的评论

  <div th:each="comment:${commentList}" class="media-object stack-for-small">
    <div class="media-object-section comment-img text-center">
       <div class="comment-box-img">
        <img th:src= "|upload/${comment.user.headImage}|" alt="comment">
      </div>
    </div>
  <div class="media-object-section comment-desc">
  <div class="comment-title">
    <span class="name"><a th:href="'/findUserAboutMeById?id='+${comment.user.id}" th:text="${comment.user.displayName}">Joseph John</a> Said:</span>
    <span class="time float-right"><i class="fa fa-clock-o"></i>1 minute ago</span>
  </div>
  <div class="comment-text">
    <p th:text="${comment.commentContent}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</p>
   </div>
  <div class="comment-btns">
    <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span>
    <span><a href="#"><i class="fa fa-share"></i>Reply</a></span>
     <span class='reply float-right hide-reply'></span>
  </div>

  </div>
  </div>

 

 

 

 回复模块

  回复模块的分析

 

 

  传递评论要传递数据,传递给/findUserCommentsById请求用户id

  这条回复是回复谁(评论?回复?)的?

  这条回复到底是回复那条(评论,回复)的?id?

<div class="comment-btns">
    <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span>
    <span><a th:href="|/findUserCommentsById?id=${user.id}&replyCOrR=comment&replyCOrRId=${comment.id}|"><i class="fa fa-share"></i>Reply</a></span>
     <span class='reply float-right hide-reply'></span>
</div>

 

   CommentController.java处理/findUserCommentsById请求

//用户评论ID
    //replyCOrR表示回复的是评论还是回复(类型)
    //replyCOrRId表示回复的评论或者回复的id(具体到哪一条)
    @RequestMapping("/findUserCommentsById")
    public String findUserCommentsById(String id,Model model,String replyCOrR,String replyCOrRId)
    {
        User user = userService.findUserById(id);
        //查找所有评论用户为id的评论
        List<Comment> commentList = commentService.findCommentListByCommentUserId(id);
        
        //如果replyCOrR为空,默认给它的是评论
        if(replyCOrR == null)
        {
            //replyCOrR = "comment";
            //争对本身,到底要发布的是评论,还是回复
            model.addAttribute("commentReply","comment");
        }
        if(replyCOrRId != null)
        {
            model.addAttribute("commentReply","reply");
        }
        
        model.addAttribute("replyCOrR",replyCOrR);
        model.addAttribute("replyCOrRId",replyCOrRId);
        
        //当前查看用户的所有评论
        model.addAttribute("commentList",commentList);
        
        Integer followersNum = userService.findFollowersNumById(id);
        model.addAttribute("followersNum",followersNum);
        model.addAttribute("user",user);
        model.addAttribute("page","Comments");
        return "profile-comments.html";
    }

 

  <div th:if="${commentReply} eq 'comment'" class="media-object-section comment-textarea">
    <div style="font-size: 12px">
      <span style="font-size: 12px; color: #444444; font-weight: bold;" class="name">
      Comment:
        <a>Gary</a>
      </span>
      <span style="color: #aaaaaa"> Said: </span>
    </div>
    <form method="post" th:action="@{~/saveComment}">
    <textarea style="max-width: 631px; min-width: 631px" name="commentContent" placeholder="Add a comment here.."></textarea>
      <input style="display: none;" type="text" name="userId" th:value="${user.id}">
      <input type="submit" name="submit" value="send">
    </form>
  </div>
  <div th:if="${commentReply} eq 'reply'" class="media-object-section comment-textarea">
    <div style="font-size: 12px">
      <span style="font-size: 12px; color: #444444; font-weight: bold;" class="name">
          Reply:
        <a>Gary</a>
      </span>
      <span style="color: #aaaaaa"> Said: </span>
    </div>
  <form method="post" th:action="@{~/saveReply}">
    <textarea style="max-width: 631px; min-width: 631px" name="replyContent" placeholder="Add a comment here.."></textarea>
    <input style="display: none;" type="text" name="userId" th:value="${user.id}">
    <input style="display: none;" type="text" name="replyCOrR" th:value="${replyCOrR}">
    <input style="display: none;" type="text" name="replyCOrRId" th:value="${replyCOrRId}">
    <input type="submit" name="submit" value="send">
  </form>
  </div>

 

  当点击用户模块的Comment,默认显示用户发表评论,当点击评论下的reply,跳转到用户回复评论

 

  完成一些细节的显示:头像的显示、回复名称的显示、登陆人姓名的显示

<div class="media-object-section comment-img text-center">
  <div class="comment-box-img">
    <img th:src= "|upload/${session.user.headImage}|" alt="comment">
  </div>
  <h6><a th:href="'/findUserAboutMeById?id='+${session.user.id}" th:text="${session.user.displayName}">Joseph John</a></h6>
</div>

 

   发布评论或者回复的人后端数据传输,完成某个用户无论是comment或者是reply,获取到发布人的信息

  //用户评论ID
    //replyCOrR表示回复的是评论还是回复(类型)
    //replyCOrRId表示回复的评论或者回复的id(具体到哪一条)
    @RequestMapping("/findUserCommentsById")
    public String findUserCommentsById(String id,Model model,String replyCOrR,String replyCOrRId)
    {
        User user = userService.findUserById(id);
        //查找所有评论用户为id的评论
        List<Comment> commentList = commentService.findCommentListByCommentUserId(id);
        //回复的是哪一条回复,回复的是哪一条评论  (可能是回复,可能是评论)  只能用Object
        Object replyCOrRObject = null ;
        //如果replyCOrR为空,默认给它的是评论
        if(replyCOrR == null)
        {
            //replyCOrR = "comment";
            //争对本身,到底要发布的是评论,还是回复
            model.addAttribute("commentReply","comment");
        }
        if(replyCOrRId != null)
        {
            //回复的到底是哪一条回复,回复的到底是哪一条评论
            //并将回复或者评论放置到model中,在前端进行显示,无论是comment或者reply,都有一个发布人,就可以获取到这个发布人的信息
            if(replyCOrR.equals("comment"))
            {
                replyCOrRObject = commentService.findCommentById(replyCOrRId);
                
                model.addAttribute("replyCOrRObject",(Comment)replyCOrRObject);
            }
            else if(replyCOrR.equals("reply"))
            {
                replyCOrRObject = replyService.findReplyById(replyCOrRId);
                
                model.addAttribute("replyCOrRObject",(Reply)replyCOrRObject);
            }
            //表示发布的是一条回复
            model.addAttribute("comentReply","reply");
        }
        
        model.addAttribute("replyCOrR",replyCOrR);
        model.addAttribute("replyCOrRId",replyCOrRId);
        
        //当前查看用户的所有评论
        model.addAttribute("commentList",commentList);
        
        Integer followersNum = userService.findFollowersNumById(id);
        model.addAttribute("followersNum",followersNum);
        model.addAttribute("user",user);
        model.addAttribute("page","Comments");
        return "profile-comments.html";
    }

 

   发布评论或者回复的人前端数据显示

<div th:if="${commentReply} eq 'comment'" class="media-object-section comment-textarea">
  <div style="font-size: 12px">
    <span style="font-size: 12px; color: #444444; font-weight: bold;" class="name">
      Comment:
    <a th:if="${replyCOrRObject} ne null" th:text="${replyCOrRObject.user.displayName}">Gary</a>
    <a th:if="${replyCOrRObject} eq null" th:text="${user.displayName}">Gary</a>
    </span>
    <span style="color: #aaaaaa"> Said: </span>
  </div>
  <form method="post" th:action="@{~/saveComment}">
    <textarea style="max-width: 631px; min-width: 631px" name="commentContent" placeholder="Add a comment here.."></textarea>
    <input style="display: none;" type="text" name="userId" th:value="${user.id}">
    <input type="submit" name="submit" value="send">
  </form>
  </div>
  <div th:if="${commentReply} eq 'reply'" class="media-object-section comment-textarea">
    <div style="font-size: 12px">
       <span style="font-size: 12px; color: #444444; font-weight: bold;" class="name">
        Reply:
        <a>Gary</a>
        <a th:if="${replyCOrRObject} ne null" th:text="${replyCOrRObject.user.displayName}">Gary</a>
        <a th:if="${replyCOrRObject} eq null" th:text="${ruser.displayName}">Gary</a>
      </span>  
    <span style="color: #aaaaaa"> Said: </span>
    </div>
  <form method="post" th:action="@{~/saveReply}">
    <textarea style="max-width: 631px; min-width: 631px" name="replyContent" placeholder="Add a comment here.."></textarea>
    <input style="display: none;" type="text" name="userId" th:value="${user.id}">
    <input style="display: none;" type="text" name="replyCOrR" th:value="${replyCOrR}">
    <input style="display: none;" type="text" name="replyCOrRId" th:value="${replyCOrRId}">
    <input type="submit" name="submit" value="send">
  </form>
</div>

 

 

  封装字段

    回复时间

    回复人

    回复的哪个评论

    回复的哪个回复

    回复内容

@RequestMapping("/saveReply")
    public String saveReply(Reply reply,String userId,String replyCOrR,String replyCOrRId)
    {
        //回复时间
        Date date = new Date(System.currentTimeMillis());
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        String replyTime = format.format(date);
        reply.setReplyTime(replyTime);
        //回复人
        User user = (User) session.getAttribute("user");
        reply.setUser(user);
        
        if(replyCOrR.equals("comment"))
        {
            Comment comment = commentService.findCommentById(replyCOrRId);
            //回复的哪个评论
            reply.setComment(comment);
        }
        
        if(replyCOrR.equals("reply")) 
        {
            Reply temp = replyService.findReplyById(replyCOrRId);
            Reply saveReply = replyService.saveReply(reply);
            //获得temp的所有回复,在temp的所有回复中添加我们刚刚保存的回复
            temp.getReplys().add(saveReply);
            reply.setReply(temp);
            
            replyService.saveReply(temp);
        }
            
        //回复的哪个回复
        //reply.setReply(reply);
        //回复内容
        //reply.setReplyContent(replyContent);
        //有哪些回复是回复本条回复的
        //reply.setReplys(replys);
        replyService.saveReply(reply);
        
        return "redirect:/findUserCommentsById?id="+userId;
    }

 

 

   此时数据库中回复表有两个字段

   

 

 

   评论的回复前端显示

                                    <!-- 代码 一条评论 -->
                                    <div th:each="comment:${commentList}" class="media-object stack-for-small">
                                        <div class="media-object-section comment-img text-center">
                                            <div class="comment-box-img">
                                                <img th:src="|upload/${comment.user.headImage}|" alt="comment">
                                            </div>
                                        </div>
                                        <div class="media-object-section comment-desc">
                                            <div class="comment-title">
                                                <span class="name"><a th:href="'/findUserAboutMeById?id='+${comment.user.id}" th:text="${comment.user.displayName}">Joseph John</a> Said:</span> <span class="time float-right"><i class="fa fa-clock-o"></i>1 minute ago</span>
                                            </div>
                                            <div class="comment-text">
                                                <p th:text="${comment.commentContent}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</p>
                                            </div>
                                            <div class="comment-btns">
                                                <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span> <span><a th:href="|/findUserCommentsById?id=${user.id}&replyCOrR=comment&replyCOrRId=${comment.id}|"></i>Reply</a></span> <span class='reply float-right hide-reply'></span>
                                            </div>

                                            <!-- Gary回复 -->
                                            <div th:each="reply:${comment.replys}" class="media-object stack-for-small reply-comment">
                                                <div class="media-object-section comment-img text-center">
                                                    <div class="comment-box-img">
                                                        <img th:src="|upload/${reply.user.headImage}|" alt="comment">
                                                    </div>
                                                </div>
                                                <div class="media-object-section comment-desc">
                                                    <div class="comment-title">
                                                        <span class="name"><a th:href="'/findUserAboutMeById?id='+${reply.user.id}" th:text="${reply.user.displayName}">frank</a> Said:</span> <span class="time float-right"><i class="fa fa-clock-o"></i>1 minute ago</span>
                                                    </div>
                                                    <div class="comment-text">
                                                        <p th:text="${reply.replyContent}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</p>
                                
                                                    </div>
                                                    <div class="comment-btns">
                                                        <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span>
                                                        
                                                        <span><a th:href="|/findUserCommentsById?id=${user.id}&replyCOrR=reply&replyCOrRId=${reply.id}|"></i>Reply</a></span>
                                                        
                                                        <span class='reply float-right hide-reply'></span>
                                                    </div>

                                                </div>
                                            </div>
                                            <!-- end sub comment -->

                                        </div>
                                    </div>
Gary.html

 

   

 

 

   测试回复Gary2Gary2评论GaryGar3,数据库中reply表和reply_reply表都存在数据

  reply表中显示发布的评论,且id=3

  

 

  reply_reply表中显示id为3的评论了id为2的评论

  

 

<!-- Gary回复 -->
                                            <div th:each="reply:${comment.replys}" >
                                            
                                            <div  class="media-object stack-for-small reply-comment">
                                                <div class="media-object-section comment-img text-center">
                                                    <div class="comment-box-img">
                                                        <img th:src="|upload/${reply.user.headImage}|" alt="comment">
                                                    </div>
                                                </div>
                                                <div class="media-object-section comment-desc">
                                                    <div class="comment-title">
                                                        <span class="name"><a th:href="'/findUserAboutMeById?id='+${reply.user.id}" th:text="${reply.user.displayName}">frank</a> Said:</span> <span class="time float-right"><i class="fa fa-clock-o"></i>1 minute ago</span>
                                                    </div>
                                                    <div class="comment-text">
                                                        <p th:text="${reply.replyContent}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</p>
                                
                                                    </div>
                                                    <div class="comment-btns">
                                                        <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span>
                                                        
                                                        <span><a th:href="|/findUserCommentsById?id=${user.id}&replyCOrR=reply&replyCOrRId=${reply.id}|"></i>Reply</a></span>
                                                        
                                                        <span class='reply float-right hide-reply'></span>
                                                    </div>

                                                </div>
                                            </div>
使用th:each遍历回复模块

 

  前端显示回复的回复模块

<div th:each="replyReply:${reply.replys}" class="media-object stack-for-small reply-comment">
  <div class="media-object-section comment-img text-center">
    <div class="comment-box-img">
      <img th:src="|upload/${replyReply.user.headImage}|" alt="comment">
    </div>
  </div>
  <div class="media-object-section comment-desc">
    <div class="comment-title">
      <span class="name">
      <a th:href="'/findUserAboutMeById?id='+${replyReply.user.id}" th:text="${reply.user.displayName}">frank</a> 
      Said:</span> 
      <span class="time float-right"><i class="fa fa-clock-o"></i>1 minute ago</span>
    </div>
    <div class="comment-text">
    <p th:text="${replyReply.replyContent}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</p>
    <blockquote th:text="${replyReply.reply.replyContent}" style="font-size: 13px; colro: #aaaaaa; border-left: 3px solid #cacaca;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventoresunt explicabo.</blockquote>
    </div>
  <div class="comment-btns">
  <span><a href="#"><i class="fa fa-thumbs-o-up"></i></a> | <a href="#"><i class="fa fa-thumbs-o-down"></i></a></span> <span class='reply float-right hide-reply'></span>
  </div>

  </div>
</div>

 

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

asd

posted @ 2019-12-19 17:31  Cynical丶Gary  阅读(433)  评论(0编辑  收藏  举报