原文鏈接：http://codebear.cn/article?id=h2IJZNg7YkvwAIlK7MSXi

1.png

前端源碼地址: https://github.com/CB-ysx/myblog
博客在線地址: http://codebear.cn

前言

該博客于2018年7月開始開發(fā)跟畅，8月完成并上線第一個版本，至今處于優(yōu)化+添加新功能...

為何搭建個人博客

一直想搭建自己的個人博客财岔，寫博客可以記錄我的學(xué)習(xí)筆記诫舅、總結(jié)經(jīng)驗已艰、分享技術(shù)等等逞盆。嘗試過csdn、博客園晤揣、hexo寫博客桥爽，但作為一名程序猿，還是想擁有屬于自己的個人博客昧识！

為何使用vue+php搭建博客

• 最初接觸vue是今年年初的時候钠四，我的畢業(yè)設(shè)計是做一個二手車銷售網(wǎng)站（呃(⊙o⊙)…一開始看到這題目我是拒絕的，因為我想做android跪楞，沒辦法缀去，老師不給換題目）。這個時候我的前端知識還處于html+css+單純js或jq實現(xiàn)的階段甸祭，慢慢在網(wǎng)上了解到vue缕碎，了解到vue<code>提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件</code>，這正是我喜歡的池户，所以就用vue寫畢業(yè)設(shè)計咏雌，之后就一發(fā)不可收拾，接連寫了(用Vue實現(xiàn)海報排版設(shè)計功能)校焦、視頻播放網(wǎng)站赊抖。這次就決定用vue寫個個人博客。
• 記得兩三年接觸的php寨典，當(dāng)時是跟朋友一起做項目氛雪，用的thinkphp（不過當(dāng)初我做的是前端，php就了解一下）耸成，之后就一直做android报亩，也是因為我的畢業(yè)設(shè)計，才開始重新使用php井氢，選擇了最容易上手的ci框架弦追，邊學(xué)邊做畢業(yè)設(shè)計，也慢慢封裝了一個方便使用的項目（基本只需寫controller和model花竞，配置router骗卜、數(shù)據(jù)庫就行），所以這次博客也就選擇這個來開發(fā)，速度快些寇仓。

使用的服務(wù)器举户、技術(shù)棧、庫

項目放在我的阿里云ECS（學(xué)生機）上遍烦，圖片上傳到七牛

• php（ci框架）
• vue
• vue-router
• vuex-router-sync
• vuex
• web-storage-cache
• element-ui
• axios（網(wǎng)絡(luò)請求）
• cropperjs（圖片裁剪俭嘁，后臺管理系統(tǒng)中使用）
• highlight.js（代碼高亮）
• marked（markdown文本轉(zhuǎn)html）
• mavon-editor（markdown編輯器）
• moment（日期處理）
• photoswipe（查看大圖）

博客界面主題

參考hexo的next主題，根據(jù)自己的喜好和審美觀稍作修改服猪。

實現(xiàn)

效果圖

由于gif壓縮比較模糊供填，可移步到博客直接瀏覽http://codebear.cn

• 移動端

  
  
  博客
  后臺管理

• pc端

  
  
  博客
  后臺管理

php寫博客接口

• 項目結(jié)構(gòu)

image.png

• 返回值helper

image.png

其中<code>success_result、fail_result</code>這兩個方法是接口返回的json結(jié)構(gòu)罢猪，<code>success近她、fail</code>這兩個方法是model返回給controller的json結(jié)構(gòu)，這樣封裝統(tǒng)一返回接口膳帕，比較好管理粘捎。

• 后臺管理權(quán)限檢查

這里我使用了token作為權(quán)限認證，每次登陸都會重新生成一個新的token以及更新有效期危彩，保存進數(shù)據(jù)庫攒磨。
在Common_model中實現(xiàn)token檢查：

image.png

在Base_Controller中加載Common_model并獲取客戶端傳來的accessToken：

image.png

image.png

博客

后臺管理系統(tǒng)與博客寫在同一個項目里汤徽，使用vue-cli腳手架的項目娩缰，自己再改造一下。因為首屏加載慢問題谒府，一些庫（vue拼坎、element-ui等在非dev模式下改成由cdn加載）。

博客： 首頁（最新文章列表）完疫、分類/標(biāo)簽泰鸡、歸檔、關(guān)于趋惨、友鏈、文章惦蚊、文章列表器虾、個人簡歷、搜索

后臺管理系統(tǒng)： 首頁（數(shù)據(jù)統(tǒng)計顯示）蹦锋、文章管理（發(fā)布兆沙、編輯、刪除莉掂、預(yù)覽等）葛圃、評論管理（回復(fù)、刪除）、分類/標(biāo)簽管理（添加库正、刪除曲楚、編輯）、網(wǎng)站配置（關(guān)于褥符、簡歷龙誊、頭像等）

一些共用組件： 評論模塊（表情實現(xiàn)參考jquery 表情輸入框，可存數(shù)據(jù)庫）喷楣、markdown文章顯示模塊（使用marked解析（發(fā)布的時候解析成html存進數(shù)據(jù)庫的）趟大、highlight.js處理代碼高亮、photoswipe實現(xiàn)大圖預(yù)覽）铣焊、圖片裁剪上傳（el-upload+cropperjs）逊朽、文章目錄（根據(jù)html自動生成）

• 項目結(jié)構(gòu)

image.png

• axios封裝統(tǒng)一處理

image.png

總結(jié)

寫這個博客系統(tǒng)初版用了大概一個月時間，現(xiàn)在陸陸續(xù)續(xù)在優(yōu)化以及添加新功能_{學(xué)到了cdn加載曲伊、圖片dataUrl轉(zhuǎn)blob叽讳、動畫效果、pc移動自適應(yīng)等知識熊昌。每一次做項目都是在不斷學(xué)習(xí)绽榛，不斷進步}

前端源碼地址: https://github.com/CB-ysx/myblog
博客在線地址: http://codebear.cn