前言css
本文主要介紹了利用Vue.js+Node.js+MongoDB實現一個博客系統，這個博客使用Vue作前端框架，Node+express作後端，數據庫使用的是MongoDB。實現了用戶註冊、用戶登陸、博客管理、文章編輯、標籤分類等功能html
實現的功能
前端
1.文章的編輯，修改，刪除vue
2.支持使用 Markdown 編輯與實時預覽node
3.支持代碼高亮webpack
4.給文章添加標籤git
5.支持用戶註冊登陸github
使用到的技術web
前端vue-router
1.Vue.js
2.vue-cli
3.vue-router
4.vue-resource
5.element-ui
6.marked
7.highlight.js
後端
1.Node.js
2.Express
3.Mongoose
基本思路
前端使用 vue-router 操做路由，實現單頁應用的效果。使用 vue-resource 從後臺獲取數據，數據的處理所有都在前端，因此後端要作的事情很簡單——把前端打包好的數據存進數據庫中和從數據庫中取出數據。先後端使用統一的路由命名規則。
項目目錄
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
| app.js 後端入口
| index.html 入口頁面
| .babelrc babel配置
| .gitignore git配置
| package.json
| webpack.config.js webpack配置
|
|-dist vue打包生成的文件
|
|-node_modules 模塊
|
|-server 後端
| check.js
| db.js 數據庫
__| router.js 路由
|
|-src 前端
|-assets 靜態資源
|-components 組件
| App.vue
| main.js
|
webpack 配置
webpack 大部分是 vue-cli 自動生成的，添加了讓先後端http請求都轉到node的3000端口，而不是前端的8080端口的配置。
|
1
2
3
4
5
6
7
8
9
10
11
|
devServer: {
historyApiFallback:
true
,
noInfo:
true
,
//讓先後端http請求都轉到node的3000端口，而不是前端的8080端口
proxy: {
'/'
: {
}
}
}
|
這裏涉及一個新手可能會不明白的問題（我以前就搗鼓了半天）。
開發的時候要先打開數據庫 MongoDB ,使用命令 mongod。
而後打開後端服務器 node app，後端監聽 3000 端口。
最後打開前端開發模式 npm run dev，前端啓動了一個 webpack 服務器，監聽 8080 端口用於熱刷新。經過配置把前端的http請求轉到 3000 端口。
前端部分
命名視圖
全部頁面都用到的元素能夠寫在 App.vue 上面，也能夠寫成公共組件。我在 App.vue 中使用了命名視圖，由於 sidebar 這個組件有的頁面須要有的不須要，不須要的時候就不用加載。
|
1
2
3
4
5
6
7
8
9
10
|
<!--App.vue-->
<template>
<div id="app">
<div class="black_line"></div>
<div id="main">
<router-view name="sidebar"></router-view>
<router-view></router-view>
</div>
</div>
</template>
|
router
路由的配置寫在 main.js 中，分爲前臺展現和後臺管理。後臺管理統一以 ‘/admin' 開頭。註冊頁和登陸頁寫在一塊兒了，上面有兩個按鈕「註冊」和「登陸」（我好懶-_-）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// main.js
const router =
new
VueRouter({
routes: [
{path:
'/'
, components: {
default
: article, sidebar: sidebar}},
{path:
'/article'
, components: {
default
: article, sidebar: sidebar}},
{path:
'/about'
, components: {
default
: about, sidebar: sidebar}},
{path:
'/articleDetail/:id'
, components: {
default
: articleDetail, sidebar: sidebar}},
{path:
'/admin/articleList'
, components: {
default
: articleList, sidebar: sidebar}},
{path:
'/admin/articleEdit'
, component: articleEdit},
{path:
'/admin/articleEdit/:id'
, component: articleEdit},
{path:
'/admin/signin'
, component: signin}
]
})
|
element UI
使用了 element 用於消息提醒和標籤分類。並不須要整個引入，而是使用按需引入。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// main.js
// 按需引用element
import { Button, Message, MessageBox, Notification, Popover, Tag, Input } from
'element-ui'
import
'element-ui/lib/theme-default/index.css'
const components = [Button, Message, MessageBox, Notification, Popover, Tag, Input]
components.forEach((item) => {
Vue.component(item.name, item)
})
const MsgBox = MessageBox
Vue.prototype.$msgbox = MsgBox
Vue.prototype.$alert = MsgBox.alert
Vue.prototype.$confirm = MsgBox.confirm
Vue.prototype.$prompt = MsgBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
|
vue-resource
用於向後端發起請求。打通先後端的關鍵。
|
1
2
3
4
5
6
|
// GET /someUrl
this
.$http.get(
'/someUrl'
).then(response => {
// success callback
}, response => {
// error callback
});
|
get 請求
前端發起 get 請求，當請求成功被返回執行第一個回調函數，請求沒有被成功返回則執行第二個回調函數。
|
1
2
3
4
|
this
.$http.get(
'/api/articleDetail/'
+ id).then(
response =>
this
.article = response.body,
response => console.log(response)
)
|
後端響應請求並返回結果
|
1
2
3
4
5
6
7
8
9
10
|
// router.js
router.get(
'/api/articleDetail/:id'
,
function
(req, res) {
db.Article.findOne({ _id: req.params.id },
function
(err, docs) {
if
(err) {
console.error(err)
return
}
res.send(docs)
})
})
|
post 請求
前端發起 post 請求，當請求成功被返回執行第一個回調函數，請求沒有被成功返回則執行第二個回調函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 新建文章
// 即將被儲存的數據 obj
let obj = {
title:
this
.title,
date:
this
.date,
content:
this
.content,
gist:
this
.gist,
labels:
this
.labels
}
this
.$http.post(
'/api/admin/saveArticle'
, {
articleInformation: obj
}).then(
response => {
self.$message({
message:
'發表文章成功'
,
type:
'success'
})
// 保存成功後跳轉至文章列表頁
self.refreshArticleList()
},
response => console.log(response)
)
|
後端存儲數據並返回結果
|
1
2
3
4
5
6
7
8
9
10
11
|
// router.js
// 文章保存
router.post(
'/api/admin/saveArticle'
,
function
(req, res) {
new
db.Article(req.body.articleInformation).save(
function
(err) {
if
(err) {
res.status(500).send()
return
}
res.send()
})
})
|
後端部分
後端使用 express 構建了一個簡單的服務器，幾乎只用於操做數據庫。
app.js 位於項目根目錄，使用 node app 運行服務器。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
const express = require(
'express'
)
const fs = require(
'fs'
)
const path = require(
'path'
)
const bodyParse = require(
'body-parser'
)
const session = require(
'express-session'
)
const MongoStore = require(
'connect-mongo'
)(session)
const router = require(
'./server/router'
)
const app = express()
const resolve = file => path.resolve(__dirname, file)
app.use(
'/dist'
, express.static(resolve(
'./dist'
)))
app.use(bodyParse.json())
app.use(bodyParse.urlencoded({ extended:
true
}))
app.use(router)
// session
app.set(
'trust proxy'
, 1)
// trust first proxy
app.use(session({
secret:
'blog'
,
resave:
false
,
saveUninitialized:
true
,
cookie: {
secure:
true
,
maxAge: 2592000000
},
store:
new
MongoStore({
})
}))
app.get(
'*'
,
function
(req, res) {
let html = fs.readFileSync(resolve(
'./'
+
'index.html'
),
'utf-8'
)
res.send(html)
})
app.listen(3000,
function
() {
console.log(
'訪問地址爲 localhost:3000'
)
})
|
給本身挖了一個坑。由於登陸以後須要保存用戶狀態，用來判斷用戶是否登陸，若是登陸則能夠進入後臺管理，若是沒有登陸則不能進入後臺管理頁面。以前寫 node 的時候用的是 session 來保存，不過spa應用不一樣於先後端不分離的應用，我在前端對用戶輸入的帳號密碼進行了判斷，若是成功則請求登陸在後端保存 session。不過不知道出於什麼緣由，session 老是沒辦法賦值。由於我 node 學的也是半吊子，因此暫時放着，等我搞清楚了再來填坑。
收穫
1.學一個新模塊，新框架第一步就是閱讀官方文檔。
2.不要以爲讀文檔費時間，認真的讀一遍官方文檔比你瞎折騰來得有效率。
3.閱讀與你項目相關的優秀項目的源碼，學習別人如何組織代碼。
4.本身的解決方案不必定是最優解，不過在找到最優解以前不妨本身先試試。
5.框架模塊的使用都不難，套API的活每一個人都能幹，只是快與慢的差異。
6.嘗試思考這個API是如何實現的。
7.瞭解了完整的web應用是如何運做的，包括服務器，數據庫，前端是如何聯繫在一塊兒的。