SpringBoot+shiro+vue搭建博客完整版(可供源码、数据库)

叁歲伎倆 2023-07-21 06:14 14阅读 0赞

> 前言  
> 人生在世,应无所住; 如果年轻,追着风走;如果相信,跟着爱走; 如果可以,随着心走;如果留恋,带着梦走;如果没有如果,也不该停留

##### 为什么写博客？ #####

其实毕业到现在也有大半年的时间，很早就想搭建一个属于自己的博客网站，奈何性子总爱拖拖拉拉，刚好赶上春节的这段疫情才下定决心来完成，顺便自检一下自己半年来能力的提升，能力水平有限网站没有做得很好，还希望大家见谅！

故事的开始总是充满着激情和期待，然而故事的发展总不会那么顺利，在页面的设计和搭建上实在是太难顶了，配色以及排版还有无数数不清的bug对于我这种前端小白来说实在是太痛苦了。UI设计本想着找人来排一版，奈何微薄的工资让我实在是不忍，那就算了吧，将就着看吧，后续在慢慢优化UI。  
在此，感谢公司的友爱、热心的同事帮忙解决bug和在前端上一些设计的思路。不然我寻思着还得往后稍一稍才能完成。

##### 部分页面展示 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]

###### 大佬友链 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 1]

##### 文章归类 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 2]

#### 后台展示 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 3]

##### 文章录入 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 4]

##### 项目结构 #####

**前端：**  
1.基于webpack4.x搭建的vue  
2.使用了AmazeUI和ElementUI(掺杂了一块 – ！)  
3.后台管理这块使用了markdown插件加单实现文章的录入和修改。  
**后端**  
1.Springboot  
2.Shiro  
3.Redis  
4.项目构建:Maven  
5.数据库ORM：Mybatis  
6.数据库：MySql  
7.使用Swagger2生成了API了文档，便于测试与查找。  
基于idea、jdk1.8开发，服务器使用的腾讯云centos7

##### 主要实现功能 #####

**主页模块：**

博客汇总，展示最近发布的文章，对文章进行分类可以通过专栏找到相关文章,个人介绍、联系方式、友链链接、留言、程序人生主要展示一些无关技术的文章，记录生活和吐槽。  
**后台管理**  
目前支持文章录入和修改。功能较少，此处暂不对外提供。  
主要实现是用shiro进行了权限控制  
(初次登录->赋予用户角色权限->存储到redis->返回token->进行文章管理->判断是否有登录->如果登录判断是否有权限，如果没有登录跳转登录页面)。

##### 数据表 #####

用户表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 5]  
文章表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 6]  
分类表  
![在这里插入图片描述][20200402223226643.png]  
文章分类表  
![在这里插入图片描述][20200402223247663.png]  
标签表  
![在这里插入图片描述][2020040222330214.png]  
文章标签表  
![在这里插入图片描述][20200402223315855.png]  
留言表  
![在这里插入图片描述][20200402223145344.png]  
留言关联表  
![在这里插入图片描述][2020040222320723.png]  
表建的可能不是很规范，暂且凑合着用吧。

**网站缺点:**  
1.目前无法修改个人信息（个人中心还在开发中）  
2.对于篇幅较长的文章响应时间稍微有点久。  
3.没有流量统计。  
4.混杂了两种UI不利于后期维护。  
**正在修改目标**  
1.开发个人中心模块  
2.开通文章评论，及登录用户可收藏文章。  
3.流量统计。

另外，主要针对PC端访问，不过对手机端也做了一些适当的优化，在这还希望用手机浏览的朋友们发现bug及时提醒一下，在此感谢。

以上就是我在博客网站搭建过程后的所有总结记录，可能比较简陋，会及时补充，还请见谅！

博客首页:[http://www.cxhorange.com][http_www.cxhorange.com]  
数据结构：[百度网盘][Link 1] 密码:4o3c  
后端代码:[github][]  
前端代码:[github][github 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]: /images/20230528/b792f5f5cf6b418dad5a138b9c239dca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 1]: /images/20230528/1ae4f82614af48b09279e6e2c44537a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 2]: /images/20230528/6005a86565be4da68bd8062c35814d61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 3]: /images/20230528/36031986f743421f876ef0fc970181fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 4]: /images/20230528/f2ff243f6f9243c1ac464f253f2e3d3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 5]: /images/20230528/30f6728aef614d5ab1a32b1e94c98bd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70 6]: /images/20230528/02d692a825d54fd6b993b040a294b723.png
[20200402223226643.png]: /images/20230528/b6cceab0d96049e08a13e1cf3eece5f4.png
[20200402223247663.png]: /images/20230528/638b737732bb4794a335385c603b04b0.png
[2020040222330214.png]: /images/20230528/6012a952cec64a8bb01c3e2c51803ea3.png
[20200402223315855.png]: /images/20230528/8e37878eaee74b159981343e21bbd37d.png
[20200402223145344.png]: /images/20230528/d001e360c1164a7faa60d5a536587b4a.png
[2020040222320723.png]: /images/20230528/22e47484b9464957a8b6c2787478629a.png
[http_www.cxhorange.com]: http://www.cxhorange.com/
[Link 1]: https://pan.baidu.com/s/1JtzYcYoN4se8jLQIK63hgg
[github]: https://github.com/Ccc-xh/blog
[github 1]: https://github.com/Ccc-xh/blog_vue