基于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从零构建博客网站 - 开发文章详情页面的更多相关文章
- 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能
由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...
- 基于SpringBoot从零构建博客网站 - 确定需求和表结构
要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...
- 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境
技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...
- 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能
守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...
- 基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能
上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片.pdf.压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等.在守望博客系统中对于上 ...
- 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能
发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...
- 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能
显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...
- 基于SpringBoot从零构建博客网站 - 整合ehcache和开发注册登录功能
对于程序中一些字典信息.配置信息应该在程序启动时加载到缓存中,用时先到缓存中取,如果没有命中,再到数据库中获取同时放到缓存中,这样做可以减轻数据库层的压力.目前暂时先整合ehcache缓存,同时预留了 ...
- 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率
在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...
随机推荐
- WPF:window设置单一开启
方法一: Window window = new Window();window.ShowDialog; 方法二: 设置一个判断窗口打开状态的全局控制变量 private bool i ...
- 如何阅读JDK源码
JDK源码阅读笔记: https://github.com/kangjianwei/LearningJDK 如何阅读源码,是每个程序员需要面临的一项挑战. 为什么需要阅读源码?从实用性的角度来看,主要 ...
- SpringBoot 使用JPA时解决no session的方法
1.在application.yml中添加 spring.jpa.open-in-view: true 2.在使用查询的方法添加 @Transactional
- Oracle创建设置查询权限用户
用户创建的可以参考博客: https://blog.csdn.net/u014427391/article/details/84889023 Oracle授权表权限给用户: 语法:grant [权限名 ...
- hadoop学习(五)----HDFS的java操作
前面我们基本学习了HDFS的原理,hadoop环境的搭建,下面开始正式的实践,语言以java为主.这一节来看一下HDFS的java操作. 1 环境准备 上一篇说了windows下搭建hadoop环境, ...
- 【Kubernetes 系列三】Kubernetes 学习文档推荐
标题 地址 备注 Kubernetes 官方文档 https://kubernetes.io/docs 英文文档,全面 Kubernetes Handbook ttps://jimmysong.io/ ...
- golang 结合实例更好的理解参数传递和指针
关于参数传递 其实go的参数传递,核心就是一句话:go里所有参数传递都是值传递,既把参数复制一份放到函数里去用. go的函数传参,不管参数是什么类型,都会复制一份,然后新的参数在函数内部被使用. 不像 ...
- Git下载加速教程
方法一 大家普遍采取的是更改本地的host文件,然后cmd命令刷新 1.访问这里,依次获取下面三个url的ping的ip github.com github.global.ssl.fastly.net ...
- CodeForces 29D Ant on the Tree
洛谷题目页面传送门 & CodeForces题目页面传送门 题意见洛谷里的翻译. 这题有\(\bm3\)种解法,但只有一种是正解(这不是废话嘛). 方法\(\bm1\):最近公共祖先LCA(正 ...
- 弃用 wget, 拥抱多线程下载 axel
0x00 事件 对于在 Linux 的下载工具而言,比较常用的就是 wget 或者 curl,吾也一直用 wget 的方式进行网络上的资源下载.偶然发现了 axel 这个支持多线程的下载工具,试用了几 ...