SpringBoot博客开发 第一章 首页开发 1.1 创建项目和文件目录 创建项目
使用webstrom,创建项目，选择empty project，输入项目名称blog
创建文件目录
1.2 前端框架 Semantic UI 引入：
1 2 3 4 <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
免费的CDN:https://www.jsdelivr.com/
1.3 首页开发 导航
导航的实现方式：segment + container + menu(item + right item)
中间内容
整体布局方式 ：container + grid网格布局11:5
博客文章布局 ：三个 attatched segment
博客文章头部 ：使用 two column grid进行左右布局，其中的子项使用了right aligned进行右对齐
博客文章列表item ：每篇文章使用的segment布局，下面使用了grid(11:5)进行左右布局
文章标题：h3+header
文章：p标签
底部：grid(11:5)布局 + 水平列表布局(horizontal list)
首页手机端适配
stackable 针对导航的menu，grid布局
mobile reversed：在手机上可以将grid布局上下翻转，本博客的效果是：手机端，图片在上，文字在下
jquery小知识
可以使用$(“xxx”)来获取元素，xxx可以是id，也可以是class值
toggleClass 可以实现切换效果：判断是否有该属性，没有则添加该属性，有则移除该属性
1 2 3 4 5 <script> $(".sidebar").click(function () { $(".m-item").toggleClass("m-mobile-hide"); }) </script>
第二章：页面插件集成 2.1 Markdown插件 第一步：下载并集成到 项目中
下载markdown插件，地址:https://github.com/pandao/editor.md
解压，并复制到项目中
第二步：引入css和js
1 2 3 4 //css <link rel="stylesheet" href="../static/lib/editor/css/editormd.min.css"> //js <script src="../static/lib/editor/editormd.min.js"></script>
第三步：必要设置
1 2 3 4 5 <div class="field"> <div id="md-content" style="z-index: 1 !important;"> <textarea placeholder="博客内容" name="content" style="display: none"></textarea> </div> </div>
style=”z-index: 1 !important;” 主要是解决编辑器全屏显示问题
2.2 内容排版 https://github.com/sofish/typo.css
引入css
1 <link rel="stylesheet" href="../static/css/typo.css">
2.3 动画 https://github.com/animate-css/animate.css
引入css
1 <link rel="stylesheet" href="./static/css/animate.css">
引入动画属性
1 2 animated xxx xxx即使需要的动画 如 fadeIn <div class="m-container-small m-padding-tb-big animated fadeIn">
2.4 代码高亮 prism
引入css和Js
1 2 <link rel="stylesheet" href="./static/lib/prism/prism.css"> <script src="./static/lib/prism/prism.js"></script>
1 2 3 4 5 6 7 8 <pre> <code class="language-css"> var a = 10; .m-inline-block{ display: inline-block !important; } </code> </pre>
2.4 目录生成 https://github.com/tscanlin/tocbot
tocbot使用方式
第一步添加css和Js，并引入
1 2 <link rel="stylesheet" href="./static/lib/tocbot/tocbot.css"> <script src="./static/lib/tocbot/tocbot.min.js"></script>
第二步：在指定位置弹出目录
1 2 3 4 5 $(".toc").popup({ popup:$(".toc-container.popup"), on:"click", position:"left center" });
其实也可不弹出，直接显示目录，toc-container就是要生成的目录
1 2 3 4 <div class="ui toc-container flowing popup top left transition hidden" style="width: 250px !important;"> <!-- 生成的目录--> <ol class="js-toc"></ol> </div>
第三步：初始化
1 2 3 4 5 6 7 8 9 10 tocbot.init({ // Where to render the table of contents. tocSelector: '.js-toc', // Where to grab the headings to build the table of contents. contentSelector: '.js-toc-content', // Which headings to grab inside of the contentSelector element. headingSelector: 'h1, h2, h3', // For headings inside relative or absolute positioned containers within content. hasInnerContainers: true, });
js-toc 生成目录的ol位置
js-toc-content 哪些地方需要生成目录，一般文章正文
headingSelector 哪些标签需要生成目录 一般都是h标签
注意：所有的h标签，必须有ID属性
2.5 平滑滚动 第一步：添加JS
1 <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
第二步：按钮点击
1 2 3 $('#toTopBtn').click(function () { $(window).scrollTo(0,500); });
scrollTo参数说明：第一个参数0 表示滚动的位置，0表示滚动到最顶端，第二个参数500表示时间
2.6滚动监测 第一步：添加CSS和JS
1 <script src="./static/lib/waypoints/jquery.waypoints.min.js"></script>
第二步：添加滚动监测
1 2 3 4 5 6 7 8 9 10 11 12 //滚动检测 var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { if (direction == 'down') { $('#toolbar').show(500); } else { $('#toolbar').hide(500); } console.log('Scrolled to waypoint! ' + direction); } })
说明：这里的element就是我们要监测的滚动标签，然后判断滚动方向，如果是向下滚动，就显示我们右下角的工具条，如果向上滚动，就隐藏
第三章 Semantic UI
Semantic UI 基本上都是以ui开头
2.1 grid
网格布局，在semantic-ui中提供了16个网格，使用class="column"，当然也可以通过数字来表示当前网格大小
案例一：4-8-4网格
1 2 3 4 5 <div class="ui grid"> <div class="ui four wide column" style="background-color: darkred"></div> <div class="ui eight wide column" style="background-color: green"></div> <div class="ui four wide column" style="background-color: blue"></div> </div>
2.2 segment
片段
1 2 3 <div class="ui segment"> <p>Top</p> </div>
1 2 3 4 5 6 7 8 <div class="ui segments"> <div class="ui segment"> <p>Top</p> </div> <div class="ui segment"> <p>Middle</p> </div> </div>
2.3 container
container：容器，使用container，两边会有边距
1 2 3 4 5 <div style="background-color: green"> <div class="ui inverted container" style="background-color: blue"> <p style="color: red">你好</p> </div> </div>
菜单menu,每一个子项为item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="ui inverted secondary stackable menu"> <div class="ui teal header item">Blog</div> <div class="ui m-item item m-mobile-hide">首页</div> <div class="ui m-item item m-mobile-hide">分类</div> <div class="ui m-item item m-mobile-hide">标签</div> <div class="ui m-item item m-mobile-hide">归档</div> <div class="right m-item item m-mobile-hide"> <div class="ui icon inverted input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> </div>
2.5 icon
图标库 Font Awesome 5.0.8
使用举例：
1 2 <i class="add user icon"></i> <i class="phone volume icon"></i>
在Semantic-UI中定义了很多的按钮样式，可以通过class="ui button"来指定，也可以在class中指定颜色。
1 2 3 4 <button class="ui button">基础样式按钮</button> <button class="ui red button">红色按钮</button> <button class="ui red basic button">红色按钮</button> <button class="ui red inverted button">红色反转按钮</button>
图标按钮
1 2 3 <button class="ui black button"> <i class="unlock green icon"></i> </button>
图标按钮组
1 2 3 4 5 <div class="ui buttons"> <button class="ui button"><i class="save icon"></i></button> <button class="ui button"><i class="edit icon"></i></button> <button class="ui button"><i class="remove icon"></i></button> </div>
垂直图标按钮
1 2 3 4 5 <div class="ui vertical buttons"> <button class="ui button"><i class="save icon"></i></button> <button class="ui button"><i class="edit icon"></i></button> <button class="ui button"><i class="remove icon"></i></button> </div>
圆形/椭圆图标按钮
1 2 3 4 //圆形图标 <div class="ui circular icon button"><i class="settings icon"></i></div> //椭圆图标 <div class="ui circular button"><i class="settings icon"></i></div>
按钮状态
1 2 3 4 5 6 <div class="ui active button"> <i class="settings icon"></i> </div> <div class="ui disabled button"> <i class="settings icon"></i> </div>
条件按钮
1 2 3 4 5 <div class="ui buttons"> <button class="ui green button">yes</button> <i class="or"></i> <button class="ui red button">no</button> </div>
按钮大小
1 2 3 4 5 6 7 8 <button class="ui mini button">mini</button> <button class="ui tiny button">tiny</button> <button class="ui small button">small</button> <button class="ui medium button">medium</button> <button class="ui large button">large</button> <button class="ui big button">big</button> <button class="ui huge button">huge</button> <button class="ui massive button">massive</button>
基础标题
1 2 3 4 5 <h1 class="ui header">一级标题</h1> <h2 class="ui header">二级标题</h2> <h3 class="ui header">三级标题</h3> <h4 class="ui header">四级标题</h4> <h5 class="ui header">五级标题</h5>
标题大小
1 2 3 4 <h3 class="ui tiny header">tiny</h3> <h3 class="ui small header">small</h3> <h3 class="ui large header">large</h3> <h3 class="ui huge header">huge</h3>
2.8 image 边框图片 bordered
1 <img src="https://picsum.photos/id/1/200/200" alt="" class="ui bordered image">
圆角图片 rounded
1 <img src="https://picsum.photos/id/1/200/200" alt="" class="ui rounded image">
椭圆图片 circular
1 <img src="https://picsum.photos/id/1/200/200" alt="" class="ui circular image">
图片状态【激活，禁用】 active disabled
1 2 3 <p>图片状态【激活，禁用】</p> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui active image"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui disabled image">
图片大小 tiny,small…
1 2 <img src="https://picsum.photos/id/1/200/200" alt="" class="ui tiny image"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui small image">
图片浮动
注意：会有溢出问题，暂未解决
1 2 3 4 5 6 7 8 <p>图片浮动float</p> <div class="ui segment"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui left floated image"> <p> Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。 Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。 </p> </div>
图片组
1 2 3 4 5 <div class="ui small images"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui image"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui image"> <img src="https://picsum.photos/id/1/200/200" alt="" class="ui image"> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <p>基础输入框</p> <div class="ui input"> <input type="text" id="name" name="name" placeholder="请输入用户名"> </div> <p>禁用输入框</p> <div class="ui disabled input"> <input type="text" id="name2" name="name2" placeholder="请输入用户名"> </div> <p>图标与输入框结合</p> <div class="ui left icon loading input"> <input type="text" placeholder="加载中..."> <i class="search icon"></i> </div> <p>输入框与标签结合</p> <div class="ui labeled input"> <div class="ui label"> http:// </div> <input type="text" placeholder="请输入url..."> </div> <p>输入框的颜色反转</p> <div class="ui inverted labeled input"> <div class="ui label"> http:// </div> <input type="text" placeholder="请输入url..."> </div>
2.10 分割线 1 2 3 4 5 6 7 8 <p>分割线</p> <div class="ui divider"></div> <p>水平分割线并加入文字</p> <div class="ui horizontal divider">扫码关注我</div> <p>竖线并加入or</p> <div class="ui vertical divider">or</div>
2.11 表格 基础样式表格：celled
1 2 3 4 5 6 7 8 <p style="text-align: center">基础样式表格celled</p> <div class="ui container"> <table class="ui celled table"> <tr><td>昵称</td><td>年龄</td></tr> <tr><td>赵丽颖</td><td>20</td></tr> <tr><td>杨幂</td><td>18</td></tr> </table> </div>
2.12 表单 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <p>表单</p> <div class="ui container"> <form action="#" method="post" class="ui form"> <div class="four wide field"> <label for="name">姓名</label> <input type="text" name="name" id="name" placeholder="请输入你的姓名..."> </div> <div class="four wide field"> <label for="age">年龄</label> <input type="text" name="age" id="age" placeholder="请输入你的年龄..."> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox"> <label>同意注册协议1</label> </div> </div> <div class="inline field"> <div class="ui slider checkbox"> <input type="checkbox"> <label>同意注册协议1</label> </div> </div> <div class="inline field"> <div class="ui toggle checkbox"> <input type="checkbox"> <label>同意注册协议1</label> </div> </div> <button class="ui green button">注册</button> <button class="ui red button">重置</button> </form> </div>
form 定义表格
Field 定义表格的每一行
four wide 定义输入框的宽度
三种样式的复选框：默认样式，slider,toggle
单选框
1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="inline fields"> <label for="sex">性别</label> <div class="field"> <div class="ui ratio checkbox"> <input type="radio" name="sex" id="sex"><label>男</label> </div> </div> <div class="field"> <div class="ui ratio checkbox"> <input type="radio" name="sex" id="sex"><label>女</label> </div> </div> </div>
下拉列表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"> <title>下拉列表</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script> <script> $(function () { $(".ui.dropdown").dropdown(); }) </script> </head> <body> <div class="ui container"> <form action="#" class="ui form"> <div class="field"> <label>性别：</label> <div class="ui selection dropdown"> <i class="dropdown icon"></i> <div class="default text">性别</div> <div class="menu"> <div class="item">男</div> <div class="item">女</div> </div> </div> </div> </form> </div> </body> </html>
2.13 文本域 第四章 框架搭建-实体类 4.1 实体类 实体类-博客
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /** * 博客实体类 */ @Entity @Table(name = "t_blog") data class Blog( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id:Long? = null, val title:String,//标题 val content:String,//内容 val firstPicture:String,//首图 val flag:String, val views:Int,//浏览次数 val appreciation:Boolean,//赞赏 val shareStatement:Boolean,// val commentabled:Boolean,//是否开启评论 val published:Boolean, val recommend:Boolean,//是否推荐 val createTime:Date,//创建时间 val updateTime:Date//更新时间 )
实体类-评论
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** * 评论 */ @Entity @Table(name = "t_comment") class Comment( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id:Long, val nickname:String, val email:String, val content:String, val avatar:String, @Temporal(value = TemporalType.TIMESTAMP) val createTime:Date )
实体类-tag
1 2 3 4 5 6 7 8 9 10 11 /** * 标签 */ @Entity @Table(name = "t_tag") class Tag( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id:Long, val name:String )
实体类-分类
1 2 3 4 5 6 7 8 9 10 11 /** * 博客分类 */ @Entity @Table(name = "t_type") data class Type( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id:Long? = null, val name:String )
4.2 注解 常用注解如下：
注解
注意
时间需要使用@Temporal注解
1 2 @Temporal(value = TemporalType.TIMESTAMP) val createTime:Date,//创建时间
实体类之间的对应关系：
博客与分类：多对一的关系(多篇博客对应一个分类，一个分类对应多篇博客)
博客是多的一端
1 2 @ManyToOne val type: Type,
在分类实体类中：
1 2 @OneToMany(mappedBy = "type") val blogs:List<Blog>
关于mappedBy：https://www.cnblogs.com/powerwu/articles/3964970.html
