wjg10086 / MyBlog

使用SpringBoot+MyBatis进行前后端开发的个人博客网站

MyBlog

项目链接：www.zhyocean.cn

关于本地开发

可直接导入该项目于本地，修改配置文件中的数据库连接信息，导入附带数据库结构的SQL文件可直接生成所有表，项目中使用到的关于阿里云功能还需开发者自行前往阿里云进行相应功能开通。

当你克隆项目到本地后可使用手机号：[phone]，密码：123456进行登录，也可自行注册并将其修改为最高管理权限。

项目介绍

• 关于项目，对于学习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.数据库连接池： Druid
  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
ORM	Mybatis
安全框架	SpringSecurity
缓存	Redis
项目构建	Maven
运行环境	阿里云Centos7

结构设计

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

业务设计

发布文章流程

登录流程

用户个人资料修改流程

打包、部署和运行

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

数据设计

用户表：user

名称	类型	长度	主键	非空	描述
id	int	11	true	true	主键，自增
phone	varchar	255	false	true	手机号
username	varchar	255	false	true	用户名
password	varchar	255	false	true	密码
gender	char	50	false	true	性别
trueName	varchar	255	false	false	姓名
birthday	char	100	false	false	生日
email	varchar	255	false	false	邮箱
personalBrief	varchar	255	false	false	个人简介
avatarImgUrl	varchar	255	false	true	头像url
recentlyLanded	varchar	255	false	false	最近登录时间

文章表：article

名称	类型	长度	主键	非空	描述
id	int	11	true	true	主键，自增
articleId	bigint	20	false	true	文章id
author	varchar	255	false	true	作者
originalAuthor	varchar	255	false	true	文章原作者
articleTitle	varchar	255	false	true	文章标题
articleContent	longtext	0	false	true	文章内容
articleTags	varchar	255	false	true	文章标签
articleType	varchar	255	false	true	文章类型
articleCategories	varchar	255	false	true	文章分类
publishDate	varchar	255	false	true	发布文章日期
updateDate	varchar	255	false	true	更新文章日期
articleUrl	varchar	255	false	true	文章url
articleTabloid	0	255	false	true	文章摘要
likes	int	11	false	true	文章喜欢数
lastArticleId	bigint	20	false	false	上一篇文章id
nextArticleId	bigint	20	false	false	下一篇文章id

评论记录表：comment_record

名称	类型	长度	主键	非空	描述
id	bigint	20	true	true	主键，自增
pId	bigint	20	false	true	父id
articleId	bigint	20	false	true	文章id
originalAuthor	varchar	255	false	true	文章原作者
answererId	int	11	false	true	评论者id
respondentId	int	11	false	true	被评论者id
commentDate	varchar	100	false	true	评论日期
likes	int	11	false	true	评论点赞数
commentContent	text	0	false	true	评论内容

开发流程

数据库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、微信、微博中功能
• 用户收藏文章功能