SpringBoot之从零搭建博客网站(可提供源码)

文字不够,图片来凑。

前言

为什么想要搭建这个博客?

我还记得,在大二寒假的某天,同往常一样的在家解决这某个bug,不停地问度娘,很巧的碰到了一个同行在他的博客中完美的记录了我的bug的解决方案,随后我又看了看他写的其他博客文章,觉得都非常的不错,并且同时也被他博客网站的简约清新吸引,也就在那刻,心中埋下了准备自己搭建myblog的种子…

于是在寒假的时候我就开始了Bootstrap了的学习,然后好像也并没有什么卵用,因为还是不会用~~~

就这样一直拖了大概有3个月,某天我才意识到我好像有件很重要的事没完成,就是这么的突然,毫无准备的就开始了博客的搭建。

自己在本子上设计了网站的所有页面的大致样式(也借鉴了许多大佬的博客样式,哈哈,我承认我审美不是很好),列出了应该有的功能,当时看来并不算多,也给自己定了一个目标期限,在7月5日之前上线,不错有了目标也就有了动力,就这么开始干了。

一件事情在开头总是想的很美好,然而事实总会跟你对着干。在博客搭建的过程中遇到了无数多的前端页面设计bug,我在此之前也可以算的上是个前端小小白,很是无奈,不过还是要在这里感谢翼灵工作室里帮我解决了许多bug的波波、田小宇和杨小卿,没有你们估计我的博客还得推迟半年才能上线吧,O(∩_∩)O哈哈~

6、7月也恰好是考试月,堆积在一起的无数们考试如暴风雨一样一夜袭来,一学期欠的帐总该还了,不得不放下手中的网站专心去备考,于是乎,完美的错过了本该上线的时间。

编程是个脑力活,如果把它做成了体力活,这就代表是时候改变一下了

文章概述

  • 关于项目,对于学习Springboot是个挺不错的练手项目,可以让你在烦恼的业务逻辑中保持一颗纯洁的心
  • 如何从零开始,使用Springboot开发项目
  • 开发前的一些准备工作,以及思考项目整体结构与思路
  • 记录开发过程中遇到的一些难题以及bug
  • 总结目前博客网站的一些优缺点
  • 思考整个项目有哪些可以优化的地方,以及有哪些可增加的功能

页面展示

首页展示



文章编辑



后台管理



用户个人中心

项目需求

项目背景

对于初学Springboot的朋友来说,最好的一个学习方式就是那一个功能俱全的项目来练练手,通过自己重构项目来发现其中的潜在难题,并且也能很好的在编码过程中总结和发现问题、解决问题。使用Springboot开发的博客系统,简单并且实用,适合做练手项目。

功能需求

主页
  • 博客汇总,以列表形式展示文章,并附上文章作者、发布日期、分类情况以及文章简要

  • 能够以分类形式查看文章

  • 能够以时间列表方式归档文章

  • 可实现通过标签查找所有相关文章

  • 个人介绍、联系方式

  • 博客网站更新记录

  • 友链链接

后台管理
  • 网站仪表盘,记录网站访客量情况

  • 文章管理
    1.分页展示文章信息
    2.可对文章进行再编辑以及删除文章

  • 发布文章
    1.使用markdown编辑器,支持插入代码,插入图片等功能
    2.文章可选择分类和标签,以及转载文章支持链接原作者文章

  • 分类管理,支持增加、删除、修改分类

  • 友情链接
    1.支持增加友情链接
    2.支持删除友情链接

  • 反馈信息管理,可查看用户反馈信息

安装部署需求

  • 可以使用docker方式部署,也可支持-jar方式
  • 使用springboot自带方式打包

非功能需求

性能需求
  • 首页响应时间不超过2秒钟
  • 文章页响应时间不超过3秒钟

项目设计

总体设计

  • 本项目用到的技术和框架
    1.项目构建:Maven
    2.web框架:Springboot
    3.数据库ORM:Mybatis
    4.数据库连接池: HikariCP
    5.分页插件:PageHelper
    6.数据库:MySql
    7.缓存:Redis
    8.前端模板:Thymeleaf
    9.文章展示:Editor.md

  • 本项目中的关键点
    1.采用Springboot开发,数据库使用连接池加orm框架的模式,对于系统的关键业务使用Redis缓存,加快相应速度。
    2.整体系统采用门户网站+后台管理+用户个人中心的方式搭建,门户网站展示博客内容以及博主介绍,后台管理用于编辑文章,查看反馈,管理评论留言。
    3.使用阿里云OSS进行静态资源存储,以及CDN全站加速。

  • 环境

工具名称
开发工具IDEA
语言JDK1.8、HTML、css、js
数据库Mysql5.6
项目框架SSM
ORMMybatis
安全框架SpringSecurity
缓存Redis
项目构建Maven
运行环境阿里云Centos7

结构设计


对于熟悉Spring开发的朋友来说,相信对此结构也不会陌生。平时的开发过程中,结构设计是重要的环节,特别是协作开发的时候,明细的分包,模块化,可减少代码提交时的冲突。并且明确的结构有助于我们快速的寻找所对应的类。

业务设计

发布文章流程

登录流程

用户个人资料修改流程

打包、部署和运行

  • 本项目采用Springboot的maven插件进行打包,打包结果:****.jar
  • 部署方式:使用 nohup java -jar ******.jar >******.log 2>&1 &的方式,后台启动项目,并在该路径下生成运行日志

数据设计

用户表:user
名称类型长度主键非空描述
idint11truetrue主键,自增
phonevarchar255falsetrue手机号
usernamevarchar255falsetrue用户名
passwordvarchar255falsetrue密码
genderchar50falsetrue性别
trueNamevarchar255falsefalse姓名
birthdaychar100falsefalse生日
emailvarchar255falsefalse邮箱
personalBriefvarchar255falsefalse个人简介
avatarImgUrlvarchar255falsetrue头像url
recentlyLandedvarchar255falsefalse最近登录时间
文章表:article
名称类型长度主键非空描述
idint11truetrue主键,自增
articleIdbigint20falsetrue文章id
authorvarchar255falsetrue作者
originalAuthorvarchar255falsetrue文章原作者
articleTitlevarchar255falsetrue文章标题
articleContentlongtext0falsetrue文章内容
articleTagsvarchar255falsetrue文章标签
articleTypevarchar255falsetrue文章类型
articleCategoriesvarchar255falsetrue文章分类
publishDatevarchar255falsetrue发布文章日期
updateDatevarchar255falsetrue更新文章日期
articleUrlvarchar255falsetrue文章url
articleTabloid0255falsetrue文章摘要
likesint11falsetrue文章喜欢数
lastArticleIdbigint20falsefalse上一篇文章id
nextArticleIdbigint20falsefalse下一篇文章id
评论记录表:comment_record
名称类型长度主键非空描述
idbigint20truetrue主键,自增
pIdbigint20falsetrue父id
articleIdbigint20falsetrue文章id
originalAuthorvarchar255falsetrue文章原作者
answererIdint11falsetrue评论者id
respondentIdint11falsetrue被评论者id
commentDatevarchar100falsetrue评论日期
likesint11falsetrue评论点赞数
commentContenttext0falsetrue评论内容

开发流程

数据库CRUD
  • controller层中编写前端接口,接收前端参数
  • service层中编写所需业务接口,供controller层调用
  • 实现service层中的接口,并注入mapper层中的sql接口
  • 采用Mybatis的JavaConfig方式编写Sql语句。由于并没有使用Mybatis的逆向功能,需要自己手写所有sql语句
  • 关于事务的实现,在启动类中开启事务,并在service层需要实现事务的业务接口上使用@Transactional注解,还是十分方便的
  • 本项目开发并不是很难,只是在业务的实现上比较复杂
页面与展示
  • 作为一名后端开发,对于css的功力有所欠缺,这里我使用了妹子UI主题,极大的减少了页面的开发难度,特此感谢
  • 前端页面与后端的交互主要是在controller包中,并使用Thymeleaf渲染页面。
  • 自定义异常处理页面,通过重写WebMvcConfigurerAdapter实现自动跳转到404、403页面
其他功能
  • 使用lazyload插件实现页面图片懒加载
  • 后台实时记录当天访客量,便于了解博客日常访问量
  • 分析访问量最多的数据,主要在于文章访问部分,将文章放入redis缓存。每次编辑完文章后,更新缓存
  • 使用阿里云互联网中间件的业务实时监控服务,对于网站性能的了解以及优化有很大的帮助
网站建设
  • 服务器选用的是阿里云centos7
  • 域名是阿里云上购买的.cn的域名
  • 网站备案以及公安机关备案,后者备案时间较短但是那个备案网站经常挂掉,所以公安机关备案还得看运气。而网站备案时间就比较长了,按照阿里云的流程走大概1个月左右时间,需要上传个人身份信息以及邮寄个人资料过去。
  • 网站配置了安全证书,可实现https访问以及自动从http跳转到https

总结

开发中遇到的难点

  • 要实现在一个页面进行权限验证,如果验证不成功会跳转到登录界面,并且登录成功后还要返回到之前界面,这里由于对SpringSecurity内部原理的不了解,所以我这里采用的方法是利用请求头和响应头存储url,并在登录成功后的页面出跳转到响应头中存储的url处
  • 上传头像处使用上传头像至阿里云的OSS对象存储中,由于上传问题并没有返回上传成功后的图片url地址,于是只好设置OSS的Bucket为公共读权限,然后当上传成功后手动拼接图片url并存入数据库
  • 项目中最大的难点还是莫过于页面css的设计,但是使用了妹子UI后极大的解决了这个问题,只需修改少量css就能实现自己所需要的样式

博客网站优缺点

  • 首先最大的一个缺点就是在前端页面设计过程中混用了一些Bootstrap,导致依赖过于复杂,不便于后期修改,已经网站上有一些隐藏的bug
  • 对于页面用户体验以及反馈功能的设计便于用户对于浏览过程中出现的问题进行反馈
  • 后端部分明确的分工有利于项目的理解与维护

项目整体优化

  • 目前项目首页以及文章页响应时间过长,后期最好优化到1s响应时间
  • 定时定期进行数据库的备份,防止出现网站被攻击后数据丢失的风险
  • 写文章部分目前仅支持插入网络图片,无法从本地上传图片
  • 手机端浏览文章页面会出现代码自动换行问题,不便于浏览过程

未来需增加的功能

  • 增加文章分享至QQ、微信、微博中功能
  • 用户可在线写文章功能
  • 用户收藏文章功能

以上就是我在博客网站搭建过程后的所有总结记录,可能会有遗缺部分,等以后想起来了再来修改吧。

本人秉持开源原则,待后期网站功能完善之后会同步源码至Github、码云中。需要搭建个人博客的朋友欢迎使用本博客,只要给我个star就好啦,哈哈。如果搭建过程中有各种问题欢迎来骚。

更多了解,还请关注我的个人博客:www.zhyocean.cn

目前博客源码已上传至GitHub:https://github.com/zhyocean/MyBlog,欢迎star,有问题也可以加我QQ一起讨论。

<p> <span style=&quot;color:#4d4d4d;&quot;>当前课程中博客项目的实战源码是我在 GitHub上开源项目 My-Blog,目前已有 2000 多个 star:</span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><img src=&quot;https://img-bss.csdnimg.cn/202103310649344285.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;>本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,<span style=&quot;color:#565656;&quot;>通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你以根据自己的需求和想法进行改造,也以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。</span></span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><span style=&quot;color:#565656;&quot;>&nbsp;</span></span> </p> <p> <span style=&quot;color:#e53333;&quot;><span style=&quot;color:#e53333;&quot;><strong>课程特色</strong></span></span> </p> <p> <span style=&quot;color:#e53333;&quot;><span style=&quot;color:#e53333;&quot;><strong>&nbsp;</strong></span></span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><span style=&quot;color:#565656;&quot;> </span></span> </p> <ol> <li> <span style=&quot;color:#565656;&quot;>课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。</span> </li> <li> <span style=&quot;color:#565656;&quot;>开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。</span> </li> <li> <span style=&quot;color:#565656;&quot;>实践项目页面美观且实用,交互效果完美。</span> </li> <li> <span style=&quot;color:#565656;&quot;>包含搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。</span> </li> <li> <span style=&quot;color:#565656;&quot;>技术栈新颖且知识点丰富,学习后以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。</span> </li> </ol> <p> <strong>实战项目预览</strong> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><span style=&quot;color:#565656;&quot;><span style=&quot;color:#e53333;&quot;><strong>&nbsp;</strong></span></span></span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><img src=&quot;https://img-bss.csdn.net/202005150303066258.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p> &nbsp; </p> <p> <span style=&quot;color:#4d4d4d;&quot;>&nbsp;</span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><img src=&quot;https://img-bss.csdn.net/202005150305396930.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;>&nbsp;</span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><img src=&quot;https://img-bss.csdn.net/202005150305528842.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;>&nbsp;</span> </p> <p> <span style=&quot;color:#4d4d4d;&quot;><img src=&quot;https://img-bss.csdn.net/202005150306056323.png&quot; alt=&quot;&quot; /><br /> </span> </p>
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值