個人blog專案(vue+node+mongodb)
先上GitHub連結:
主要技術構成:
前端主要技術棧為vue。js、vue-router、 axios
後端主要技術棧為node。js、 mongodb、 Express
檢視框架:iview
部落格功能
前臺頁面
文章目錄
動態顯示文章
點贊
留言
文章分類顯示
歸檔
後臺管理頁面
文章的增刪改查
許可權驗證
登入驗證
markdown編輯器
Setup
執行環境 - node。js - mongoDB
克隆遠端庫
git clone git@github。com:Hao-Warming/VueBLOG。git
進入專案目錄VueBlog後,安裝依賴
npm install
執行server資料夾下的app。js,該檔案為伺服器開關。(確保資料庫mongodb已經啟動)
在8080埠熱過載開發,等待一會後,會自動彈出瀏覽器視窗
npm run serve
注意
賬戶:admin 密碼:aa123456
進入後臺管理頁面只需在URL後面新增路徑“/admin”,登陸後即可進入
確保本地安裝好mongodb
目錄
│ babel。config。js babel配置
│ 。gitignore git上傳忽略
│ 。env。development
│ 。env。production
│ vue。config。js 專案配置
│ package。lock。json
│ package。json
│ README。md
│
│
├─public
│
├─server 服務端
│ │
│ ├─ api api介面
│ │
│ ├─ db 資料庫
│ │
│ ├─ middlewares 中介軟體
│ │
│ ├─app。js 伺服器入口
│
│
├─src
│ │ main。js 專案入口
│ │ App。vue 根元件
│ │
│ ├─assets 檔案資源
│ │ ├─css
│ │ |─font
│ │ └─images
│ │
│ ├─components vue元件
│ │ ├─back 後臺元件
│ │
│ ├─ plugin
│ │
│ ├─router 路由
│ │
│ └─views 檢視檔案
│_
效果展示
前臺:
後臺:
TODO
加入狀態管理(vuex)
最佳化程式碼