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

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

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. 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能

    由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...

  2. 基于SpringBoot从零构建博客网站 - 确定需求和表结构

    要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...

  3. 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境

    技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...

  4. 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能

    守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...

  5. 基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能

    上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片.pdf.压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等.在守望博客系统中对于上 ...

  6. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能

    发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...

  7. 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

  8. 基于SpringBoot从零构建博客网站 - 整合ehcache和开发注册登录功能

    对于程序中一些字典信息.配置信息应该在程序启动时加载到缓存中,用时先到缓存中取,如果没有命中,再到数据库中获取同时放到缓存中,这样做可以减轻数据库层的压力.目前暂时先整合ehcache缓存,同时预留了 ...

  9. 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率

    在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...

随机推荐

  1. 如何在MySQL中输入中文

    解决MySQL中的Incorrect string value MySQL中输入中文:在MySQL建标的时候,直接往表中的varchar(255)中输入中文的话是会报错的,大概是因为数据库的默认编码是 ...

  2. Flink+Druid构建实时OLAP的探索

    场景 k12在线教育公司的业务场景中,有一些业务场景需要实时统计和分析,如分析在线上课老师数量.学生数量,实时销售额,课堂崩溃率等,需要实时反应上课的质量问题,以便于对整个公司的业务情况有大致的了解. ...

  3. HTML发展历程

    HTML是超文本标记语言的缩写,不同于C或JAVA等编程语言,HTML由标签组成.通过标签可以在网页中插入文字.图片.链接.音频.视频等元素,进而描述网页.和Windows一样,随着技术的发展,HTM ...

  4. eclipse安装STS插件遇到的问题

    eclipse安装STS插件 第一次接触springboot,对于用惯了eclipse写代码的人来说,接受IDEA确实还要多花点时间去改变下,因为IDEA确实会节省下不必要的写代码时间.废话少说,直接 ...

  5. (二十四)c#Winform自定义控件-单标题窗体

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  6. 重学计算机组成原理(十一)- 门电路的"千里传音"

    人用纸和笔来做运算,都是用十进制,直接用十进制和我们最熟悉的符号不是最简单么? 为什么计算机里我们最终要选择二进制呢? 来看看,计算机在硬件层面究竟是怎么表示二进制的,你就会明白,为什么计算机会选择二 ...

  7. C#中appium自动化执行移动命令mobile:shell用法

    官网:https://appium.readthedocs.io/en/latest/en/commands/mobile-command/#android 1.执行ADB shell命令(需要设置服 ...

  8. 一个最简单的通过自定义注解形式实现AOP的例子

    1.首先实现AOP实例的第一步即声明切面类,两种方式(1.基于注解形式@Aspect,2.基于xml配置,一般都通过注解来声明切面类) 2.切入点表达式大致也有两种,一种是直接根据方法的签名来匹配各种 ...

  9. idea打包报错

    There is insufficient memory for the Java Runtime Environment to continue.# Native memory allocation ...

  10. [系列] 使用 go modules 包管理工具(一)

    目录 概述 初始化 添加依赖包 go mod 命令 小结 源码地址 概述 我想实现一个开箱即用的 API 框架的轮子,这个轮子是基于 Gin 基础上开发的. 为什么是开箱即用,它会集成哪些功能? 以上 ...