Spring Boot开发小而美的博客学习笔记01（首页）

阅读量：

完成后显示效果：
（一）个人博客的首页：
1、左边是博客的列表（图文区域），支持上下分页；
2、右边分类进行展示（标签、分类、二维码等）；
3、底部有信息栏（博客最新内容、个人联系方式、二维码等）；
（二）个人博客详情页：
1、图文
2、支持代码语法高量展示
3、导航栏：
（1）目录：根据博客内容生成目录，可快速浏览
（2）留言：可进行留言也可进行回复(回复可进行二级、三级等评级的回复)
（3）微信二维码：鼠标移动到微信图标时，自动显示二维码
(4) 赞赏：以扫码方式进行赞赏
（三）分类页面
1、标签：在分类页面顶部有很多标签，用于分类博客类型；点击标签后又进入到一个新的博客首页页面
（四）归档
按照年份将博客进行有序列地展示
（五）关于我
自我介绍
（六）搜索
可输入博客的内容或标题进行搜索
（七）后端管理
1、管理后台登录
2、博客管理
3、标签管理
4、分类管理

个人博客功能：

技术组合：
后端：Spring Boot + JPA + thymeleaf模板
数据库：MYSQL
前端UI：Semantic UI框架
工具与环境：
IDEA
Maven 3
JDK8
Axure RP8
课程内容模块：
需求分析与功能规划
页面设计与开发
技术框架搭建
后端管理功能实现
前端管理功能实现

个人博客系统的用户故事：作为一个访客或自己作为管理员（我是管理员），我可以实现某个功能或操作（如发布文章、管理评论等），从而带来提升写作效率的好处

访客，可以分页查看所有的博客

访客，可以快速查博客数最多的6个分类

访客，可以查看所有的分类

访客，可以查看某个分类下的博客列表

访客，可以快速查看标签最多的10个标签

访客，可以查看所有的标签

访客，可以查看某个标签下的博客列表

访客，可以根据年度时间线查看最新的推荐博客

访客，可以查看最新的推荐博客

访客，可以查看单个博客内容

访客，可以对博客内容进行评论

访客，可以赞赏博客内容

访客，可以微信扫描二维码关注我

我，可以用户名和密码登录后台管理

我，可以管理博客

具有撰写新博客的能力
能够将个人作品分类整理
能够为内容设置标签
能够编辑文章的内容与结构
能够行使文章删除权
可以根据多个维度（如标题名称、分类类型及标签）来检索相关文章

我、可以管理博客分类

我可以创建一个新的分类

我可以编辑/调整一个现有的分类

我可以删除当前所选的分类
我可以基于分类名称查找对应的类别。

我，可以管理标签

该功能能够新增一个标记。
此操作允许对现有标记进行调整。
该系统支持移除现有标记。
通过输入特定的关键词可筛选相关结果。

新建项目blog

新建目录

新建html文件index.html

浏览器里访问https://semantic-ui.com/
找到CDN资源
拷贝框内内容

粘贴到html

访问官网并拷贝框内内容

粘贴

新建css文件me.css

编辑样式

添加图标

效果如图：

搜索框

如图：

页面背景：

效果：

建议避免使用过于复杂以及明艳艳的颜色搭配作为背景。这是因为后续还有诸多工作要做，并且为了避免影响整体效果

底部

复制代码

    <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">关于刻意练习的清单</a>
                    <a href="#" class="item">失效要趁早</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：2192787371@qqc.com</a><br>
                    <a href="#" class="item">QQ：2192787371</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-tiny ">这是我的个人博客，会分享关于编程、写作、思考相关的任何 内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <!--    分界线    -->
        <div class="ui inverted section divider "></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright @ 2016 - 2017 Jiujiu Designed by Jiujiu</p>
    </div>
    
    </footer>