一個vue加egg.js的部落格

我不是你煌哥哥發表於2018-08-15
VueJS

之前自己的部落格是用hexo做的，後面想做一個有後臺的部落格就打算用vue加node來試試，於是就有了這個部落格。 專案地址

W-Blog

W-Blog是一個基於vue和node的小小小部落格 前端用vue，後端用egg.js

快速入門

技術棧

功能特性

  • 輕量級Markdown編輯器，圖片上傳七牛
  • 支援標籤、分類、搜尋草稿箱等功能
  • 標籤雲

線上地址

煌哥哥的部落格

圖片演示

前臺

  • 首頁瀏覽
    1.gif
  • 文章詳情瀏覽及目錄導航
    2.gif
  • 可根據分類和標籤搜尋文章
    3.gif
  • 輸入關鍵詞搜尋
    4.gif
  • 標籤雲及搜尋
    5.gif

後臺

  • 後臺登入
    6.gif
  • 文章列表
    7.gif
  • 文章搜尋
    8.gif
  • 文章編輯
    9.gif
  • 增加分類
    10.gif
  • 增加標籤
    11.gif
  • 標籤修改（分類一樣）
    12.gif
  • 文章修改
    13.gif
  • 文章刪除，支援垃圾箱草稿箱
    14.gif

目錄結構

│  .autod.conf.js
│  .eslintignore
│  .eslintrc
│  .gitignore
│  .travis.yml
│  app.js // 專案啟動前執行，比如寫入管理員
│  appveyor.yml
│  package.json
│  README.md
│
├─app
│  │  router.js // 服務端路由
│  │
│  ├─controller
│  │      admin.js // 後臺相關controller
│  │      client.js // 前臺相關controller
│  │      login.js // 登入相關controller
│  │      page.js // 頁面相關controller
│  │
│  ├─extend
│  │      helper.js
│  │
│  ├─middleware
│  │      auth.js // 登入驗證中介軟體
│  │
│  ├─model
│  │      Article.js // 文章model
│  │      Category.js // 分類model
│  │      Tag.js // 標籤model
│  │      User.js // 使用者model
│  │
│  ├─public
│  │  │
│  │  ├─admin // admin端
│  │  │  ├─dist // 打包生成後的目錄
│  │  │  └─src // admin端原始檔
│  │  │
│  │  └─client // 使用者端
│  │      ├─dist // 打包生成後的目錄
│  │      └─src // 使用者端原始檔
│  │
│  └─service // service部分用來執行具體的操作
│          admin.js
│          client.js
│          login.js
│
├─config
│      config.default.js // 專案配置相關
│      plugin.js
│
└─test // 測試相關
    └─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', // 資料庫的使用者名稱 
            pass: 'test' // 資料庫的密碼
          },
        }
      }
    },
    // 初始化管理員資訊
    user: {
      userName: 'admin',
      password: 'admin',
    },
    session: {
      maxAge: 3600 * 1000,
    },
    jwt: {
      cert: 'jsonwebtoken' // jwt祕鑰
    },
    /**
     * markdown編輯器的圖片上傳用的是七牛儲存
     * 所以需要配置七牛的key
     */
    qiniu: { // 這裡填寫你七牛的Access Key和Secret Key
      ak: '',
      sk: ''
    }
  }
};
複製程式碼

本地執行

安裝MongoDB資料庫和Node.js環境。

# 安裝服務端依賴
npm install
# 開啟mongodb
mongod --dbpath '你資料庫的目錄' # --auth 如果開啟密碼，要加上這個命令
# 執行服務
npm run dev

# 進入前臺目錄
cd ./app/public/client/src
# 安裝前臺依賴
npm install
# 執行前臺專案
npm run dev

# 進入後臺目錄
cd ./app/public/admin/src
# 安裝後臺依賴
npm install
# 執行後臺專案
npm run dev

# 即可通過 http://127.0.0.1:8080訪問
# 開發階段直接通過webpack的devserver訪問
# 代理請求已經配置好，可在config下配置proxyTable更改
複製程式碼

打包

# 在前臺和後臺目錄分別
npm run build
# 在專案根目錄
npm install --production
# 啟動
npm start
# 打包後可以通過
# http://127.0.0.1:7001/  和 http://127.0.0.1:7001/admin 來訪問前臺和後臺
複製程式碼

相關文章