您當前的位置:首頁 > 攝影

個人blog專案(vue+node+mongodb)

作者:由 Warming 發表于 攝影時間:2021-04-21

先上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 檢視檔案

│_

效果展示

前臺:

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

後臺:

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

個人blog專案(vue+node+mongodb)

TODO

加入狀態管理(vuex)

最佳化程式碼

標簽: js  vue  git  MongoDB  後臺