牛客网后端项目实战（二十）：添加评论

• 数据层
  • 增加评论数据。
  • 修改帖子的评论数量。
• 业务层
  • 处理添加评论的业务： 先增加评论、再更新帖子的评论数量。
• 表现层
  • 处理添加评论数据的请求。
  • 设置添加评论的表单。

待修改：
1、按理说评论不能为空

添加评论

添加评论的功能也是比较基础的，按照数据层业务层和表现层进行开发，比较特别的就是会用到前面提到的事务管理。

为了效率，在帖子的字段里设计了一个评论数量，那么我们添加评论的时候就要同时更新评论数量。

数据层

在CommentMapper里添加插入评论的方法；在DiscussPostMapper里添加更新帖子评论数量的方法

@Mapper
public interface CommentMapper {
    List<Comment> selectCommentsByEntity(int entityType, int entityId, int offset, int limit);
    int selectCountByEntity(int entityType, int entityId);
}

然后在comment-mapper 和 discusspost-mapper里实现

    <sql id="insertFields">
        user_id,entity_type,entity_id,target_id,content,status,create_time
    </sql>
    <insert id="insertComment" parameterType="Comment">
        insert into comment(<include refid="insertFields"></include>)
        values (#{userId},#{entityType},#{entityId},#{targetId},#{content},#{status},#{createTime})
    </insert>

    <update id="updateCommentCount" >
        update discuss_post set comment_count = #{commentCount} where id = #{id}
    </update>

业务层

实现更新帖子评论数量的方法，比较简单

    public int updateCommentCount(int id,int commentCount){
        return discussPostMapper.updateCommentCount(id,commentCount);
    }

添加评论的方法，这里使用注解进行事务管理，过滤掉评论里的html元素和敏感词，评论数量只统计评论帖子的数量，回复评论的不统计。

@Transactional(isolation = Isolation.READ_COMMITTED,propagation = Propagation.REQUIRED)
    public int addComment(Comment comment){
        if(comment==null){
            throw new IllegalArgumentException("参数不能为空！");
        }

        //添加评论
        comment.setContent(HtmlUtils.htmlEscape(comment.getContent()));
        comment.setContent(sensitiveFilter.filter(comment.getContent()));
        int rows = commentMapper.insertComment(comment);
        //更新帖子评论数量
        if (comment.getEntityType()==ENTITY_TYPE_POST){
            int count=commentMapper.selectCountByEntity(comment.getEntityType(),comment.getEntityId());
            discussPostService.updateCommentCount(comment.getEntityId(),count);
        }
        return rows;

    }

表现层

新建一个CommentController，从地址里获取当前帖子的id，方便评论完重定向，前端传来的评论需要完善数据。

@Controller
@RequestMapping("/comment")
public class CommentController {

    @Autowired
    private CommentService commentService;
    @Autowired
    private HostHolder hostHolder;

    @RequestMapping(path = "/add/{discussPostId}",method = RequestMethod.POST)
    public String addComment(@PathVariable("discussPostId") int discussPostId, Comment comment){
        comment.setUserId(hostHolder.getUser().getId());
        comment.setStatus(0);
        comment.setCreateTime(new Date());
        commentService.addComment(comment); // 在表中增加评论
        return "redirect:/discuss/detail/"+discussPostId;  //重定向到显示评论的路径
    }
}

前端

回复帖子

			<!-- 回帖输入 -->
			<div class="container mt-3">
				<form class="replyform" method="post" th:action="@{|/comment/add/${post.id}|}">
					<p class="mt-3">
						<a name="replyform"></a>
						<textarea placeholder="在这里畅所欲言你的看法吧!" name="content"></textarea>
						<input type="hidden" name="entityType" value="1">
						<input type="hidden" name="entityId" th:value="${post.id}">
					</p>
					<p class="text-right">
						<button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
					</p>
				</form>
			</div>

回复评论

								<!-- 回复输入框 -->
								<li class="pb-3 pt-3">
									<form method="post" th:action="@{|/comment/add/${post.id}|}">
										<div>
											<input type="text" class="input-size" name="content" placeholder="请输入你的观点"/>
											<input type="hidden" name="entityType" value="2">
											<input type="hidden" name="entityId" th:value="${cvo.comment.id}">
										</div>
										<div class="text-right mt-2">
											<button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
										</div>
									</form>
								</li>

回复某个 回复

								<li class="pb-3 pt-3 mb-3 border-bottom" th:each="rvo:${cvo.replys}">
									<div>
										<span th:if="${rvo.target==null}">
											<b class="text-info" th:text="${rvo.user.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
										<span th:if="${rvo.target!=null}">
											<i class="text-info" th:text="${rvo.user.username}">Sissi</i> 回复
											<b class="text-info" th:text="${rvo.target.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
										<span th:utext="${rvo.reply.content}">这个是直播时间哈，觉得晚的话可以直接看之前的完整录播的~</span>
									</div>
									<div class="mt-3">
										<span th:text="${#dates.format(rvo.reply.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</span>
										<ul class="d-inline float-right">
											<li class="d-inline ml-2"><a href="#" class="text-primary">赞(1)</a></li>
											<li class="d-inline ml-2">|</li>
											<li class="d-inline ml-2"><a th:href="|#huifu-${rvoStat.count}|" data-toggle="collapse" class="text-primary">回复</a></li>
										</ul>
										//修改这里
										<div th:id="|huifu-${rvoStat.count}|" class="mt-4 collapse"> 
											<form method="post" th:action="@{|/comment/add/${post.id}|}">
												<div>
													<input type="text" class="input-size" name="content" th:placeholder="|回复${rvo.user.username}|"/>
													<input type="hidden" name="entityType" value="2">
													<input type="hidden" name="entityId" th:value="${cvo.comment.id}">
													<input type="hidden" name="targetId" th:value="${rvo.user.id}">
												</div>
												<div class="text-right mt-2">
													<button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
												</div>
											</form>
										</div>
									</div>								
								</li>