Spring Boot实训开发个人博客17 -博客归档

最新推荐文章于 2021-12-05 19:25:25 发布
最新推荐文章于 2021-12-05 19:25:25 发布
阅读量171 收藏 2
点赞数
分类专栏： Spring Boot实训
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbj5063/article/details/118396226
版权

文章目录

一、静态归档页面

在这里插入图片描述

二、构建方法 - BlogService

在这里插入图片描述

三、添加实现方法 - BlogRpository

在这里插入图片描述

四、方法实现 - BlogServiceImpl

在这里插入图片描述

五、创建ArchiveShowController

在这里插入图片描述

六、页面渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归档</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
    <!--导航-->
    <nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="Search......">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <!--header-->
            <div class="ui top attached padded segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">归档</h3>
                    </div>
                    <div class="right aligned column">
                        共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 24 </h2> 篇
                    </div>
                </div>
            </div>

            <th:block th:each="item : ${archiveMap}">
                <h3 class="ui center aligned header" th:text="${item.key}">2017</h3>
                <div class="ui fluid vertical menu">
                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
                        <span>
                            <i class="teal circle icon"></i><span th:text="${blog.title}">关于刻意练习的清单</span>
                            <div class="ui teal basic left pointing label m-padded-mini" th:text="${#dates.format(blog.updateTime,'MMMdd')}">9月3号</div>
                        </span>
                        <div class="ui orange basic left pointing label m-padded-mini" th:text="${blog.flag}">原创</div>
                    </a>
                    <!--/*-->
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal basic left pointing label m-padded-mini">9月3号</div>
                        </span>
                        <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal basic left pointing label m-padded-mini">9月3号</div>
                        </span>
                        <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal basic left pointing label m-padded-mini">9月3号</div>
                        </span>
                        <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <!--*/-->
                </div>
            </th:block>

        </div>
    </div>

    <br>
    <br>
    <!--底部footer-->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事（User Story）</a>
                        <a href="#" class="item">用户故事（User Story）</a>
                        <a href="#" class="item">用户故事（User Story）</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email: listen@169.com</a>
                        <a href="#" class="item">QQ: 2293432330</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Lirenmi</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright@2019-2022Lirenml Designed by Lirenmi</p>
        </div>

    </footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</body>
</html>

七、页面效果

在这里插入图片描述

lbj5063
关注
专栏目录
Spring Boot制作个人博客-归档页
qq_48838980的博客
06-06 511
文章目录1、创建归档页2、修改代码（1）修改标题（2）修改默认选择标签（3）修改文章列表标题栏（4）删除中间内容代码3、按照年份做分类列表4、最终效果 根据不同年份，展示文章列表 1、创建归档页 随意复制一个html改名为archives.html 2、修改代码 （1）修改标题 （2）修改默认选择标签 （3）修改文章列表标题栏 （4）删除中间内容代码 3、按照年份做分类列表 <!--按照年份做列表--> <h3 class="ui cent
Spring Boot实训开发个人博客6
lbj5063的博客
06-28 181
文章目录一、构建框架（一）创建项目，引入Spring Boot模块（二）application.yml配置1.将application.properties改成application.yaml2.生产环境配置：application-dev.yaml3.开发环境配置：application-pro.yaml4.创建logback-spring.xml（可省略）二、框架搭建 - 异常处理（一）定义错误页面（二）全局处理异常三、日志处理（一） 一、构建框架 （一）创建项目，引入Spring Boot模块 web
SpringBoot企业级博客开发
weixin_30349597的博客
11-11 271
1.springboot生成项目 PS : 进入项目，输入gradle build，生成build文件夹； 然后进入libs有jar，使用java jar进行运行项目 PS: 这个项目没有准守restful APi ...
Spring Boot 构建企业级博客学习（三）
浪里淘沙
07-26 429
ide插件的安装配置、项目运行 安装、配置ide 常用插件安装、配置 导入项目到ide 启动gradle的方式 eclipse环境配置 jdk配置 在eslipse中window-preferences-java里配置jdk 安装gradle插件 然后搜索gradle进行安装 导入gradle项目 启动gradle项目 java -jar java Appl...
Spring Boot企业级博客系统实战视频教程
03-15
Spring Boot企业级博客系统实战视频教程
9 SpringBoot企业级开发
one_chao的博客
08-06 863
9 SpringBoot企业级开发
Spring Boot实训开发个人博客16 -博客标签
lbj5063的博客
07-02 137
文章目录一、 一、
Spring boot实训 个人博客系统 三 分类页
aqaerw的博客
07-05 201
1.新建分类页文件types.html: 2.将头部标签代码复制到这里,生成头部标签: 3.中部分类标签部分: <div class="ui top attached segment"> <div class="ui middle aligned two column grid"> <div class="column">
个人博客基础内容（实训）首页
triet的博客
05-31 682
在个人博客需要实现如下导图中的功能： 所需要的的技术组合： 后端：Spring Boot +JPA +thymeleaf模板 数据库：MySQL 前端UI:Semantic UI框架 课程内容模块： 需求分析与功能规划 页面设计与开发 技术框架搭建 后端管理功能实现 前端管理功能实现 页面设计与开发： 设计 前端展示：首页、详情页、分类、标签、归档、关于我 后台管理：模板页 一、页面开发–首页 1、创建一个项目命名为blog。 2、在项目blog中创建一个static文件夹里面包含JS文件、CSS文件、
springboot项目个人博客总结
weixin_44202871的博客
04-04 1868
文章目录Spring Boot个人博客1、需求与功能1.1 用户故事1.2 功能规划2、页面设计与开发2.1 设计2.1.1首页2.2 页面开发2.3 插件集成3、框架搭建3.1 构建与配置3.2 异常处理thymeleft头引用3.3 日志处理3.4 页面处理4、设计与规范4.1 实体设计4.2 应用分层4.3 命名约定5、后台管理功能实现5.1 登录5.2 分类管理5.3 标签管理5.4 博客管理6、前端展示功能实现6.1 首页展示6.2 分类页6.3 标签页6.4 归档页6.5 关于我7.看板娘6.2
springboot实训总结
qq_45754927的博客
07-04 1969
.
【实战教程】SpringBoot企业级博客（含源码）
weixin_52578018的博客
12-05 1196
一、项目教程 教程 内容均为教程部分截图，仅供参考 二、获取方式 先点再看，再取资源哦，关注「Amusing编程喵」公众号，回复关键词 「SpringBoot企业级博客」 就可以获得下载链接和提取码。 友情提示：素材来源于网络，请勿用于商业用途，否则产生的一切后果将由您自己承担！如有侵犯您的版权，请联系我们，我们会尽快处理。 ...
基于Springboot的个人博客开发
西瓜树的博客
12-29 3438
1. 使用IDEA创建Springboot项目 使用Spring Initializr创建Springboot项目，选择使用maven构建项目，中间选择依赖时，根据需要，选择了web、jpa、mysql、thymeleaf、devtools等； 如果依赖下载的太慢的话可以修改中央仓库为阿里云的仓库。 2. 项目的开发 thymeleaf访问map th:text=&quot;KaTeX parse er...
SpringBoot之从零搭建博客网站（可提供源码）
热门推荐
张先森的博客
08-05 7万+
文字不够，图片来凑。 前言 为什么想要搭建这个博客？ 我还记得，在大二寒假的某天，同往常一样的在家解决这某个bug，不停地问度娘，很巧的碰到了一个同行在他的博客中完美的记录了我的bug的解决方案，随后我又看了看他写的其他博客文章，觉得都非常的不错，并且同时也被他博客网站的简约清新吸引，也就在那刻，心中埋下了准备自己搭建myblog的种子… 于是在寒假的时候我就开始了Bo...
SpringBoot企业级开发
hanjingjava的专栏
05-06 2725
根据书籍《SpringBoot企业级开发教程》梳理SpringBoot开发框架，代码在本人Mac运行通过，IDE是IntelliJ。 SpringBoot知识图谱： 链接: https://pan.baidu.com/s/15syAvklFVDhzJFYwOHrfNA 密码: s74a 部分截图： 建议学习方式： clone 我的代码：https://github.com/hanjing5024064/springboot-edevhttps://github.com/hanjing502..
开题报告SpringBoot家具商城系统.docx
最新发布
11-02
毕业设计开题报告
Flask-2.2.3-py3-none-any.zip
11-02
Flask-2.2.3-py3-none-any.zip
编译器前端与后端设计.docx
11-02
编译原理试题
google-2.0.1.tar.gz
11-02
google-2.0.1.tar.gz
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值