文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论、点赞和收藏等等。

本次的开发任务只是将文章详情页面展示出来,至于一些收藏、点赞、评论以及统计相关的功能后续慢慢加上。

加载出文章的详情页面的核心代码如下:

  1. /**
  2. * 加载出文章详情页面
  3. *
  4. * @param articleId
  5. * @param model
  6. * @param session
  7. * @return
  8. */
  9. @RequestMapping(value = "/p/{articleId}", method = RequestMethod.GET)
  10. public String view(@PathVariable("articleId") String articleId, Model model, HttpSession session) {
  11. // 根据ID获取文章信息
  12. Article article = articleService.getById(articleId);
  13. // 获取用户信息
  14. User user = userService.getById(article.getUserId());
  15. if (!StringUtils.isEmpty(article.getGroupId())) {
  16. // 获取专栏信息
  17. Group group = groupService.getById(article.getGroupId());
  18. article.setGroupName(group.getName());
  19. }
  20. // 获取文章标签信息
  21. List<Tag> tags = tagService.queryByArticleId(articleId);
  22. // 获取该用户更多的文章信息
  23. Wrapper<Article> queryWrapper = new QueryWrapper<Article>().lambda().eq(Article::getUserId, user.getUserId()).eq(Article::getStatus, Article.STATUS_SUCCESS).ne(Article::getArticleId, articleId).orderByDesc(Article::getPublishTime);
  24. List<Article> moreArticles = articleService.queryForLimit(queryWrapper, 6);
  25. // 获取推荐的文章信息
  26. List<Article> likeArticles = null;
  27. if (tags != null && !tags.isEmpty()) {
  28. // 根据标签来获取类似的文章
  29. List<String> tagStrs = new ArrayList<String>();
  30. tags.stream().forEach(tag -> tagStrs.add(tag.getTag()));
  31. Map<String, Object> params = new HashMap<String, Object>();
  32. params.put("status", Article.STATUS_SUCCESS);
  33. params.put("articleId", articleId);
  34. likeArticles = articleService.queryForLimitByTags(params, tagStrs, 10);
  35. } else {
  36. // 获取最新的文章信息
  37. Wrapper<Article> likeWrapper = new QueryWrapper<Article>().lambda().eq(Article::getStatus, Article.STATUS_SUCCESS).ne(Article::getArticleId, articleId).orderByDesc(Article::getPublishTime);
  38. likeArticles = articleService.queryForLimit(queryWrapper, 10);
  39. }
  40. model.addAttribute("article", article);
  41. model.addAttribute("user", user);
  42. model.addAttribute("tags", tags);
  43. model.addAttribute("moreArticles", moreArticles);
  44. model.addAttribute("likeArticles", likeArticles);
  45. return Const.BASE_INDEX_PAGE + "blog/article/view";
  46. }

里面核心逻辑为:

  • 获取文章内容
  • 获取文章的标签
  • 获取该用户的更多文章列表
  • 根据标签查询出相关的文章,作为推荐文章列表

其实里面有一些统计相关的逻辑暂时没有加上,后续会加上。

由于文章是通过editor.md工具完成的,所以前台文章展示也是要借助editor.md来完成,核心代码如下:

  1. <div class="note-cont">
  2. <div id="article-content">
  3. <textarea id="article-content-textarea" style="display:none;">${article.content}</textarea>
  4. </div>
  5. </div>

首先文章内容像上面的代码一样放置于html中,同时当页面加载时需要执行如下的js代码,即:

  1. $(function() {
  2. editormd.markdownToHTML("article-content", {
  3. htmlDecode : "style,script,iframe", // you can filter tags decode
  4. emoji : true,
  5. taskList : true,
  6. tex : true, // 默认不解析
  7. flowChart : true, // 默认不解析
  8. sequenceDiagram : true, // 默认不解析
  9. });
  10. });

页面效果如下:

以你最方便的方式关注我:
微信公众号:

版权声明:本文为atcloud原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/atcloud/p/11491169.html