vueblog前后端分離博客系統(tǒng)
采用 vue.js 加 node.js 開發(fā)的前后端分離博客系統(tǒng)，支持服務(wù)端渲染，標(biāo)題動態(tài)切換，支持 PWA 添加到主屏幕，支持 markdown 語法及代碼高亮，支持標(biāo)簽和歸檔功能。
開發(fā)環(huán)境和技術(shù)棧
操作系統(tǒng)：windows 10 64位
開發(fā)工具 ：webstrom sublime
前端：vue.js + vue-router + vuex
后端：node.js + mongodb (采用express框架)
特色功能
支持服務(wù)端渲染
支持標(biāo)題動態(tài)切換
支持PWA
支持maekdown語法，樣式采用github風(fēng)格，代碼高亮
支持文章保存為草稿
支持標(biāo)簽和歸檔功能
目錄結(jié)構(gòu)
┌─ build // 配置文件 ├─ example // 演示 ├─ public // 公共資源 ├─ server // 服務(wù)端 │ ├─ db.js // 數(shù)據(jù)庫dao層封裝 │ ├─ md5.js // 密碼加密 │ ├─ router.js // 服務(wù)端路由 │ └─ settings.js // 數(shù)據(jù)庫初始化配置 ├─src // 前端 │ ├─ api // 所有的api請求 │ ├─ assets // 前端模板 │ ├─ components // vue組件 │ │ ├─ admin // 后臺可復(fù)用組件 │ │ └─ global // 前端可復(fù)用組件 │ ├─ router // 前端路由 │ ├─ store // vuex文件 │ ├─ util // 公共函數(shù)庫 │ │ ├─ filters.js // 過濾器函數(shù) │ │ └─ title.js // 標(biāo)題函數(shù) │ ├─ views // 公共函數(shù)庫 │ │ ├─ admin // 后臺組件 │ │ ├─ Article.vue // 文章詳情頁 │ │ ├─ CreateListView.js // 預(yù)渲染 │ │ ├─ List.Vue // 文章列表 │ │ └─ Login.Vue // 登陸 │ ├─ app.js // 項目入口文件 │ ├─ App.vue // 全局組件 │ ├─ entry-client.js // 客戶端渲染 │ ├─ entry-server.js // 服務(wù)端渲染 │ └─ index.template.html // 模板 ├─ static // 靜態(tài)文件 ├─ .babelrc // babel配置 ├─ .gitignore // git上傳忽略 ├─ ecosystem.json // pm2配置 ├─ manifest.json // PWA配置 ├─ LICENSE // 開源協(xié)議 ├─ package.json // npm包管理 ├─ README.md // 項目說明 ├─ server.js // 項目啟動文件 └─ yarn.lock // yarn配置
pc端效果圖
首頁效果圖
代碼高亮效果圖
后臺發(fā)布頁面
評論
圖片
表情