基于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<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 class="note-cont">

    <div id="article-content">

        <textarea id="article-content-textarea" style="display:none;">${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,  // 默认不解析

    });

});

页面效果如下：

关注我

以你最方便的方式关注我：

微信公众号：

巴特西

基于SpringBoot从零构建博客网站 - 开发文章详情页面

1、后台核心代码

2、前台核心代码

关注我

最新文章

热门文章