基於SpringBoot從零構建博客網站

文章詳情頁面是博客系統中最為重要的頁面，登錄用戶與遊客都可以瀏覽文章詳情頁面，只不過只有登錄用戶才能進行其它的一些操作，比如評論、點贊和收藏等等。

本次的開發任務只是將文章詳情頁面展示出來，至於一些收藏、點贊、評論以及統計相關的功能後續慢慢加上。

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 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> params = new HashMap<string>();
 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";
}
/<article>/<article>/<string>/<string>/<string>/<string>/<article>/<article>/<article>/<article>

裡面核心邏輯為：

• 獲取文章內容
• 獲取文章的標籤
• 獲取該用戶的更多文章列表
• 根據標籤查詢出相關的文章，作為推薦文章列表

其實裡面有一些統計相關的邏輯暫時沒有加上，後續會加上。

2、前臺核心代碼

由於文章是通過editor.md工具完成的，所以前臺文章展示也是要藉助editor.md來完成，核心代碼如下：

 

 <textarea>${article.content}/<textarea>
 

首先文章內容像上面的代碼一樣放置於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, // 默認不解析
 });
});

頁面效果如下：