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
運行環境 阿里雲Centos
  • 結構設計


對於熟悉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、微信、微博中功能
  • 用戶可在線寫文章功能
  • 用戶收藏文章功能

以上就是我在博客網站搭建過程後的所有總結記錄,可能會有遺缺部分,等以後想起來了再來修改吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章