新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第1张图片

作者:曾中杰


有多少人只顾着眼前的六便士,却不曾抬头看看皎洁的月亮



项目地址一览: https://www.zengzhongjie.com

GitHub源码下载地址: https://github.com/Mretron

背景:

    博主是一名大二软件工程的学生。坚持学习课堂上未曾教授的java以及javaweb相关的知识,乃至学习Spring一系列的框架的过程尤为枯燥。每天看视频学习编程,“copy”视频中的代码运行让我就像是机器一样日复一日地重复着那些操作。而使得我能够坚持下去的兴趣,就是能够在不久的将来完成我自己的项目。也就有了我的个人博客网站。

网站一览:

首页

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第2张图片


分类页面

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第3张图片


归档页面

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第4张图片


后台管理页面

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第5张图片


后台发布文章页面

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第6张图片

技术组合:

  • 后端: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功能规划

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第7张图片

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 最近更新时间
email varchar 255 false true 用户的邮箱地址

4.2应用分层

新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)_第8张图片

5、开发流程

5.1开发

  • 刚开始使用手绘或者专门的画图工具画出网站的原型
  • 在WebStorm中通过semantic UI根据设计的原型将前端网页码出来
  • 接着使用IDEA,构建SpringBoot环境进行后端的编写
  1. dao持久层通过接口继承JPARepository即可得到CRUD的标准方法,如果需要特定的查询方法,根据Jpa命名规则或者使用@Query注解即可
  2. service业务逻辑层先编写一系列接口及其想实现的方法,再通过类去实现相应的接口,注意添加@Service注解放进IOC容器中。提供给Controller层调用
  3. 在service业务逻辑层的实体类中的方法加上@Transactional事务注解,实现开启事务
  4. Web层的Controller再通过依赖注入service即可完成相应的业务逻辑
  5. 通过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

你可能感兴趣的:(程序人生)