文章详情包括评论，上面已经实现根据id查询文章详情，现在补充评论功能

一、创建评论的数据访问层接口CommentMapper

在该接口上添加@Mapper，接口内添加如下方法：

    // 分页展示某个文章的评论@Select("SELECT * FROM t_comment WHERE article_id=#{aid} ORDER BY id DESC")public List<Comment> selectCommentWithPage(Integer aid);// 后台查询最新几条评论@Select("SELECT * FROM t_comment ORDER BY id DESC")public List<Comment> selectNewComment();// 发表评论@Insert("INSERT INTO t_comment (article_id,created,author,ip,content)" +" VALUES (#{articleId}, #{created},#{author},#{ip},#{content})")public void pushComment(Comment comment);// 站点服务统计，统计评论数量@Select("SELECT COUNT(1) FROM t_comment")public Integer countComment();// 通过文章id删除评论信息@Delete("DELETE FROM t_comment WHERE article_id=#{aid}")public void deleteCommentWithId(Integer aid);

二、业务处理层实现

1、在IArticleService添加查询文章详情的方法

// 根据文章id查询单个文章详情
public Article selectArticleWithId(Integer id);

2.创建评论业务处理接口ICommentService

//文章评论业务处理接口
public interface ICommentService {// 获取文章下的评论public PageInfo<Comment> getComments(Integer aid, int page, int count);}

3.创建博客站点业务处理接口 ISiteService

//博客站点统计服务
public interface ISiteService {// 最新收到的评论public List<Comment> recentComments(int count);// 最新发表的文章public List<Article> recentArticles(int count);// 获取后台统计数据public StaticticsBo getStatistics();// 更新某个文章的统计数据public void updateStatistics(Article article);}

4.打开ArticleServiceImpl,实现查询文章详情，嵌入Redis缓存管理

先使用@Autowired注入定制的RedisTemplate类（在config包下定制的配置类），

然后在文章查询过程中先从Redis缓存中进行查询，如果为空再进行数据库查询，并将结果进行缓存处理。

其中，此处缓存管理的文章详情数据的key为“article_” + id的形式。

    @Autowiredprivate RedisTemplate redisTemplate;// 根据id查询单个文章详情，并使用Redis进行缓存管理public Article selectArticleWithId(Integer id){Article article = null;Object o = redisTemplate.opsForValue().get("article_" + id);if(o!=null){article=(Article)o;}else{article = articleMapper.selectArticleWithId(id);if(article!=null){redisTemplate.opsForValue().set("article_" + id,article);}}return article;}

5.实现ICommentService和ISiteService接口

@Service
@Transactional
public class CommentServiceImpl implements ICommentService {@Autowiredprivate CommentMapper commentMapper;// 根据文章id分页查询评论@Overridepublic PageInfo<Comment> getComments(Integer aid, int page, int count) {PageHelper.startPage(page,count);List<Comment> commentList = commentMapper.selectCommentWithPage(aid);PageInfo<Comment> commentInfo = new PageInfo<>(commentList);return commentInfo;}
}

@Service
@Transactional
public class SiteServiceImpl implements ISiteService {@Autowiredprivate CommentMapper commentMapper;@Autowiredprivate ArticleMapper articleMapper;@Autowiredprivate StatisticMapper statisticMapper;@Overridepublic void updateStatistics(Article article) {Statistic statistic =statisticMapper.selectStatisticWithArticleId(article.getId());statistic.setHits(statistic.getHits()+1);statisticMapper.updateArticleHitsWithId(statistic);}@Overridepublic List<Comment> recentComments(int limit) {PageHelper.startPage(1, limit>10 || limit<1 ? 10:limit);List<Comment> byPage = commentMapper.selectNewComment();return byPage;}@Overridepublic List<Article> recentArticles(int limit) {PageHelper.startPage(1, limit>10 || limit<1 ? 10:limit);List<Article> list = articleMapper.selectArticleWithPage();// 封装文章统计数据for (int i = 0; i < list.size(); i++) {Article article = list.get(i);Statistic statistic =statisticMapper.selectStatisticWithArticleId(article.getId());article.setHits(statistic.getHits());article.setCommentsNum(statistic.getCommentsNum());}return list;}@Overridepublic StaticticsBo getStatistics() {StaticticsBo staticticsBo = new StaticticsBo();Integer articles = articleMapper.countArticle();Integer comments = commentMapper.countComment();staticticsBo.setArticles(articles);staticticsBo.setComments(comments);return staticticsBo;}
}

三、请求处理层实现

打开用户首页请求处理类IndexController，注入评论服务对象和站点服务对象，并添加文章详情查询方法，用来处理请求路径为“/article/{id}”的请求。

方法实现过程：

先查询出对应的文章信息，然后对文章的评论信息进行查询封装，

同时更新了文章的点击量统计信息。

在完成文章数据的查询后，如果文章不为空，跳转到client文件夹下的articleDetails.html文件；

如果文件为空，跳转到自定义的comm文件夹下的error_404.html错误页面。

    @Autowiredprivate ICommentService commentServiceImpl;@Autowiredprivate ISiteService siteServiceImpl;// 文章详情查询@GetMapping(value = "/article/{id}")public String getArticleById(@PathVariable("id") Integer id, HttpServletRequest request){Article article = articleServiceImpl.selectArticleWithId(id);if(article!=null){// 查询封装评论相关数据getArticleComments(request, article);// 更新文章点击量siteServiceImpl.updateStatistics(article);request.setAttribute("article",article);return "client/articleDetails";}else {logger.warn("查询文章详情结果为空，查询文章id: "+id);// 未找到对应文章页面，跳转到提示页return "comm/error_404";}}// 查询文章的评论信息，并补充到文章详情里面private void getArticleComments(HttpServletRequest request, Article article) {if (article.getAllowComment()) {// cp表示评论页码，commentPageString cp = request.getParameter("cp");cp = StringUtils.isBlank(cp) ? "1" : cp;request.setAttribute("cp", cp);PageInfo<Comment> comments = commentServiceImpl.getComments(article.getId(),Integer.parseInt(cp),3);request.setAttribute("cp", cp);request.setAttribute("comments", comments);}}

四、实现前端页面功能

项目类目录下client目录中的文章详情页面articleDetails.html

通过th:*属性获取并展示了后台查询得到的文章及评论详情数据，同时在页面底部的<script>标签中实现了一个图片缩放功能。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><script th:src="@{/assets/js/jquery.min.js}"></script><script th:src="@{/assets/js/layer.js}"></script>
</head>
<div th:replace="client/header::header(${article.title},null)"></div><body>
<article class="main-content post-page"><div class="post-header"><h1 class="post-title" itemprop="name headline" th:text="${article.title}"></h1><div class="post-data"><time th:datetime="${commons.dateFormat(article.created)}" itemprop="datePublished" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"></time></div></div><br /><div id="post-content" class="post-content content" th:utext="${commons.article(article.content)}"></div>
</article>
<div th:replace="client/comments::comments"></div>
<div th:replace="client/footer::footer"></div><!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">$('.post-content img').on('click', function(){var imgurl=$(this).attr('src');var w=this.width*2;var h=this.height*2+50;layer.open({type: 1,title: false, //不显示标题栏area: [w+"px", h+"px"],shadeClose: true, //点击遮罩关闭content: '\<\div style="padding:20px;">' +'\<\img style="width:'+(w-50)+'px;" src='+imgurl+'\>\<\/div>'});});
</script>
</body>
</html>

五、Redis服务启动与配置

之前的环节中已经引入了自定义的Redis配置类，同时还引入了Redis服务连接需要的配置文件application-redis.properties，最后需要做的就是启动Redis服务即可。

六、效果展示

启动项目，登录并进入项目首页，在项目首页随机选择一篇文章单击文章名查看文章详情，或者选择阅读排行榜中的一篇文章进行详情查看。

通过Redis客户端可视化管理工具查看缓存的文章详情数据

10-3-查看文章详情相关推荐

Python + Django4 搭建个人博客（十）：实现文章详情页面
上篇我们引入了Bootstrap,对博文列表页面进行了一些美化和布局设计. Python + Django4 搭建个人博客(九):Bootstrap实现博客列表页面_李威威wiwi的博客-CSDN博客 ...
在线博客系统——文章详情（redis incr自增实现增加阅读数和评论数）
目录文章详情接口说明编码实现 Controller控制层 Service业务逻辑层前端测试 redis incr自增实现浏览量 Redis配置类 Redis工具类 Dao持久层准备 Mappe ...
Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页...
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
BBS（仿博客园系统）项目03（主页搭建、个人站点搭建（侧边栏分类展示、标签展示、日期归档）、文章详情页相关功能实现）...
摘要: 主页面的搭建(导航条下面的区域) 个人站点侧边栏分类展示侧边栏标签展示侧边栏日期归档文章详情页文章内容文章点赞点踩文章评论一.主页面home.html的搭建(进一步完善) ho ...
文章详情页文章评论功能
文章详情页文章评论功能一.文章评论功能实现流程文章评论包含两种评论,根评论:对文章的评论:子评论:对评论的评论.两者的区别在于是否存在父评论. 实现流程:1.构建样式:2.提交根评论:3.显示根评 ...
Java在线教育项目第三天文章详情前后端成形记
课程内容目录(23/7) 1.分布式主键封装 A.知识点(3) [熟练]Zookeeper与项目的集成 [熟练]分布式并发自增类的使用DistributedAtomicLong [熟悉]统一封装统一管 ...
头条--day03_文章详情前后端成形记
文章详情前后端成形记熟悉Zookeeper的封装集成熟悉分布式自增主键的封装熟悉页面场景行为的收集掌握文章详情页面的需求和实现流程掌握mockMvc接口测试的使用场景和方法 1 分布式主键封 ...
python个人网站开发_python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
php博客详情页怎么做,简书仿站报告（四）：如何制作文章详情页
简书仿站的文章详情页的基本功能跟首页差不多,因此制作的过程我就不再详细讲述.而是换一个角度,通过介绍那些文章详情页会使用到的函数的具体使用方法来更深入的理解制作的过程. 文章详情页的制作方法 1.建s ...

10-3-查看文章详情