vue我的博客項目部署上線

前言

以前有發過這個項目的文章了，根據朋友的建議改變了博客的樣式，也增長了一些新功能，下面完整地介紹這個博客項目。文末附前端實習求職簡歷

項目簡介

簡要介紹：一個先後端分離的項目
主要技術棧：vue全家桶 + node.js + Express + Mongodb
github地址： vue博客內容管理系統
項目線上地址： FatDong的博客 --- www.xuhaodong.cn

實現功能

文章

• 文章經過標籤分類

• 存爲草稿，草稿和文章能夠隨時切換

• 文章目錄，與segmentfault生成的目錄效果類似

• 最近更新，首頁展現最近更新的三篇文章

• 搜索文章，輸入標題的部份內容便可搜索相應文章

評論

• 過濾評論，太長、過短、含QQ羣號的評論將沒法發佈

• 郵件通知，若是有人回覆評論，會經過nodemailer來發送通知郵件

• 頭像功能，訪問者和站長分別用不一樣的頭像來區分

• 點贊功能，點贊狀況記錄在瀏覽器的localStorage裏，下次訪問會還原點贊狀況

• 防止重名，同一篇文章中不會出現評論者重名的狀況，固然同一我的能夠屢次評論

• 排序評論，排序依據：最新、最先、最熱

• 用localStorage記錄郵箱和暱稱，下次訪問不用從新輸入

markdown編輯器(marked)

• 過濾標籤

  • 去除首尾空格

  • 輸入相同的標籤將彈出模態框警告並自動刪除，使用數據驅動視圖更新的思想將全部標籤放在一個數組，添加和刪除標籤都是對數組進行操做

• 自定義快捷鍵

• 切換預覽模式

• 代碼高亮顯示，使用hightlight.js進行代碼高亮顯示

• 提醒保存，沒有保存就離開頁面前會彈出模態框確認

帳戶

• 權限驗證

  • 前臺使用vue-router的beforeEach進行驗證

  • 後臺使用jwt實現基於token的身份驗證

• 修改帳號和密碼

• 密碼加密，使用sha1加密算法，用csprng生成的隨機鹽

頁面特效

• canvas粒子效果（移動端取消）

  • 鼠標追隨粒子效果

  • 單擊取消展現粒子效果，從新點擊隨機切換粒子效果的顏色

  • 鼠標離開頁面後，粒子效果開始規則運動

• 平滑回到頂部

• 點擊文章段落標題，平滑滾動到錨點

• 向下滾動時，動態展現dom節點

• 底部自動加載loading

• 網站頂部圖片改變景深

其餘功能

• 適配移動端。使用flex佈局、rem以及百分比佈局去適配移動端，實現響應式佈局

下面是移動端的演示

網站部署

• 添加SSL證書，使用更爲安全的https協議

• 使用nginx進行反向代理

• 服務器使用linux系統，學習了一些linux的知識

收穫

• 更加了解一個項目從前端到後端的流程，能夠更好地和後端人員對接

• 能夠加深對webpack、Vue、vuex、vue-router、vue-resource的使用

最後

最近在找前端暑假實習，這是個人在線簡歷 --- job.xuhaodong.cn，謝謝?

本文已同步到個人博客www.xuhaodong.cn