前端原始碼地址: github.com/CB-ysx/mybl…
部落格介面原始碼: github.com/CB-ysx/mybl…
部落格線上地址: codebear.cn
前言
該部落格於2018年7月開始開發，8月完成並上線第一個版本，至今處於優化+新增新功能...
為何搭建個人部落格
一直想搭建自己的個人部落格，寫部落格可以記錄我的學習筆記、總結經驗、分享技術等等。嘗試過csdn、部落格園、hexo寫部落格，但作為一名程式猿，還是想擁有屬於自己的個人部落格！
為何使用vue+php搭建部落格
- 最初接觸vue是今年年初的時候，我的畢業設計是做一個二手車銷售網站（呃(⊙o⊙)…一開始看到這題目我是拒絕的，因為我想做android，沒辦法，老師不給換題目）。這個時候我的前端知識還處於html+css+單純js或jq實現的階段，慢慢在網上了解到vue，瞭解到vue
提供了響應式 (Reactive) 和元件化 (Composable) 的檢視元件，這正是我喜歡的，所以就用vue寫畢業設計，之後就一發不可收拾，接連寫了(用Vue實現海報排版設計功能)、視訊播放網站。這次就決定用vue寫個個人部落格。 - 記得兩三年接觸的php，當時是跟朋友一起做專案，用的thinkphp（不過當初我做的是前端，php就瞭解一下），之後就一直做android，也是因為我的畢業設計，才開始重新使用php，選擇了最容易上手的ci框架，邊學邊做畢業設計，也慢慢封裝了一個方便使用的專案（基本只需寫controller和model，配置router、資料庫就行），所以這次部落格也就選擇這個來開發，速度快些。
使用的伺服器、技術棧、庫
專案放在我的阿里雲ECS（學生機）上，圖片上傳到七牛
- php（ci框架）
- vue
- vue-router
- vuex-router-sync
- vuex
- web-storage-cache
- element-ui
- axios（網路請求）
- cropperjs（圖片裁剪，後臺管理系統中使用）
- highlight.js（程式碼高亮）
- marked（markdown文字轉html）
- mavon-editor（markdown編輯器）
- moment（日期處理）
- photoswipe（檢視大圖）
部落格介面主題
參考hexo的next主題，根據自己的喜好和審美觀稍作修改。
實現
效果圖
由於gif壓縮比較模糊，可移步到部落格直接瀏覽codebear.cn
-
移動端
-
pc端
php寫部落格介面
-
專案結構
-
返回值helper
success_result、fail_result這兩個方法是介面返回的json結構，success、fail這兩個方法是model返回給controller的json結構，這樣封裝統一返回介面，比較好管理。
-
後臺管理許可權檢查
這裡我使用了token作為許可權認證，每次登陸都會重新生成一個新的token以及更新有效期，儲存進資料庫。 在Common_model中實現token檢查：
部落格
後臺管理系統與部落格寫在同一個專案裡，使用vue-cli腳手架的專案，自己再改造一下。因為首屏載入慢問題，一些庫（vue、element-ui等在非dev模式下改成由cdn載入）。
部落格： 首頁（最新文章列表）、分類/標籤、歸檔、關於、友鏈、文章、文章列表、個人簡歷、搜尋
後臺管理系統： 首頁（資料統計顯示）、文章管理（釋出、編輯、刪除、預覽等）、評論管理（回覆、刪除）、分類/標籤管理（新增、刪除、編輯）、網站配置（關於、簡歷、頭像等）
一些共用元件： 評論模組（表情實現參考jquery 表情輸入框，可存資料庫）、markdown文章顯示模組（使用marked解析（釋出的時候解析成html存進資料庫的）、highlight.js處理程式碼高亮、photoswipe實現大圖預覽）、圖片裁剪上傳（el-upload+cropperjs）、文章目錄（根據html自動生成）
-
專案結構
-
axios封裝統一處理
總結
寫這個部落格系統初版用了大概一個月時間，現在陸陸續續在優化以及新增新功能~學到了cdn載入、圖片dataUrl轉blob、動畫效果、pc移動自適應等知識。每一次做專案都是在不斷學習，不斷進步~
前端原始碼地址: github.com/CB-ysx/mybl…
部落格介面原始碼: github.com/CB-ysx/mybl…
部落格線上地址: codebear.cn