全棧開發(fā)博客系統(tǒng)（nodejs+vuejs+mongodb）

本篇文章將會介紹如何使用nodejs+vuejs構(gòu)建個人博客。

主要分三部分內(nèi)容：

* 環(huán)境準(zhǔn)備
* 博客后端管理系統(tǒng)（admin）
* 后端服務(wù)（主要提供admin及web端接口）
* 博客前端展示（web）
環(huán)境準(zhǔn)備

*
nodejs
直接去官網(wǎng)下載最新的穩(wěn)定版就好，以下為下載鏈接：
https://nodejs.org/en/download/ <https://nodejs.org/en/download/>
*
vue-cli

這是一個強(qiáng)大的構(gòu)建工具，使用它可以很方便的管理一個vue的項目，并且不需要更多的webpack配置。建議全局安裝：
npm install --global vue-cli

*
mongodb

后端要用到的數(shù)據(jù)庫。直接去官網(wǎng)下載對應(yīng)系統(tǒng)的版本就好，注意要下載server版。下載地址：
http://downloads.mongodb.com/ <http://downloads.mongodb.com/>

博客后端管理系統(tǒng)

項目創(chuàng)建

首先創(chuàng)建一個基本的vue后端項目，可以使用以下命令：
vue create admin
對于出現(xiàn)的一些選項，直接選擇默認(rèn)就可。
創(chuàng)建好后的目錄結(jié)構(gòu)如下：



router集成

使用vue-cli可以很方便的集成路由：
vue add router

注意，默認(rèn)會采用history模式，為了以后方便些，這里要選擇(n)即用hash模式，而不是瀏覽器的history模式。

element-ui集成

為了方便，后端的頁面我們采用element-ui提供的一些組件實現(xiàn)，所以要把element-ui集成進(jìn)來：
vue add element
提示選項，全部選擇默認(rèn)就可。

好了，到目前為止，后端項目的基本結(jié)構(gòu)就算構(gòu)建完成了?？梢酝ㄟ^以下命令啟動：
npm run serve
啟動后的默認(rèn)頁面如下：



頁面基本布局

可以采用element-ui的layout-container，直接把樣例代碼copy過來放到Home.vue 的template里面就可以。
但是這里有一點要注意，由于在切換左側(cè)菜單的時候，我們希望只有右側(cè)是變動的，左側(cè)應(yīng)該保持不變，所以這里需要用到<router-view>
。把右側(cè)變動的部分掛載到<router-view>這里。


新建分類頁面

首先新建一個CategoryEdit.vue文件，然后添加路由。
路由這里需要注意，右側(cè)的可變動的頁面應(yīng)該作為Home組件的子路由。
這樣，CategoryEdit這個頁面的內(nèi)容就會顯示在我們之前定義的<router-view>的位置。



好了，這樣當(dāng)我們在瀏覽器輸入"http://localhost:8080/#/categories/create
<http://localhost:8080/#/categories/create>",
CategoryEdit頁面就會顯示出來了。具體的頁面內(nèi)容在這里不介紹了。都是用的element-ui的組件。

由于篇幅有限，其他的頁面在這里也不詳細(xì)一一介紹了，具體源碼已開源到GitHub
<https://github.com/lidaguang1989/myblog>。

最終的項目頁面結(jié)構(gòu)會是下面這樣：



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

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

后端服務(wù)

這部分采用nodejs <https://nodejs.org/en/docs/> + mongodb <https://docs.mongodb.com/>
實現(xiàn)。

項目構(gòu)建

* 首先在根目錄（與admin同級的目錄）新建文件夾server。
* 新建一個package.json文件，可以使用以下命令初始化一個
npm init
全部選擇默認(rèn)即可。
* 依賴安裝。后端主要會用到以下依賴。 "cors": "^2.8.5", // 允許跨域請求 "express": "^4.17.1", //
后端框架 "mongoose": "^5.6.12", // 數(shù)據(jù)庫 "nodemon": "^1.19.2", // 當(dāng)文件變更后會自動重啟后端服務(wù)
* 以上依賴安裝完后新建一個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") })
* 通過以下命令就可以啟動后端服務(wù)了： 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) }
注意這里導(dǎo)出的是一個函數(shù)，這樣做有個好處就是可以傳遞參數(shù)進(jìn)來，這里我們傳入了app作為參數(shù)。

在根目錄的index.js文件中需要引入一下：
require('./routers/admin/index')(app) // 直接執(zhí)行函數(shù)并傳入app作為參數(shù)
當(dāng)在瀏覽器中輸入"http://localhost:3000/admin/api/rest/getData
<http://localhost:3000/admin/api/rest/getData>" 時，會看到"hello wrold"。

連接數(shù)據(jù)庫

接下來新建一個文件夾db，然后新建db.js文件:
module.exports = app => { const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/myblog', { useNewUrlParser: true })
}
mongodb安裝完后默認(rèn)會在27017端口啟動，myblog是我們給數(shù)據(jù)庫的命名。

然后在index.js文件中需要引入db.js。
require('./db/db')(app)
創(chuàng)建模型

新建models文件夾，在文件夾下新建Category.js作為分類的模型。
const mongoose = require('mongoose') const schema = new mongoose.Schema({
title: {type: String} }) module.exports = mongoose.model('Category', schema)
暫時只定義一個分類名稱 "title"

數(shù)據(jù)查詢

在routers/admin/index.js中通過以下代碼就可以查詢categories表中的數(shù)據(jù)。
// 獲取分類列表 router.get('/categories', async (req, res) => { const res = await
Category.find() res.send(res) })
當(dāng)在瀏覽器中輸入 "http://localhost:3000/admin/api/rest/categories
<http://localhost:3000/admin/api/rest/categories>" 即可得到categories表的數(shù)據(jù)。

好了，通過以上的介紹，我們應(yīng)該能夠?qū)崿F(xiàn)一些簡單的增刪改查操作。

中間件

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

前面提到，后端admin主要包括三大模塊：分類管理、文章管理、用戶管理。


每一個模塊都會涉及增刪改查操作。如果我們?yōu)槊恳粋€模塊都定義一套自己的增刪改查接口，勢必會產(chǎn)生很多重復(fù)代碼，而且如果是分類比較多的情況，重復(fù)代碼會更加嚴(yán)重。所以這里可以考慮自定義一個中間件。


首先新建一個文件夾middleware，然后新建resource.js文件（我們可以把每個分類都理解為資源），統(tǒng)一對資源進(jìn)行增刪改查操作，唯一的不同是資源名稱。
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把傳入的參數(shù)轉(zhuǎn)為單數(shù)形式，作為模型的名稱。

然后將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)
好了，由于篇幅有限，其他的一些內(nèi)容就暫不介紹了，詳細(xì)代碼可以參考GitHub
<https://github.com/lidaguang1989/myblog>。

博客前端展示（web）

項目構(gòu)筑

這部分和admin差不多，新建web項目，需要集成router，但不需要element-ui，具體可以參照上文后端管理系統(tǒng)的項目構(gòu)筑介紹。

主題選擇

主題部分我是直接從Jekyll Themes <http://jekyllthemes.org/>
主題庫中選取的一個，由于時間沒那么多，再加上是自己做著玩，所以偷個懶。在這里貼出原作者 Liberxue
<https://github.com/Liberxue/liberxue.github.io>。

訪問量統(tǒng)計

訪問量統(tǒng)計這里用到了一個免費的開源庫不蒜子 <http://busuanzi.ibruce.info/>，非常輕量級，使用起來也很簡單。

主頁面



結(jié)尾

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

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

源碼已經(jīng)開源到GitHub <https://github.com/lidaguang1989/myblog>, 如果您覺著對自己還有些幫助，希望能給個
Star <https://github.com/lidaguang1989/myblog>。

• ? 上一篇： 【轉(zhuǎn)載】剛剛又傳來好消息，硬核!新一代大國重器！MaxCompute
• ? 下一篇：.net測試篇之Moq行為配置