在这里插入图片描述
作者：曾中杰
有多少人只顾着眼前的六便士，却不曾抬头看看皎洁的月亮
项目地址一览： https://www.zengzhongjie.com
GitHub源码下载地址： https://github.com/Mretron
背景：
博主是一名大二软件工程的学生。坚持学习课堂上未曾教授的java以及javaweb相关的知识，乃至学习Spring一系列的框架的过程尤为枯燥。每天看视频学习编程，“copy”视频中的代码运行让我就像是机器一样日复一日地重复着那些操作。而使得我能够坚持下去的兴趣，就是能够在不久的将来完成我自己的项目。也就有了我的个人博客网站。
网站一览：
首页
在这里插入图片描述
分类页面
在这里插入图片描述
归档页面
在这里插入图片描述
后台管理页面
在这里插入图片描述
后台发布文章页面
在这里插入图片描述
技术组合：
- 后端：SpringBoot + Mysql + JPA + Maven + 阿里云OSS + thymeleaf模板
- 前端：Semantic UI框架 + html + css + js + jQuery + editor.md等
插件集成（相关下载地址后文提到）
- 编辑器 markdown
- 内容排版 typo
- 动画 animate
- 代码高亮 prism
- 目录生成 Tocbot
- 滚动侦测 waypoints
- 平滑滚动 jquery.scrollTo
- 二维码生成 qrcode.js
- MarkDown转HTML
- 简单的爬虫技术实现翻译单词功能 jsoup.jar
工具与环境:
- IDEA
- Maven 3
- JDK 8
从中有什么收获？
- 基于SpringBoot的完整全栈式的开发套路
- Semantic UI框架的使用
- 后端使用SpringBoot+JPA，相比于SSM框架大量的配置开发更为方便，作为新手练手的javaweb项目来说是富有意义的：激发自己编程热情+熟悉SpringBoot整个开发流程+完成过后提高自己的成就感。
- JPA的简单使用（JPA和MyBatis的对比，其实就是Hibernate和MyBatis的对比，对于数据的操作，hibernate是面向对象的，而MyBatis是面向关系的。对于我的个人博客网站来说，面向对象更为方便自己理解业务逻辑，开发过程中建表也更为方便）。
- 懂得根据需求去GitHub上面使用优秀的开源插件，使得自己的项目锦上添花。
- 对页面引擎 thymeleaf模板 的熟悉掌握。相比于连SpringBoot都官方遗弃的jsp来说，掌握thymeleaf是刻不容缓的。（JSP本质上是servlet，内含java代码，实际上没有做到前后端分离，所以在大环境都推崇前后端分离的情况下，着实不必再使用JSP）
- 与我而言，最大的收获便是在茫茫互联网的大海里面，有了属于我的一叶扁舟，能够在扁舟上不断地分享我的故事给陌生人，老朋友，便是我的荣幸。
小福利
通过此次开发个人博客网站，除了学会集成上面提到的一些开源优秀插件，还有一些实用但是鲜有人知的对开发起到锦上添花的网站。在此分享给大家。
- Font Awesome : 小图标icon网站，你想要的精美小图标，应该都能找到 https://fontawesome.com/
- Subtle Patterns ：全是精美设计的背景图 https://www.toptal.com/designers/subtlepatterns/
1、需求与功能
1.1个人博客系统的用户故事：
角色：普通访客，管理员(我)
普通访客：
- 查看所有发布的博客
- 查看博客的公布的所有信息
- 所有博客分类
- 所有博客标签
- 根据年份划分的博客信息
- 所有友链的信息
- 根据权限访问首页“小世界”模块
- 首页公告板
- 访问关于我和关于本站的页面
- 查看所有留言的侧边栏和提供留言的版块
- 全局搜索所有的博客
- 查看我分享的所有信息，如：二维码，导向至GitHub，csdn,微博的图标等
管理员(我):
- 根据账号密码登录后台管理
- 后台增删改查所有博客
- 后台增删改查所有分类
- 后台增删改查所有便签
- 后台增删改查公告板
- 后台增删改查留言
- 后台增删改查友链信息
- 后台增删改查自己的信息
1.2功能规划
在这里插入图片描述
2、页面设计与开发
2.1设计
页面规划：
- 前端展示:首页、分类页、标签页、归档页、本站、友链。关于我
- 后台管理：登录页面、博客管理、分类管理、标签管理、公告管理、友链管理、留言管理、个人信息管理
2.2页面开发
- Semantic UI官网 https://semantic-ui.com/
- Semantic UI中文官网 https://onebugman.cn/semantic-ui/
- 背景图片资源 https://www.toptal.com/designers/subtlepatterns/
| 前端相关 | 名称 |
|---|---|
| 前端框架 | Semantic UI |
| 编译器 | WebStorm |
| 页面语言 | html+css+js |
2.3插件集成
| 介绍 | 名称 | 获取地址 |
|---|---|---|
| 内容排版 | typo.css | https://github.com/sofish/typo.css |
| 动画 | animate.css | https://daneden.github.io/animate.css/ |
| 代码高亮 | prism | https://github.com/PrismJS/prism |
| 目录生成 | Tocbot | https://tscanlin.github.io/tocbot/ |
| 滚动侦测 | waypoints | http://imakewebthings.com/waypoints |
| 平滑滚动 | jquert.scrollTo | https://github.com/flesler/jquery.scrollTo |
| 二维码生成 | qrcode.js | https://davidshimjs.github.io/qrcodejs/ |
| 编辑器 | MarkDown | https://pandao.github.io/editor.md |
3、框架搭建
3.1构建
IDEA 引入SpringBoot模块
- web ：springboot集成了tomcat和springmvc的一些模块
- Thymeleaf ： 前端的模板 和jsp的最终的目的一样的
- Jpa ： 规范数据操作的工具
- MySql ：数据库
- Aspects ： 集成SpringAOP的模块，这里使用切面来实现日志
- DevTools：热部署，帮助我们开发过程中不用每次都重新启动项目启动
3.2异常处理
错误页面：
- 404： 访问的资源不存在或者页面不存在，这种情况跳转404
- 500： SpringBoot后台发生了一些异常信息的时候跳转的页面，这种跳转500
- ERROR： 我们自己定义的错误页面，方便开发者调试，可以便捷的查看
3.3日志处理
记录日志内容
- 请求url
- 访问者ip
- 调用方法 classMethod
- 参数args
- 返回内容
4、设计与规范
4.1实体设计
实体类
- 博客Blog
- 博客分类Type
- 博客标签Tag
- 博客评论Comment
- 用户User
- 公告栏Bulletin
- 朋友Friend
- 留言Message
举例两个数据库表：
博客表t_blog
| 名称 | 类型 | 长度 | 主键 | 非空 | 描述 |
|---|---|---|---|---|---|
| id | bigint | 20 | true | true | 作为主键 |
| appreciation | bit | 1 | false | true | 是否开启赞赏 |
| commentabled | bit | 1 | false | true | 是否开启评论 |
| content | longtext | 0 | false | true | 文章的正文 |
| create_time | datetime | 0 | false | true | 文章创建时间 |
| first_pricture | varchar | 255 | false | true | 文章的首图地址 |
| flag | varchar | 255 | false | true | 文章的类型原创,转载,翻译 |
| published | bit | 1 | false | true | 文章是否发布 |
| share_statement | bit | 1 | false | true | 版权声明 |
| title | varchar | 255 | false | true | 文章的标题 |
| update_Time | datetime | 0 | false | true | 最近更新时间 |
| views | int | 11 | false | true | 浏览量 |
| recommend | bit | 1 | false | true | 是否推荐 |
| description | varchar | 255 | false | true | 文章的主要描述 |
用户表t_user
| 名称 | 类型 | 长度 | 主键 | 非空 | 描述 |
|---|---|---|---|---|---|
| id | bigint | 20 | true | true | 作为主键 |
| create_time | datetime | 0 | false | true | 用户创建时间 |
| avatar | varchar | 255 | false | true | 用户的头像地址 |
| type | varchar | 255 | false | true | 用户的类型 |
| nickname | varchar | 255 | false | true | 用户的昵称 |
| username | varchar | 255 | false | true | 用户的实际名称 |
| update_Time | datetime | 0 | false | true | 最近更新时间 |
| varchar | 255 | false | true | 用户的邮箱地址 |
4.2应用分层
在这里插入图片描述
5、开发流程
5.1开发
- 刚开始使用手绘或者专门的画图工具画出网站的原型
- 在WebStorm中通过semantic UI根据设计的原型将前端网页码出来
- 接着使用IDEA，构建SpringBoot环境进行后端的编写
- dao持久层通过接口继承JPARepository即可得到CRUD的标准方法，如果需要特定的查询方法，根据Jpa命名规则或者使用@Query注解即可
- service业务逻辑层先编写一系列接口及其想实现的方法，再通过类去实现相应的接口，注意添加@Service注解放进IOC容器中。提供给Controller层调用
- 在service业务逻辑层的实体类中的方法加上@Transactional事务注解，实现开启事务
- Web层的Controller再通过依赖注入service即可完成相应的业务逻辑
- 通过thymeleaf前端引擎进行渲染数据
- 后端完成过后，进行整体细节处理，进一步完善整个网站的正常运行
5.2部署
- 采用的是SpringBoot自带的 jar包的 部署方式
- 通过maven 的 intall 命令得到 xxx.jar
- 放到阿里云Linux服务器中
- 使用 nohup java -jar xxx.jar & 命令 使得项目可以后台运行
值得一提
- 对于这个项目的开发能够较为顺利地进行，得益于李仁密老师的网络视频，在此特地感谢他。
- Semantic UI 是一种语义化的前端框架，只要稍微熟悉，就能构建精美的页面，特此感谢semantic UI。
- 作为一名java后端人员，前端免不了遇到各种各样的错误，在此感谢我的前端大佬好朋友龚皓的支持，帮助我解决了很多前端的问题。
- 整个项目完成过后，最为让我煎熬的居然是备案。在大陆的网络服务器要想和你的域名进行DNS绑定，必须经过备案，而港澳台等地则不需要。而备案过程中耗时最长的便是邮寄资料过去，等待阿里审核更新你的网站备案信息。
不足之处：
- 页面还是因为不熟悉前端底层，有一些bug需要修复
- 后端只是基本的逻辑实现，接下来需要加入新的技术，提高整体网站的性能。如：Redis缓存实现
- 针对博客页面的二级回复目前待完善。
- 博客的首页小世界栏目页面待完成。
- 上传图片到阿里云OSS存储对象的功能待完成。
- 全局搜索博客的功能待完成。
- SSL认证,http自动转https(完成)
- 各种语言代码都支持高亮显示(完成)
- 文章页面增加翻译单词功能(完成)
秉承开源原则，该项目完整代码均能在我的github上面下载得到。能够帮到有需要的朋友那是再好不过。
觉得博主的分享还不错，不妨在github上star一下博主，激励博主更新更多实用的功能。
项目地址一览： https://www.zengzhongjie.com
GitHub源码下载地址： https://github.com/Mretron
