博客系统 SSM 超强硬核良心推荐之第一弹 - 预备工作

「爱情、让人受尽委屈。」 2024-03-27 16:57 5阅读 0赞

#### 硬核 ! 从 0 到 1 完美实现 SSM 版本的博客系统 , 学会保准不吃亏! ####

*  一 . SSM 版本相比于 Servlet 版本的亮点
 *  二 . 初始化数据库
 *  三 . 前端页面
 *   *  3.1 注册页面
     *  3.2 登录功能
     *  3.3 文章总列表页
     *  3.4 自己的文章列表页
     *  3.5 文章详情页
     *  3.6 编写博客页面

> 大家好 , 这是新的专栏 , 博客系统 SSM 版本  
> 博客系统很常见 , 这是一个大多数新手都会去做的系统  
> 市面上的资料错综复杂 , 博主带大家从最开始一步一步实现一个完整的博客系统  
> 让大家不会感觉特别困惑 , 也不会再去浪费时间搜寻各种资料  
> 欢迎大家来阅读这个专栏  
> ![a26c0cd8dabb4821b33be88bccfe77a7.png][]

## 一 . SSM 版本相比于 Servlet 版本的亮点 ##

1.  框架升级 : Spring Boot + Spring MVC + MyBatis + MySQL + Redis + jQuery
2.  密码升级 : 明文存储与 md5 存储是不安全的 , 我们会将密码进行加盐处理
3.  用户登录状态持久化升级 : 以前的 session 是在内存中存储的 , 我们将 session 存储到 MySQL / Redis 中 , 实现分布式存储

> session 是在内存中存储有两个弊端 :
> 
> 1.  当你的后台服务器重启之后 , 之前的登录信息就没了
> 2.  如果把 session 放到内存中的话 , 程序就只支持单机部署 , 不支持分布式
> 
> (张三登陆的时候 , 把登录信息存在了 主机 A 的内存中 , 一会之后 , 张三进行点击操作 , 这时候 , 是 主机 B 来服务张三的 , 但是 主机 B 的内存中并没有张三的登录信息 , 所以就会让张三重新登陆 , 这明显是不合理的)

1.  实现分页功能
2.  在项目中引入拦截器 , 升级用户的登录验证

还可以额外实现的功能有 :

1.  文章保存草稿
2.  文章定时发布功能
3.  用户多次登录 , 账号冻结的业务

> 用一个变量记录错误登录次数 , 超过一个值就把账号冻结

1.  评论功能
2.  个人中心(修改密码)
3.  找回密码
4.  登陆的时候添加图片验证码 , 增加系统的安全性
5.  点赞功能
6.  …

## 二 . 初始化数据库 ##

![20232481750.bmp][]

## 三 . 前端页面 ##

前端页面也是不需要我们自己去实现的 , 这里也把前端页面直接分享给大家  
点击即可下载  
[博客系统(静态页面)-2023.zip][-2023.zip]  
我们就带大家来看一眼每个页面的模样

### 3.1 注册页面 ###

![image.png][]  
注册的时候有三个字段 : 用户名、密码、确认密码  
其中确认密码是确保用户输入错误 , 如果用户第一次输的太快 , 就可能输入错误 , 确认密码就会保证用户两次输入结果相同 , 保证用户密码输入正确 .  
数据库中是没有确认密码的字段的 , 不会提交数据给后端  
当用户输入完成之后 , 点击提交 . 页面就会发送一个 ajax 请求给后端 , 后端拿到数据之后会做非空校验 , 验证没有问题就会向用户表中插入一条数据 , 插入数据之后再把插入的结果返回给前端 . 前端根据返回的结果进行不同的提示 .

### 3.2 登录功能 ###

![image.png][image.png 1]  
登陆的时候 , 用户只需要输入用户名和密码 , 然后点击提交即可  
登录和注册其实是很像的 , 但是登录功能在数据库中是查询操作  
当用户输入完用户名和密码之后 , 点击提交 , 前端就会发送一个 ajax 请求给后端 , 后端拿到 ajax 请求之后 , 会先进行非空校验 , 非空校验没问题之后会去数据库中查询账号密码是否正确 , 然后将结果返回给前端 , 前端根据返回的状态码进行不同操作

### 3.3 文章总列表页 ###

![image.png][image.png 2]  
在最下面 , 我们实现了分页功能

### 3.4 自己的文章列表页 ###

![image.png][image.png 3]  
其中 , 我们这个页面可以点击 查看原文 , 点击之后就会跳转到详情页面

### 3.5 文章详情页 ###

![image.png][image.png 4]  
后续我们还可以实现展示阅读量

### 3.6 编写博客页面 ###

![image.png][image.png 5]  
我们的修改文章也可以使用这个页面  
当 URL 后面没有任何参数的时候 , 访问的就是编写博客的页面  
如果我们在 URL 后面添加了 `?id=1`的话 , 那我们就认为他是修改文章 , 就会拿到 URL 里面的参数 , 发送 ajax 请求给后端 , 查询到当前这篇文章的信息之后 , 返回给前端进行显示 , 显示出来之后再点击发布文章 , 这时就是修改文章了 .

--------------------

到这里 , 准备阶段就结束了 , 接下来 , 就会带大家实现核心代码  
下一篇博客再见~  
![在这里插入图片描述][71fa82d650734eb88209a878b927691f.gif_pic_center]

[a26c0cd8dabb4821b33be88bccfe77a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/37f737c79f3941c1a6751a0696636813.png
[20232481750.bmp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/95eac3668c5344ef82f411cd5306225a.png
[-2023.zip]: https://www.yuque.com/attachments/yuque/0/2023/zip/28016775/1675408778710-db5d3282-fa3e-4cec-aa30-272c16e18cbd.zip?_lake_card=%7B%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2023%2Fzip%2F28016775%2F1675408778710-db5d3282-fa3e-4cec-aa30-272c16e18cbd.zip%22%2C%22name%22%3A%22%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F%28%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2%29-2023.zip%22%2C%22size%22%3A12600771%2C%22ext%22%3A%22zip%22%2C%22source%22%3A%22%22%2C%22status%22%3A%22done%22%2C%22download%22%3Atrue%2C%22taskId%22%3A%22uc948e584-671c-454d-8b6a-412374c8d7c%22%2C%22taskType%22%3A%22upload%22%2C%22type%22%3A%22application%2Fx-zip-compressed%22%2C%22__spacing%22%3A%22both%22%2C%22mode%22%3A%22title%22%2C%22id%22%3A%22u5d07bbd2%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22card%22%3A%22file%22%7D
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0bec5699b229433cbaf284ea1b1290cc.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/afd010247e2e4104bf9a400a1b4c25f0.png
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3a0ffaa7e14041779aeedf3d4c981032.png
[image.png 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5f65ac4ae2814c5e9f71784e3be3bcbb.png
[image.png 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6f6851d6a3bf4df5b183fa29e0310329.png
[image.png 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5aaae43e9dd0414f851097771f63f0c8.png
[71fa82d650734eb88209a878b927691f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/36aaa7c82c8b4704b2d99258e0f1067d.png