基于 Spring Boot 博客系统开发(二)

基于 Spring Boot 博客系统开发(二)

本系统是简易的个人博客系统开发,为了更加熟练地掌握SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发(一)👈👈

首页查询文章列表

后端代码

    @Autowiredprivate IArticleService articleService;@RequestMapping("/")public String home(Model model,@RequestParam(defaultValue = "1") Integer pageNum){PageHelper.startPage(pageNum,5);List<Article> articleList = articleService.list();PageInfo<Article> articlePage = new PageInfo<>(articleList);model.addAttribute("articlePage",articlePage);return "client/index";}

前端代码
文章列表模板

			<!-- 文章遍历并分页展示 --><article th:each="article:${articlePage.list}" class="am-g blog-entry-article"><div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img"><img width="100%" class="am-u-sm-12" th:src="${'./user/img/rand/'+(article.id%25+1)+'.png'}"/></div><div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text"><!-- 文章分类 --><span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span><span>&nbsp;&nbsp;&nbsp;</span><!-- 发布时间 --><span style="font-size: 15px;" >发布于 [[${article.created}]]</span><h2><div><a style="color: #0f9ae0;font-size: 20px;" href="article.html" th:text="${article.title}">函数式接口</a></div></h2><!-- 文章摘要--><div style="font-size: 16px;" >   [[${article.content.substring(0,100)}]]......</div></div></article>

文章分页模板

        <!-- 文章分页信息 --><div class="am-pagination"><ol class="am-pagination"><li th:if="${!articlePage.isFirstPage}"  class="am-pagination-prev"><a  th:href="${'./?pageNum='+articlePage.prePage}">上一页</a></li><li th:class="${num==articlePage.pageNum?'current':''}" th:each="num:${articlePage.navigatepageNums}" ><a th:href="${'./?pageNum='+num}" th:text="${num}">1</a></li><li th:if="${!articlePage.isLastPage}" class="am-pagination-next"><a th:href="${'./?pageNum='+articlePage.nextPage}">下一页</a></li></ol></div>

实现效果

文章列表效果
在这里插入图片描述
文章分页效果
在这里插入图片描述

去除markdown、html标记,文章摘要处理

添加Markdown处理的依赖

 		<!-- Markdown处理html --><dependency><groupId>com.atlassian.commonmark</groupId><artifactId>commonmark</artifactId><version>0.11.0</version></dependency><!-- Markdown处理表格 --><dependency><groupId>com.atlassian.commonmark</groupId><artifactId>commonmark-ext-gfm-tables</artifactId><version>0.11.0</version></dependency><!-- 过滤emoji表情字符 --><dependency><groupId>com.vdurmont</groupId><artifactId>emoji-java</artifactId><version>4.0.0</version></dependency>

添加文本处理的工具类

import com.vdurmont.emoji.EmojiParser;
import org.apache.commons.lang3.StringUtils;
import org.commonmark.Extension;
import org.commonmark.ext.gfm.tables.TablesExtension;
import org.commonmark.node.Link;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.AttributeProvider;
import org.commonmark.renderer.html.HtmlRenderer;
import org.springframework.stereotype.Component;import java.util.Arrays;
import java.util.List;
import java.util.Map;@Component
public class TextUtils {public static String intro(String markdown,int len) {String text = html2Text(md2Html(markdown));if (text.length() > len) {return text.substring(0, len)+"......";}return text;}/*** 去除md标记*/public static String md2Text(String markdown) {return html2Text(md2Html(markdown));}/*** 提取html中的文字*/public static String html2Text(String html) {if (StringUtils.isNotBlank(html)) {return html.replaceAll("(?s)<[^>]*>(\\s*<[^>]*>)*", "");}return "";}/*** Markdown转换为Html*/public static String md2Html(String markdown) {if (StringUtils.isBlank(markdown)) {return "";}List<Extension> extensions = Arrays.asList(TablesExtension.create());Parser parser = Parser.builder().extensions(extensions).build();Node document = parser.parse(markdown);HtmlRenderer renderer = HtmlRenderer.builder().attributeProviderFactory(context -> new LinkAttributeProvider()).extensions(extensions).build();String content = renderer.render(document);content = emoji(content);return content;}/*** :hugging 这种格式的字符转换为emoji表情*/public static String emoji(String value) {return EmojiParser.parseToUnicode(value);}private static class LinkAttributeProvider implements AttributeProvider {@Overridepublic void setAttributes(Node node, String tagName, Map<String, String> attributes) {if (node instanceof Link) {attributes.put("target", "_blank");}}}}

修改文章摘要模板,thymeleaf调用后台工具类方法使用@bean

 <!-- 文章摘要--><div style="font-size: 16px;"  >[[${@textUtils.intro(article.content,100)}]]</div>

最终实现效果

去除了markdown、html标记符号
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/3618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【DataGrip】导出导入迁移数据库表

文章目录 前言迁移表结构导出表结构导入表结构 迁移表数据导出表数据导入表数据 前言 DataGrip导出数据库表结构跟表数据是分开的&#xff0c;所以需要分两个步骤来完成。 DataGrip版本&#xff1a;2024.1.1 DataGrip官方文档地址&#xff1a;https://www.jetbrains.com/help/d…

第5章 全局大喇叭——详解广播机制

第5章 全局大喇叭——详解广播机制 如果你了解网络通信原理应该会知道&#xff0c;在一个IP网络范围中&#xff0c;最大的IP地址是被保留作为广播地址来使用的。 比如某个网络的IP范围是192.168.0.XXX&#xff0c;子网掩码是255.255.255.0&#xff0c;那么这个网络的广播地址…

用 JetBrains DataGrip 连接 Huawei openGauss

参考文章https://blog.itdevwu.com/post/1632/ DataGrip 连接GaussDB数据库的时候&#xff0c;会出现身份验证只能通过无验证或 pgpass 进行&#xff0c;而没有需要的用户名-密码的方式&#xff0c;也就无处填写 user 和 password。 而如果直接使用 DataGrip 自带的 PostgreSQ…

【Pytorch】(十四)C++ 加载TorchScript 模型

文章目录 &#xff08;十四&#xff09;C 加载TorchScript 模型Step 1: 将PyTorch模型转换为TorchScriptStep 2: 将TorchScript序列化为文件Step 3: C程序中加载TorchScript模型Step 4: C程序中运行TorchScript模型 【Pytorch】&#xff08;十三&#xff09;PyTorch模型部署: T…

【SAP ME 32】Java调用SAP ME发布的WebService接口

目录 1、描述 2、检验WebService接口 3、SOAPUI检验 4、 示例源码 4.1、DataGlobalAGVController

LVS + KeepAlived实现高可用负载均衡

上文已经介绍了lvs和keepalived的基本概念和用法&#xff0c;下面直接做lvs和keepalived来实现高可用负载均衡 配置&#xff1a; 主机名ip系统用途client172.16.147.1mac客户端lvs-keepalived-master172.16.147.154centos7.5分发器lvs-keepalived-slave172.16.147.155centos7…

09.JAVAEE之网络初识

1.网络 单机时代 >局域网时代 >广域网时代 >移动互联网时代 1.1 局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;简称LAN。 Local 即标识了局域网是本地&#xff0c;局部组建的一种私有网络。 局域网内的主机之间能方便的进行网络通信&#xff0…

web3 入门记录

密码学 柯尔霍夫原则&#xff0c;也被称为克尔克霍夫定律&#xff0c;是密码学中的一个核心原则。这个原则简单来说&#xff0c;就是指一个密码系统即便在除了密钥之外的所有信息都被公开的情况下&#xff0c;仍然应该是安全的。 为了更好地理解这个原则&#xff0c;我们可以…

【Redis】深度学习与实践指南系列

本篇是Redis系列的目录。涵盖了 Redis 的基础知识、数据类型、持久化策略、高可用性方案、与 Spring Boot 的整合&#xff0c;以及性能调优等多个方面。 目录 Redis 基础 Redis 是什么&#xff1f;数据类型及使用场景 简介&#xff1a;这篇文章作为系列的开端&#xff0c;介…

数据结构四:线性表之带头结点的单向循环链表的设计

前面两篇介绍了线性表的顺序和链式存储结构&#xff0c;其中链式存储结构为单向链表&#xff08;即一个方向的有限长度、不循环的链表&#xff09;&#xff0c;对于单链表&#xff0c;由于每个节点只存储了向后的结点的地址&#xff0c;到了尾巴结点就停止了向后链的操作。也就…

TGRS 2023.12基于矢量多边形和深度学习的高分辨率遥感影像土地覆盖变化检测

首先&#xff0c;采用增强型简单线性迭代聚类(SLIC)算法对同一区域的双时相图像进行分割。随后&#xff0c;使用多尺度提取、裁剪和绘制方法生成带注释的数据集。接下来&#xff0c;分使用时态前和时态后图像的数据集进行训练和测试&#xff0c;并使用双分类器交叉验证对训练集…

uniapp对uni.request()的封装以及使用

官方文档 uni.request(OBJECT) | uni-app官网 (dcloud.net.cn) uni.request参数 参数名说明url是写api地址的data是用来传值的对于 GET 方法&#xff0c;会将数据 转换为 query string。例如 { name: name, age: 18 } 转换后的结果是 namename&age18。对于 POST 方法且 …

Lustre架构介绍的阅读笔记-SMB协议

本文是在阅读Introduction to Lustre* Architecture的Lustre SMB Gateway System Architecture时的笔记。 Lustre只支持Linux系统&#xff0c;但借助Samba可以支持SMB协议&#xff0c;进而对Windows主机提供文件访问能力。 参考资料 Welcome to the CTDB web pages CTDB is …

k8s pod 无法启动一直ContainerCreating

情况如下&#xff0c;更新 pod 时&#xff0c;一直在ContainerCreating 查看详细信息如下 Failed to create pod sandbox: rpc error: code Unknown desc [failed to set up sandbox container “334d991a478b9640c66c67b46305122d7f0eefc98b2b4e671301f1981d9b9bc6” networ…

viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能

1、下载依赖&#xff1a; npm i viewerjs 2、定义html结构 <template> <div><ul class"artBody"><li><img src"picture-1.jpg" alt"Picture 1"></li><li><img src"picture-2.jpg" alt&…

Find My头盔|苹果Find My技术与头盔结合,智能防丢,全球定位

头盔是保护头部的装具&#xff0c;是人们交通中不可或缺的工具。头盔具有保护头部、吸收冲击力、减少伤害风险、提高安全性、防止颅脑损伤等功效作用。头盔能够提供额外的保护&#xff0c;减少头部受伤的风险。在日常出行或进行高风险活动过程中&#xff0c;如骑自行车、骑行电…

pytest参数化数据驱动(数据库/execl/yaml)

常见的数据驱动 数据结构&#xff1a; 列表、字典、json串 文件&#xff1a; txt、csv、excel 数据库&#xff1a; 数据库链接 数据库提取 参数化&#xff1a; pytest.mark.parametrize() pytest.fixture()…

oracle 执行计划详解

执行计划是指示 Oracle 如何获取和过滤数据、产生最终的结果集&#xff0c;是影响SQL 语句执行性能的关键因素。在深入了解执行计划之前&#xff0c;首先需要知道执行计划是在什么时候产生的&#xff0c;以及如何让 SQL 引擎为语句生成执行划。 先了解 SQL 语句的处理执行过程…

不小心删了数据怎么办,数据库错误删除了怎么恢复

当然可以&#xff0c;作为MySQL数据库专家&#xff0c;我可以帮助您应对不小心删掉数据的情况。首先&#xff0c;了解您误删数据的具体情况&#xff08;例如&#xff1a;删除了单条记录、整张表还是整个数据库&#xff09;&#xff0c;以及您的MySQL服务器是否具备相应的预防措…

浮点数在内存中的存储格式

使用 union 类型方式将浮点数的二进制形式保存到 uint32_t 变量中时&#xff0c;需要考虑大小端的影响。 在大端系统中&#xff0c;浮点数的最高字节位于内存的低地址处&#xff0c;而在小端系统中&#xff0c;浮点数的最低字节位于内存的低地址处。因此&#xff0c;当使用 un…