本篇文章將會介紹如何使用nodejs+vuejs構建個人部落格。

主要分三部分內容：

1. 環境準備
2. 部落格後端管理系統（admin）
3. 後端服務（主要提供admin及web端介面）
4. 部落格前端展示（web）

環境準備

• nodejs

  直接去官網下載最新的穩定版就好，以下為下載連結：
  https://nodejs.org/en/download/

• vue-cli

  這是一個強大的構建工具，使用它可以很方便的管理一個vue的專案，並且不需要更多的webpack配置。建議全域性安裝：
  npm install --global vue-cli

• mongodb

  後端要用到的資料庫。直接去官網下載對應系統的版本就好，注意要下載server版。下載地址：
  

  http://downloads.mongodb.com/

部落格後端管理系統

專案建立

首先建立一個基本的vue後端專案，可以使用以下命令：

    vue create admin

對於出現的一些選項，直接選擇預設就可。
建立好後的目錄結構如下：

router整合

使用vue-cli可以很方便的整合路由：

vue add router

注意，預設會採用history模式，為了以後方便些，這裡要選擇(n)即用hash模式，而不是瀏覽器的history模式。

element-ui整合

為了方便，後端的頁面我們採用element-ui提供的一些元件實現，所以要把element-ui整合進來：

vue add element

提示選項，全部選擇預設就可。

好了，到目前為止，後端專案的基本結構就算構建完成了。可以通過以下命令啟動：

npm run serve

啟動後的預設頁面如下：

頁面基本佈局

可以採用element-ui的layout-container，直接把樣例程式碼copy過來放到Home.vue 的template裡面就可以。
但是這裡有一點要注意，由於在切換左側選單的時候，我們希望只有右側是變動的，左側應該保持不變，所以這裡需要用到<router-view>。把右側變動的部分掛載到<router-view>這裡。

新建分類頁面

首先新建一個CategoryEdit.vue檔案，然後新增路由。

好了，這樣當我們在瀏覽器輸入"http://localhost:8080/#/categories/create", CategoryEdit頁面就會顯示出來了。具體的頁面內容在這裡不介紹了。都是用的element-ui的元件。

由於篇幅有限，其他的頁面在這裡也不詳細一一介紹了，具體原始碼已開源到GitHub。

最終的專案頁面結構會是下面這樣：

共分成三部分：分類管理、文章管理及使用者管理。

對於頁面中使用的介面，會在接下來的server部分介紹。

後端服務

這部分採用nodejs + mongodb實現。

專案構建

1. 首先在根目錄（與admin同級的目錄）新建資料夾server。
2. 新建一個package.json檔案，可以使用以下命令初始化一個
   npm init
   全部選擇預設即可。
3. 依賴安裝。後端主要會用到以下依賴。

    "cors": "^2.8.5",       // 允許跨域請求
    "express": "^4.17.1",   // 後端框架
    "mongoose": "^5.6.12",  // 資料庫
    "nodemon": "^1.19.2",   // 當檔案變更後會自動重啟後端服務

1. 以上依賴安裝完後新建一個index.js檔案。

const express = require('express')
const cors = require('cors')
const app = express()

// 允許跨域
app.use(cors())
app.use(express.json())

app.listen('3000', async(req, res) => {
  console.log("http://localhost:3000")
})

1. 通過以下命令就可以啟動後端服務了：

    nodemon start index.js

路由定義

新建一個router資料夾，然後新建admin資料夾作為admin端的介面，平級可以再建一個web資料夾作為web端的介面。在admin資料夾下新建index.js檔案

module.exports = app => {
  const express = require('express')
  const router = express.Router()

  // 獲取資源
  router.get('/getData', async (req, res) => {
    res.send("hello world")
  })
  
  app.use('/admin/api/rest', router)
}

注意這裡匯出的是一個函式，這樣做有個好處就是可以傳遞引數進來，這裡我們傳入了app作為引數。

在根目錄的index.js檔案中需要引入一下：

require('./routers/admin/index')(app) // 直接執行函式並傳入app作為引數

當在瀏覽器中輸入"http://localhost:3000/admin/api/rest/getData" 時，會看到"hello wrold"。

連線資料庫

接下來新建一個資料夾db，然後新建db.js檔案:

module.exports = app => {
  const mongoose = require('mongoose')

  mongoose.connect('mongodb://localhost:27017/myblog', {
    useNewUrlParser: true
  })
}

mongodb安裝完後預設會在27017埠啟動，myblog是我們給資料庫的命名。

然後在index.js檔案中需要引入db.js。

require('./db/db')(app) 

建立模型

新建models資料夾，在資料夾下新建Category.js作為分類的模型。

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
  title: {type: String}
})

module.exports = mongoose.model('Category', schema)

暫時只定義一個分類名稱 "title"

資料查詢

在routers/admin/index.js中通過以下程式碼就可以查詢categories表中的資料。

  // 獲取分類列表
  router.get('/categories', async (req, res) => {
    const res = await Category.find()
    res.send(res)
  })

當在瀏覽器中輸入 "http://localhost:3000/admin/api/rest/categories" 即可得到categories表的資料。

好了，通過以上的介紹，我們應該能夠實現一些簡單的增刪改查操作。

中介軟體

在開發的過程中，我們一定會遇到一個問題。

前面提到，後端admin主要包括三大模組：分類管理、文章管理、使用者管理。

每一個模組都會涉及增刪改查操作。如果我們為每一個模組都定義一套自己的增刪改查介面，勢必會產生很多重複程式碼，而且如果是分類比較多的情況，重複程式碼會更加嚴重。所以這裡可以考慮自定義一箇中間件。

首先新建一個資料夾middleware，然後新建resource.js檔案（我們可以把每個分類都理解為資源），統一對資源進行增刪改查操作，唯一的不同是資源名稱。

module.exports = options => {
  return async (req, res, next) => {
    const inflection = require('inflection')
    const modelName = inflection.classify(req.params.resource)
    req.Model = require(`../models/${modelName}`)
  
    next()
  }
}

這裡用到了inflection庫，需要先安裝一下，然後用inflection.classify把傳入的引數轉為單數形式，作為模型的名稱。

然後將routers/admin.index.js改為以下方式

  // 獲取資源
  router.get('/', async (req, res) => {
    const data = await req.Model.find()
    res.send(data)
  })

  app.use('/admin/api/rest/:resource', resourceMiddleware(), router)

好了，由於篇幅有限，其他的一些內容就暫不介紹了，詳細程式碼可以參考GitHub。

部落格前端展示（web）

專案構築

這部分和admin差不多，新建web專案，需要整合router，但不需要element-ui，具體可以參照上文後端管理系統的專案構築介紹。

主題選擇

主題部分我是直接從Jekyll Themes主題庫中選取的一個，由於時間沒那麼多，再加上是自己做著玩，所以偷個懶。在這裡貼出原作者 Liberxue。

訪問量統計

訪問量統計這裡用到了一個免費的開源庫不蒜子，非常輕量級，使用起來也很簡單。

主頁面

結尾

好了，暫時就先介紹這麼多吧，還有很多內容就不一一展開了。如果大家有疑問可以留言。

由於本人是前端出身，做了六七年前端了。後端也是剛剛接觸不久，所以上文前端部分介紹的可能會少一些，相對後端會多些，如果有哪些錯誤的地方歡迎指正。

原始碼已經開源到GitHub, 如果您覺著對自己還有些幫助，希望能給個Star。