文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论、点赞和收藏等等。
本次的开发任务只是将文章详情页面展示出来,至于一些收藏、点赞、评论以及统计相关的功能后续慢慢加上。
1、后台核心代码加载出文章的详情页面的核心代码如下:
/** * 加载出文章详情页面 * * @param articleId * @param model * @param session * @return */ @RequestMapping(value = "/p/{articleId}", method = RequestMethod.GET) public String view(@PathVariable("articleId") String articleId, Model model, HttpSession session) { // 根据ID获取文章信息 Article article = articleService.getById(articleId); // 获取用户信息 User user = userService.getById(article.getUserId()); if (!StringUtils.isEmpty(article.getGroupId())) { // 获取专栏信息 Group group = groupService.getById(article.getGroupId()); article.setGroupName(group.getName()); } // 获取文章标签信息 List<Tag> tags = tagService.queryByArticleId(articleId); // 获取该用户更多的文章信息 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); List<Article> moreArticles = articleService.queryForLimit(queryWrapper, 6); // 获取推荐的文章信息 List<Article> likeArticles = null; if (tags != null && !tags.isEmpty()) { // 根据标签来获取类似的文章 List<String> tagStrs = new ArrayList<String>(); tags.stream().forEach(tag -> tagStrs.add(tag.getTag())); Map<String, Object> params = new HashMap<String, Object>(); params.put("status", Article.STATUS_SUCCESS); params.put("articleId", articleId); likeArticles = articleService.queryForLimitByTags(params, tagStrs, 10); } else { // 获取最新的文章信息 Wrapper<Article> likeWrapper = new QueryWrapper<Article>().lambda().eq(Article::getStatus, Article.STATUS_SUCCESS).ne(Article::getArticleId, articleId).orderByDesc(Article::getPublishTime); likeArticles = articleService.queryForLimit(queryWrapper, 10); } model.addAttribute("article", article); model.addAttribute("user", user); model.addAttribute("tags", tags); model.addAttribute("moreArticles", moreArticles); model.addAttribute("likeArticles", likeArticles); return Const.BASE_INDEX_PAGE + "blog/article/view"; }里面核心逻辑为:
获取文章内容
获取文章的标签
获取该用户的更多文章列表
根据标签查询出相关的文章,作为推荐文章列表
其实里面有一些统计相关的逻辑暂时没有加上,后续会加上。
2、前台核心代码由于文章是通过editor.md工具完成的,所以前台文章展示也是要借助editor.md来完成,核心代码如下:
<div> <div> <textarea>${article.content}</textarea> </div> </div>首先文章内容像上面的代码一样放置于html中,同时当页面加载时需要执行如下的js代码,即:
$(function() { editormd.markdownToHTML("article-content", { htmlDecode : "style,script,iframe", // you can filter tags decode emoji : true, taskList : true, tex : true, // 默认不解析 flowChart : true, // 默认不解析 sequenceDiagram : true, // 默认不解析 }); });页面效果如下:
以你最方便的方式关注我:
微信公众号: