image.png

一、为啥要搭建博客网站

  1. 有了之前的那个版本(SpringBoot-Web)之后,相当于网站的基本搭建和部署都没啥问题,关键是网站的内容比较low(就一个登录,和一个用户列表展示,以及用户的CRUD),关键是还要登录才能看到里面的内容,并不能提现网站的特色。于是就萌生了一个想法:搭建一个博客系统(这样既可以写博客记录自己的工作中遇到的问题,所学习的技术栈,也为了有更好的内容展示,也为了后期找工作的时候,面试的谈资吧)

二、怎么搭建博客网站

  1. 首先去看别人怎么搭建网站,应为我是学Java的,所以肯定要用SpringBoot技术、前端的技术最好是用目前比较流行的Vue(虽然Vue我不太会,但是我可以学啊,早在2019年,我就用脚手架写了自己的第一个Vue-demo)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22448323/1652078056184-935b7dc4-7fbc-4340-ab91-c15601a96e6a.png#clientId=u30e197dc-5627-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=719&id=u82665179&margin=%5Bobject%20Object%5D&name=image.png&originHeight=647&originWidth=671&originalType=binary&ratio=1&rotation=0&showTitle=false&size=124154&status=done&style=stroke&taskId=uf64256ef-fd3f-4318-ba4e-8f7db75db10&title=&width=745.5555753060335)<br />登录B站(bilibili)搜索:SpringBoot+Vue搭建个人博客系统<br />![08a8777fd54bd898fd3681a574886e4.png](https://cdn.nlark.com/yuque/0/2022/png/22448323/1652078299898-25cabc9b-072f-4fea-98b3-d76c497007e9.png#clientId=u58e3d4bd-2b51-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=613&id=u5467a31f&margin=%5Bobject%20Object%5D&name=08a8777fd54bd898fd3681a574886e4.png&originHeight=552&originWidth=1903&originalType=binary&ratio=1&rotation=0&showTitle=false&size=342042&status=done&style=stroke&taskId=u659422b8-0b61-4ba7-8d9e-98c30cd0442&title=&width=2114.444500458095)<br /> 这就是我现在使用博客的系统(在这里特别感谢武哥,很慷慨的给了源码,在项目中有问题向他提问他还会耐心解答,感谢大佬)各位在B站看到记得一键三连哦~<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22448323/1652078385495-811dfa20-d255-4af4-8cf0-1751c9619da4.png#clientId=u58e3d4bd-2b51-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1032&id=u143db448&margin=%5Bobject%20Object%5D&name=image.png&originHeight=929&originWidth=1778&originalType=binary&ratio=1&rotation=0&showTitle=false&size=544403&status=done&style=stroke&taskId=u76ae75ca-b449-4691-a6f5-1fea10af94e&title=&width=1975.5556078899067)<br /> 首先这个界面的排版和风格是我很喜欢的,里面的内容设计和管理员后台维护更新博客都做的很好。首页无需登录就可以访问博客文章,可以留言(需要游客注册登录),点赞等功能,超级管理员可以登录后台进行博客的发布修改操作。(更具体的介绍可以去B站搜索他的视频,里面有详细解释)<br />这里附上源码的项目结构:<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22448323/1652079074493-fb67dd25-c0cf-4ac9-beb8-5031ba6700b0.png#clientId=u58e3d4bd-2b51-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=992&id=u734b0818&margin=%5Bobject%20Object%5D&name=image.png&originHeight=893&originWidth=514&originalType=binary&ratio=1&rotation=0&showTitle=false&size=479543&status=done&style=stroke&taskId=u397c548b-c661-411c-afbf-16aa25bacc8&title=&width=571.1111262403892)<br />他的前端页面都放在resource目录下:

image.png
三、优化该博客系统

1.为哈需要优化?

  1. 因为项目里面用到了图片上传,前端显示照片的时候,都是用的localhos:8080+图片文件路径显示的,项目部署上线后,图片加载不出来,(这么好看的网站,图片加载不出来是不能容忍的,所以决定在此基础上优化)。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22448323/1652079389349-91d3bf12-ebf8-4c65-bfa6-34e5bd4d800d.png#clientId=u58e3d4bd-2b51-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=573&id=uf5f3bc75&margin=%5Bobject%20Object%5D&name=image.png&originHeight=516&originWidth=894&originalType=binary&ratio=1&rotation=0&showTitle=false&size=68153&status=done&style=stroke&taskId=u3225a4a5-27e2-4de3-91cf-b99133d6540&title=&width=993.3333596476809)

2.如何优化?

这个问题我也问过武哥,也在网上搜索了一些解决办法
9965bc03fe388fcc245c35891765617.png
image.png
但是这个方法感觉比较鸡肋只是能勉强展示图片,如果再添加上传照片,图片展示还是会有问题(于是这里准备优化成使用阿里云的OSS文件存储来做图片的上与展示)
还有一个问题就是该项目是前后端不分离的,前端页面都在Java项目里面的俗称.《All in One》,我想把该博客拆分成前后端分离的项目,前端用vue脚手架搭建,后台只负责提供接口。
当然,既然决定重新做,那就只能参考该博客的大致样式,后端代码自己动手重写(用MyBatisPlus自动生成基础代码,后台的接口还是比较方便的,毕竟不涉及复杂的业务逻辑),数据库都要自己重新设计,还有就是上线后,发现首页加载的数据(主要是图片)比较慢,这里考虑把首页的数据加上Redis缓存,增加浏览体验。(也不知道是不是服务器内存太小的问题,后面做完了,如果效果还是不理想,就要考虑提升阿里云服务器内存了,想到这经费又要燃烧啊~)