之前自己的博客是用hexo做的，后面想做一個(gè)有后臺的博客就打算用vue加node來試試，于是就有了這個(gè)博客。
項(xiàng)目地址

W-Blog

W-Blog是一個(gè)基于vue和node的小小小博客
前端用vue，后端用egg.js

快速入門

技術(shù)棧

• 前端：
  • 用戶端：vue、iview
  • admin端：vue、d2admin、element
• 后端: egg.js、mongodb

功能特性

• 輕量級Markdown編輯器，圖片上傳七牛
• 支持標(biāo)簽、分類、搜索草稿箱等功能
• 標(biāo)簽云

線上地址

煌哥哥的博客

圖片演示

前臺

• 首頁瀏覽

  
  
  1.gif

• 文章詳情瀏覽及目錄導(dǎo)航

  
  
  2.gif

• 可根據(jù)分類和標(biāo)簽搜索文章

  
  
  3.gif

• 輸入關(guān)鍵詞搜索

  
  
  4.gif

• 標(biāo)簽云及搜索

  
  
  5.gif

后臺

• 后臺登錄

  
  
  6.gif

• 文章列表

  
  
  7.gif

• 文章搜索

  
  
  8.gif

• 文章編輯

  
  
  9.gif

• 增加分類

  
  
  10.gif

• 增加標(biāo)簽

  
  
  11.gif

• 標(biāo)簽修改（分類一樣）

  
  
  12.gif

• 文章修改

  
  
  13.gif

• 文章刪除，支持垃圾箱草稿箱

  
  
  14.gif

目錄結(jié)構(gòu)

│  .autod.conf.js
│  .eslintignore
│  .eslintrc
│  .gitignore
│  .travis.yml
│  app.js // 項(xiàng)目啟動(dòng)前執(zhí)行，比如寫入管理員
│  appveyor.yml
│  package.json
│  README.md
│
├─app
│  │  router.js // 服務(wù)端路由
│  │
│  ├─controller
│  │      admin.js // 后臺相關(guān)controller
│  │      client.js // 前臺相關(guān)controller
│  │      login.js // 登錄相關(guān)controller
│  │      page.js // 頁面相關(guān)controller
│  │
│  ├─extend
│  │      helper.js
│  │
│  ├─middleware
│  │      auth.js // 登錄驗(yàn)證中間件
│  │
│  ├─model
│  │      Article.js // 文章model
│  │      Category.js // 分類model
│  │      Tag.js // 標(biāo)簽model
│  │      User.js // 用戶model
│  │
│  ├─public
│  │  │
│  │  ├─admin // admin端
│  │  │  ├─dist // 打包生成后的目錄
│  │  │  └─src // admin端源文件
│  │  │
│  │  └─client // 用戶端
│  │      ├─dist // 打包生成后的目錄
│  │      └─src // 用戶端源文件
│  │
│  └─service // service部分用來執(zhí)行具體的操作
│          admin.js
│          client.js
│          login.js
│
├─config
│      config.default.js // 項(xiàng)目配置相關(guān)
│      plugin.js
│
└─test // 測試相關(guān)
    └─app
        └─controller
                home.test.js

全局配置

module.exports = appInfo => {
  return {
    keys: appInfo.name + '_1432030565447_3632',
    mongoose: {
      clients: {
        blog: {
          url: 'mongodb://127.0.0.1/blog',
          options: {
            user: 'test', // 數(shù)據(jù)庫的用戶名 
            pass: 'test' // 數(shù)據(jù)庫的密碼
          },
        }
      }
    },
    // 初始化管理員信息
    user: {
      userName: 'admin',
      password: 'admin',
    },
    session: {
      maxAge: 3600 * 1000,
    },
    jwt: {
      cert: 'jsonwebtoken' // jwt秘鑰
    },
    /**
     * markdown編輯器的圖片上傳用的是七牛存儲
     * 所以需要配置七牛的key
     */
    qiniu: { // 這里填寫你七牛的Access Key和Secret Key
      ak: '',
      sk: ''
    }
  }
};

本地運(yùn)行

安裝MongoDB數(shù)據(jù)庫和Node.js環(huán)境。

# 安裝服務(wù)端依賴
npm install
# 開啟mongodb
mongod --dbpath '你數(shù)據(jù)庫的目錄' # --auth 如果開啟密碼，要加上這個(gè)命令
# 運(yùn)行服務(wù)
npm run dev

# 進(jìn)入前臺目錄
cd ./app/public/client/src
# 安裝前臺依賴
npm install
# 運(yùn)行前臺項(xiàng)目
npm run dev

# 進(jìn)入后臺目錄
cd ./app/public/admin/src
# 安裝后臺依賴
npm install
# 運(yùn)行后臺項(xiàng)目
npm run dev

# 即可通過 http://127.0.0.1:8080訪問
# 開發(fā)階段直接通過webpack的devserver訪問
# 代理請求已經(jīng)配置好，可在config下配置proxyTable更改

打包

# 在前臺和后臺目錄分別
npm run build
# 在項(xiàng)目根目錄
npm install --production
# 啟動(dòng)
npm start
# 打包后可以通過
# http://127.0.0.1:7001/  和 http://127.0.0.1:7001/admin 來訪問前臺和后臺