用vue搭建的我的博客介紹----mapblog小站

這篇文章擱置了很長時間，最終決定仍是把它寫出來，給剛開始學習vue而且想用vue寫我的博客的同窗一個參考。由於當初我也是參考了其餘人分享的知識，從一個vue小白變成了一個入門級選手，並最終完成了這個我的博客的搭建工做，代碼已託管在Github-justJokee。線上訪問請戳mapblog小站，因此如今有必要分享一下這個博客所用到的相關技術及實現的功能，但願能幫助有須要的同窗^_^。
博客前臺採用vue-ssr進行服務端渲染（解決vue前端渲染的seo問題），後臺管理採用vue進行傳統前端渲染。服務端渲染可參考博客前臺代碼front，前臺渲染可參考博客的後臺管理代碼admin。後端主要使用nodejs的框架express，數據庫採用mongodb。後臺管理登陸採用jsonwebtoken與後端進行登錄狀態的確認。空間買的騰訊雲，1M網速，學生套餐雖然便宜點，龜速也是夠傷的。整站主要採用的技術棧以下所示：
前端：

• vue、vue-ssr
• vue-router
• vuex
• vue-meta
• axios
• webpack

後端：

• nodejs
• express
• mongodb
• mongoose
• jsonwebtoken
• pm2
• webpack

項目的主目錄：

│  .gitignore
│  README.md
│
├─admin  後臺管理（前臺渲染）
└─front  前臺頁面（vue-ssr服務端渲染）

主目錄說明：

• front 下所起的express服務是整個站點的服務器，負責先後臺的數據交互、前臺頁面直出等。固然它也負責前臺的開發模式熱更新，經過NODE_ENV控制
• admin 下所起的服務僅供開發時的熱更新和http請求轉發,數據交互依靠上面所說的的front下所起的express服務器

博客前臺主要實現功能：

• 全局響應式

• 文章

  • 按標籤分類展現（大於10篇分頁）
  • 按時間歸檔（大於10篇分頁）
  • 第三方分享
  • 評論
  • 站內搜索（大於10篇分頁）
• 留言（大於10條分頁）
• 全部標籤展現
• 推薦閱讀瀏覽量前五的文章
• 支持QQ、Github第三方登陸

博客的後臺管理主要實現功能：

• 全局響應式

• 站內文章搜索

  • 關鍵字搜索
  • 時間範圍搜索

• 已發表文章管理

  • 顯示全部文章
  • 按標籤分類展現
  • 實現刪除、修改、預覽功能

• 草稿箱

  • 實現刪除、修改、預覽功能

• 留言管理

  • 實現預覽、刪除留言功能
  • 管理員回覆

• 評論管理

  • 實現預覽、刪除評論功能
  • 管理員回覆

• 新消息

  • 對訪客的評論、留言、讚的文章以及訪問的哪一篇文章進行收集分類展現

• 文本編輯器 ---Ueditor

  • 文章發表、修改

• 帳戶設置

  • 密碼修改
  • 數據庫備份及下載備份文件到本地
• 退出管理系統
• 文章、評論、留言的數量大於10時分頁顯示

後臺管理界面相關截圖：

登陸界面

文章管理

留言管理（與評論管理基本相似）

新消息

編輯器

帳戶設置

相關參考：

1. vue-ssr官方文檔
2. 基於vue-ssr服務端渲染入門詳解
3. Vue2 SSR 的優化之旅
4. emoji
5. nodejs-ueditor插件
   ...

特此向以上做者們的無私分享精神致謝。

本文首發於mapblog小站，這是一個積累和分享web知識的我的博客