javascript
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 |
| 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 | 生日 |
| 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、微信、微博中功能
- 用戶可在線寫文章功能
- 用戶收藏文章功能
以上就是我在博客網站搭建過程后的所有總結記錄,可能會有遺缺部分,等以后想起來了再來修改吧。
本人秉持開源原則,待后期網站功能完善之后會同步源碼至Github、碼云中。需要搭建個人博客的朋友歡迎使用本博客,只要給我個star就好啦,哈哈。如果搭建過程中有各種問題歡迎來騷。
更多了解,還請關注我的個人博客:www.zhyocean.cn
目前博客源碼已上傳至GitHub:https://github.com/zhyocean/MyBlog,歡迎star,有問題也可以加我QQ一起討論。
總結
以上是生活随笔為你收集整理的Springboot搭建个人博客系列的全部內容,希望文章能夠幫你解決所遇到的問題。