全棧開發--vue.js+php開發我的博客系統

時間 2019-11-16

標籤開發 vue.js+php vue php 我的博客系統欄目 JavaScript 简体版

原文原文鏈接

原文連接：codebear.cn/article?id=…php

前端源碼地址: github.com/CB-ysx/mybl…css

博客接口源碼: github.com/CB-ysx/mybl…html

博客在線地址: codebear.cn前端

前言

該博客於2018年7月開始開發，8月完成並上線第一個版本，至今處於優化+添加新功能...vue

爲什麼搭建我的博客

一直想搭建本身的我的博客，寫博客能夠記錄個人學習筆記、總結經驗、分享技術等等。嘗試過csdn、博客園、hexo寫博客，但做爲一名程序猿，仍是想擁有屬於本身的我的博客！jquery

爲什麼使用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（學生機）上，圖片上傳到七牛android

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主題，根據本身的喜愛和審美觀稍做修改。ios

實現

效果圖

因爲gif壓縮比較模糊，可移步到博客直接瀏覽codebear.cngit

移動端 github
pc端

php寫博客接口

項目結構

返回值helper

其中 success_result、fail_result這兩個方法是接口返回的json結構， success、fail這兩個方法是model返回給controller的json結構，這樣封裝統一返回接口，比較好管理。

後臺管理權限檢查

這裏我使用了token做爲權限認證，每次登錄都會從新生成一個新的token以及更新有效期，保存進數據庫。在Common_model中實現token檢查：

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

其餘全部controller都繼承Base_controller，在須要權限驗證的controller構造方法裏調用權限檢查：

博客

後臺管理系統與博客寫在同一個項目裏，使用vue-cli腳手架的項目，本身再改造一下。由於首屏加載慢問題，一些庫（vue、element-ui等在非dev模式下改爲由cdn加載）。

博客： 首頁（最新文章列表）、分類/標籤、歸檔、關於、友鏈、文章、文章列表、我的簡歷、搜索

後臺管理系統： 首頁（數據統計顯示）、文章管理（發佈、編輯、刪除、預覽等）、評論管理（回覆、刪除）、分類/標籤管理（添加、刪除、編輯）、網站配置（關於、簡歷、頭像等）

一些共用組件： 評論模塊（表情實現參考jquery 表情輸入框，可存數據庫）、markdown文章顯示模塊（使用marked解析（發佈的時候解析成html存進數據庫的）、highlight.js處理代碼高亮、photoswipe實現大圖預覽）、圖片裁剪上傳（el-upload+cropperjs）、文章目錄（根據html自動生成）