文字不夠，圖片來湊。

前言

為什麼想要搭建這個部落格？

我還記得，在大二寒假的某天，同往常一樣的在家解決這某個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全站加速。

• 環境

結構設計

對於熟悉Spring開發的朋友來說，相信對此結構也不會陌生。平時的開發過程中，結構設計是重要的環節，特別是協作開發的時候，明細的分包，模組化，可減少程式碼提交時的衝突。並且明確的結構有助於我們快速的尋找所對應的類。

業務設計

釋出文章流程

登入流程

使用者個人資料修改流程

打包、部署和執行

• 本專案採用Springboot的maven外掛進行打包，打包結果：****.jar
• 部署方式：使用 nohup java -jar ******.jar >******.log 2>&1 &的方式，後臺啟動專案，並在該路徑下生成執行日誌

資料設計

使用者表：user

文章表：article

評論記錄表：comment_record

開發流程

資料庫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就好啦，哈哈。如果搭建過程中有各種問題歡迎來騷。