全棧開發博客系統（nodejs+vuejs+mongodb）

本篇文章將會介紹如何使用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文件，而後添加路由。
路由這裏須要注意，右側的可變更的頁面應該做爲Home組件的子路由。
這樣，CategoryEdit這個頁面的內容就會顯示在咱們以前定義的<router-view>的位置。

好了，這樣當咱們在瀏覽器輸入"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。