仿牛客社区——3.20显示评论

实现功能

当点进帖子主页面时,可以看见帖子的评论信息

comment实体类



import java.util.Date;

public class Comment {
	private int id;
	private int userId;
	private int entityType;
	private int entityId;
	private int targetId;
	private String content;
	private int status;
	private Date createTime;

	public Comment() {
	}

	public Comment(int id, int userId, int entityType, int entityId, int targetId, String content, int status, Date createTime) {
		this.id = id;
		this.userId = userId;
		this.entityType = entityType;
		this.entityId = entityId;
		this.targetId = targetId;
		this.content = content;
		this.status = status;
		this.createTime = createTime;
	}

	public int getId() {
		return id;
	}

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

	public int getUserId() {
		return userId;
	}

	public void setUserId(int userId) {
		this.userId = userId;
	}

	public int getEntityType() {
		return entityType;
	}

	public void setEntityType(int entityType) {
		this.entityType = entityType;
	}

	public int getEntityId() {
		return entityId;
	}

	public void setEntityId(int entityId) {
		this.entityId = entityId;
	}

	public int getTargetId() {
		return targetId;
	}

	public void setTargetId(int targetId) {
		this.targetId = targetId;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public int getStatus() {
		return status;
	}

	public void setStatus(int status) {
		this.status = status;
	}

	public Date getCreateTime() {
		return createTime;
	}

	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}

	@Override
	public String toString() {
		return "Comment{" +
				"id=" + id +
				", userId=" + userId +
				", entityType=" + entityType +
				", entityId=" + entityId +
				", targetId=" + targetId +
				", content='" + content + '\'' +
				", status=" + status +
				", createTime=" + createTime +
				'}';
	}
}

controller

@RequestMapping(value = "/detail/{id}" ,method = RequestMethod.GET)
	public String findDiscussPosts(@PathVariable int id, Model model, Page page){
		//帖子
		DiscussPost post = discussPostService.findDiscussPostById(id);
		model.addAttribute("post",post);
		//发帖作者(帖子内还要显示作者相关信息:后续可以通过redis数据库进行访问
		User user = userService.findUserById(post.getUserId());
		model.addAttribute("user",user);
		//评论分页信息
		page.setLimit(5); //一页显示五条评论
		page.setPath("/discuss/detail/"+id);//设置分页查询路径
		page.setRows(post.getCommentCount());//一共有多少条帖子
		// 评论: 给帖子的评论
		// 回复: 给评论的评论
		// 评论列表
		List<Comment> commentList = commentService.findCommentByEntity(
				ENTITY_TYPE_POST, post.getId(), page.getOffset(), page.getLimit());
		//评论VO列表
		List<Map<String,Object>> commentVOList=new ArrayList<>();
		if(commentList != null){

			for(Comment comment : commentList){

				Map<String,Object> commentVO=new HashMap<>();
				//评论
				commentVO.put("comment",comment);//加入评论信息
				//将评论的作者也加入map中
				commentVO.put("user",userService.findUserById(comment.getUserId()));
				//回复
				List<Comment> replyList = commentService.findCommentByEntity(
						ENTITY_TYPE_COMMENT, comment.getId(),0, Integer.MAX_VALUE);
				//回复VO列表
				List<Map<String,Object>> replyVOList=new ArrayList<>();
				if(replyList!=null){
					for(Comment reply:replyList){

						Map<String,Object> replyVO=new HashMap<>();
						//加入回复信息
						replyVO.put("reply",reply);
						//加入回复作者
						replyVO.put("user",userService.findUserById(reply.getUserId()));
						//回复目标:给谁回复
						User target = reply.getTargetId() == 0 ? null : userService.findUserById(reply.getTargetId());
						replyVO.put("target",target);

						replyVOList.add(replyVO);

					}

				}
				commentVO.put("replys",replyVOList);
				//回复数量
				int replyCount = commentService.findCountByEntity(ENTITY_TYPE_COMMENT, comment.getId());
				commentVO.put("replyCount",replyCount);
				commentVOList.add(commentVO);

			}

		}

		model.addAttribute("comments",commentVOList);
		return "/site/discuss-detail";
	}

service

@Service
public class CommentService {
	@Autowired
	private CommentMapper commentMapper;

	public List<Comment> findCommentByEntity(int entityType,int entityId,int offset, int limit){
		return commentMapper.selectCommentByEntity(entityType,entityId,offset,limit);
	}

	public int findCountByEntity(int entityType,int entityId){
		return commentMapper.selectCountByEntity(entityType,entityId);
	}
}

dao

import org.apache.ibatis.annotations.Mapper;

import java.util.List;



@Mapper
public interface CommentMapper {

	/**
	 *  通过Entity查询帖子评论
	 * @param entityType 评论类型:是对帖子的评论,对评论的评论
	 * @param entityId 评论id:是给哪个帖子的评论
	 * @param offset 分页显示,从第几页开始
	 * @param limit 显示多少条
	 * @return 返回查询的帖子列表
	 */
	List<Comment> selectCommentByEntity(int entityType,int entityId,int offset, int limit);

	//查询帖子总评论数
	int selectCountByEntity(int entityType,int entityId);
}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.light.community.dao.CommentMapper"><!--填写comment-mapper的全限定类名-->

    <!--提取查询字段-->
    <sql id="selectFields">
        id,user_id,entity_type,entity_id,target_id,content,status,create_time
    </sql>

    <!-- List<Comment> selectCommentByEntity(int entityType,int entityId,int offset, int limit); -->
    <select id="selectCommentByEntity" resultType="Comment">
        select <include refid="selectFields"></include>
        from comment
        where status=0
        and entity_type=#{entityType}
        and entity_id=#{entityId}
        order by create_time asc
        limit #{offset},#{limit}
    </select>

    <!-- int selectCountByEntity(int entityType,int entityId); -->
    <select id="selectCountByEntity" resultType="int">
        select count(id)
        from comment
        where status=0
        and entity_type=#{entityType}
        and entity_id=#{entityId}
    </select>
</mapper>

html

			<!-- 回帖 -->
			<div class="container mt-3">
				<!-- 回帖数量 -->
				<div class="row">
					<div class="col-8">
						<h6><b class="square"></b> <i th:text="${post.commentCount}">30</i>条回帖</h6>
					</div>
					<div class="col-4 text-right">
						<a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
					</div>
				</div>
				<!-- 回帖列表 -->
				<ul class="list-unstyled mt-4" >
					<!-- 第1条回帖 -->
					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="cvo:${comments}">
						<a href="profile.html">
							<img th:src="${cvo.user.headerUrl}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
						</a>
						<div class="media-body">
							<div class="mt-0">
								<span class="font-size-12 text-success" th:utext="${cvo.user.userName}">掉脑袋切切</span>
								<span class="badge badge-secondary float-right floor">
									<i th:text="${page.offset+cvoStat.count}">1</i>#
								</span>
							</div>
							<div class="mt-2" th:utext="${cvo.comment.content}">
								这开课时间是不是有点晚啊。。。
							</div>
							<div class="mt-4 text-muted font-size-12">
								<span>发布于 <b th:text="${#dates.format(cvo.comment.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b></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 href="#" class="text-primary">回复(<i th:text="${cvo.replyCount}">2</i>)</a></li>
								</ul>
							</div>
							<!-- 回复列表 -->
							<ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">

								<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">
											<div>
												<input type="text" class="input-size" placeholder="回复寒江雪"/>
											</div>
											<div class="text-right mt-2">
												<button type="button" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
											</div>										
										</div>
									</div>								
								</li>

								<!-- 回复输入框 -->
								<li class="pb-3 pt-3">
									<div>
										<input type="text" class="input-size" placeholder="请输入你的观点"/>
									</div>
									<div class="text-right mt-2">
										<button type="button" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
									</div>
								</li>
							</ul>
						</div>
					</li>
				</ul>
				<!-- 分页 -->
				<nav class="mt-5" th:replace="index::pagination">
					<ul class="pagination justify-content-center">
						<li class="page-item"><a class="page-link" href="#">首页</a></li>
						<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
						<li class="page-item active"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
						<li class="page-item"><a class="page-link" href="#">3</a></li>
						<li class="page-item"><a class="page-link" href="#">4</a></li>
						<li class="page-item"><a class="page-link" href="#">5</a></li>
						<li class="page-item"><a class="page-link" href="#">下一页</a></li>
						<li class="page-item"><a class="page-link" href="#">末页</a></li>
					</ul>
				</nav>			
			</div>
			<!-- 回帖输入 -->
			<div class="container mt-3">
				<form class="replyform">
					<p class="mt-3">
						<a name="replyform"></a>
						<textarea placeholder="在这里畅所欲言你的看法吧!"></textarea>
					</p>
					<p class="text-right">
						<button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
					</p>
				</form>
			</div>
		</div>

此处显示评论的分页信息复用的是index.html分页代码

index.html分页

	<!-- 分页 -->
				<nav class="mt-5" th:if="${page.rows>0}"  th:fragment="pagination">
					<ul class="pagination justify-content-center">
						<li class="page-item">
									<!--/index?current=1&limit=5-->
							<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
						</li>
						<li th:class="|page-item ${page.current==1? 'disabled': ''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>
						</li>
						<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
							<a class="page-link" href="#" th:text="${i}">1</a>
						</li>
						<li th:class="|page-item ${page.current==page.total ? 'disabled':''}|">
							<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
						</li>
						<li class="page-item">
							<a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
						</li>
					</ul>
				</nav>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值