一個(gè)前端基于Vue2.0全家桶，后端基于Express+Mongodb的前后端分離博客。前端界面使用了flexbox+rem布局，后端界面使用了element ui。本項(xiàng)目可以作為一個(gè)前端進(jìn)階項(xiàng)目，從前端flexbox布局到前端框架的使用，再到后端以及數(shù)據(jù)庫，是一個(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ì)閱讀。

1. 移動(dòng)端調(diào)試
2. 介紹vieport
3. 使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配

后端工具

• express
• mongodb（mongolass）

后端的管理界面我直接使用了element ui這個(gè)基于vue的組件庫，很強(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ù)庫
│  │
│  ├─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)境

• Node.js v6
• mongoDB 下載地址
  安裝方法
  安裝完成后啟動(dòng)數(shù)據(jù)庫
  mongod

克隆遠(yuǎn)程庫

git clone https://github.com/elva2596/vueBlog.git

安裝前端依賴

npm install

全局安裝supervisor

npm install -g supervisor

啟動(dòng)mongodb服務(wù)器

在你安裝的數(shù)據(jù)庫文件中的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ù)庫的可視化管理工具
• 推薦Postman作為驗(yàn)證restful API的工具，請(qǐng)參考這篇文章
• 這里的主頁界面有個(gè)小小的bug,主頁只顯示每篇具體文章的摘要，在這里我取了一個(gè)巧，就是將從后端返回的數(shù)據(jù)經(jīng)過markdown解析以后，用了一個(gè)正則把第一個(gè)p標(biāo)簽以及其中的內(nèi)容給提取出來渲染到頁面。因此后端在添加文章的時(shí)候必須在編寫每篇文章的開頭寫一段話。因?yàn)楫吘惯@個(gè)博客只是一個(gè)第一版，后面我會(huì)把這個(gè)問題解決掉。

Todo

• 移動(dòng)端優(yōu)化，300ms
• 添加評(píng)論功能
• 密碼修改功能
• 用戶權(quán)限分類

License

MIT