一個(gè)前端基于Vue2.0全家桶稿辙，后端基于Express+Mongodb的前后端分離博客包晰。前端界面使用了flexbox+rem布局齐邦，后端界面使用了element ui赴穗。本項(xiàng)目可以作為一個(gè)前端進(jìn)階項(xiàng)目憔四，從前端flexbox布局到前端框架的使用膀息，再到后端以及數(shù)據(jù)庫(kù)，是一個(gè)打通前后端流程的一個(gè)項(xiàng)目了赵。由于最近剛換了域名潜支，正在備案中，所以目前沒有線上演示柿汛，不過可以看一下下面的動(dòng)態(tài)圖特效冗酿。
特點(diǎn)
- 支持 MarkDown 編輯
- 支持代碼高亮
- 支持移動(dòng)端瀏覽
功能展示展示
PC前臺(tái)博客演示
image
移動(dòng)端前臺(tái)演示
image
后臺(tái)管理演示
image
若圖片無法顯示則點(diǎn)擊這里:pc前端功能展示 移動(dòng)前端功能展示pc后端功能展示
前端工具
- Vue2.0
- Vue-Router
- Vuex
- axios
- element ui
前端布局采用flexbox+rem布局，關(guān)于flexbox請(qǐng)閱讀一個(gè)完整的Flexbox指南以及這篇最新的理解Flexbox：你需要知道的一切
本項(xiàng)目還采用了手機(jī)端適配络断，關(guān)于移動(dòng)端的學(xué)習(xí)資料請(qǐng)按照我下面羅列的資料按順序仔細(xì)閱讀裁替。
后端工具
- express
- mongodb（mongolass）
后端的管理界面我直接使用了element ui這個(gè)基于vue的組件庫(kù)，很強(qiáng)大.
目錄結(jié)構(gòu)
│ .babelrc
│ .editorconfig
│ .eslintignore
│ .eslintrc.js
│ .gitignore
│ index.html
│ package.json
│ README.md
│
├─build
│ build.js
│ check-versions.js
│ dev-client.js
│ dev-server.js
│ utils.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
│
├─config
│ dev.env.js
│ index.js
│ prod.env.js
│ test.env.js
│
├─server 后端文件夾
│ │ .env
│ │ app.js 后端入口
│ │
│ ├─api
│ │ index.js 后端api
│ │
│ ├─lib
│ │ mongo.js 數(shù)據(jù)庫(kù)
│ │
│ ├─middleware
│ │ checkToken.js
│ │ createToken.js
│ │
│ └─routes 后端路由
│ admin.js
│ article.js
│ classify.js
│ index.js
│ login.js
│ reg.js
│
├─src 前端文件夾
│ │ App.vue
│ │ main.js 前端入口
│ │
│ ├─api 前端api
│ │ index.js
│ │
│ ├─assets
│ │ ├─css
│ │ │ commen.css
│ │ │ default.css
│ │ │ default0.css
│ │ │ highlight.css
│ │ │
│ │ ├─img
│ │ │ bg.jpg
│ │ │ bgm.jpg
│ │ │
│ │ └─js
│ │ commen.js
│ │ highlight.pack.js
│ │ hljs.js
│ │
│ ├─components
│ │ │ NotFound.vue
│ │ │
│ │ ├─backEnd 后端界面
│ │ │ Admin.vue
│ │ │ ArticleCreate.vue
│ │ │ ArticleEdit.vue
│ │ │ ArticleList.vue
│ │ │ ClassList.vue
│ │ │ Login.vue
│ │ │ Reg.vue
│ │ │
│ │ └─fronted 前端界面
│ │ About.vue
│ │ Article.vue
│ │ Front.vue
│ │ Home.vue
│ │ Tags.vue
│ │ vfooter.vue
│ │ vheader.vue
│ │
│ ├─routes 前端路由vue-router
│ │ index.js
│ │ routes.js
│ │
│ └─store 前端vuex
│ │ actions.js
│ │ index.js
│ │ MsgAlert.js
│ │ mutations.js
│ │ states.js
│ │ types.js
Step
環(huán)境
克隆遠(yuǎn)程庫(kù)
git clone https://github.com/elva2596/vueBlog.git
安裝前端依賴
npm install
全局安裝supervisor
npm install -g supervisor
啟動(dòng)mongodb服務(wù)器
在你安裝的數(shù)據(jù)庫(kù)文件中的bin目錄中啟動(dòng)
mongod
安裝后端依賴
進(jìn)入到server文件夾下貌笨，安裝后端依賴：npm install
啟動(dòng)后端服務(wù)器
npm start
啟動(dòng)前端項(xiàng)目
回到項(xiàng)目根目錄下運(yùn)行：npm run dev
生成發(fā)布
npm run build
Notice
- 前后端啟動(dòng)時(shí)的路徑不一樣弱判，前端在項(xiàng)目根目錄，后端在servser根目錄锥惋，其實(shí)可以把后端分離出來昌腰。
- 因?yàn)槭乔昂蠖朔蛛x項(xiàng)目，必然涉及到跨域膀跌，使用webpack的proxyTable,進(jìn)入到config文件夾的index.js,將proxyTable配置成：
proxyTable: { '/api':{ target:'http://localhost:3009/api', changeOrigin:true, pathRewrite:{ '^/api':'' } } },
- 推薦Robomongo作為數(shù)據(jù)庫(kù)的可視化管理工具
- 推薦Postman作為驗(yàn)證restful API的工具遭商，請(qǐng)參考這篇文章
- 這里的主頁(yè)界面有個(gè)小小的bug,主頁(yè)只顯示每篇具體文章的摘要，在這里我取了一個(gè)巧淹父，就是將從后端返回的數(shù)據(jù)經(jīng)過markdown解析以后株婴，用了一個(gè)正則把第一個(gè)p標(biāo)簽以及其中的內(nèi)容給提取出來渲染到頁(yè)面。因此后端在添加文章的時(shí)候必須在編寫每篇文章的開頭寫一段話暑认。因?yàn)楫吘惯@個(gè)博客只是一個(gè)第一版困介，后面我會(huì)把這個(gè)問題解決掉。
Todo
- 移動(dòng)端優(yōu)化蘸际，300ms
- 添加評(píng)論功能
- 密碼修改功能
- 用戶權(quán)限分類
License
MIT
