這篇文章將為大家詳細講解有關怎么利用Vue.js+Node.js+MongoDB實現(xiàn)一個博客系統(tǒng)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都網(wǎng)站建設、網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設流程，更有南縣免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

什么是go

go是golang的簡稱，golang 是Google開發(fā)的一種靜態(tài)強類型、編譯型、并發(fā)型，并具有垃圾回收功能的編程語言，其語法與 C語言相近，但并不包括如枚舉、異常處理、繼承、泛型、斷言、虛函數(shù)等功能。

前言

這篇文章實現(xiàn)的博客系統(tǒng)使用 Vue 做前端框架，Node + express 做后端，數(shù)據(jù)庫使用的是 MongoDB。實現(xiàn)了用戶注冊、用戶登錄、博客管理（文章的修改和刪除）、文章編輯（Markdown）、標簽分類等功能。

前端模仿的是 hexo 的經(jīng)典主題 NexT ，本來是想把源碼直接拿過來用的，后來發(fā)現(xiàn)還不如自己寫來得快，就全部自己動手實現(xiàn)成 vue components。

實現(xiàn)的功能

     1.文章的編輯，修改，刪除

     2.支持使用 Markdown 編輯與實時預覽

     3.支持代碼高亮

     4.給文章添加標簽

     5.支持用戶注冊登錄

使用到的技術

前端

     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 操作路由，實現(xiàn)單頁應用的效果。使用 vue-resource 從后臺獲取數(shù)據(jù)，數(shù)據(jù)的處理全部都在前端，所以后端要做的事情很簡單——把前端打包好的數(shù)據(jù)存進數(shù)據(jù)庫中和從數(shù)據(jù)庫中取出數(shù)據(jù)。前后端使用統(tǒng)一的路由命名規(guī)則。

項目目錄

| app.js  后端入口
| index.html  入口頁面
| .babelrc  babel配置
| .gitignore  git配置
| package.json
| webpack.config.js webpack配置
|
|-dist  vue打包生成的文件
|
|-node_modules 模塊
|
|-server  后端
 | check.js
 | db.js  數(shù)據(jù)庫
 __| router.js 路由
|
|-src   前端
 |-assets  靜態(tài)資源
 |-components 組件
 | App.vue
 | main.js

webpack 配置

webpack 大部分是 vue-cli 自動生成的，添加了讓前后端http請求都轉(zhuǎn)到node的3000端口，而不是前端的8080端口的配置。

devServer: {
 historyApiFallback: true,
 noInfo: true,

 //讓前后端http請求都轉(zhuǎn)到node的3000端口，而不是前端的8080端口
 proxy: {
 '/': {
 target: 'http://localhost:3000/'
 }
 }
 }

這里涉及一個新手可能會不明白的問題（我之前就搗鼓了半天）。

開發(fā)的時候要先打開數(shù)據(jù)庫 MongoDB ,使用命令 mongod。

然后打開后端服務器 node app，后端監(jiān)聽 3000 端口。

最后打開前端開發(fā)模式 npm run dev，前端啟動了一個 webpack 服務器，監(jiān)聽 8080 端口用于熱刷新。通過配置把前端的http請求轉(zhuǎn)到 3000 端口。

前端部分

命名視圖

所有頁面都用到的元素可以寫在 App.vue 上面，也可以寫成公共組件。我在 App.vue 中使用了命名視圖，因為 sidebar 這個組件有的頁面需要有的不需要，不需要的時候就不用加載。

<!--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 中，分為前臺展示和后臺管理。后臺管理統(tǒng)一以 ‘/admin' 開頭。注冊頁和登錄頁寫在一起了，上面有兩個按鈕“注冊”和“登錄”（我好懶-_-）。

// 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 用于消息提醒和標簽分類。并不需要整個引入，而是使用按需引入。

// 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

用于向后端發(fā)起請求。打通前后端的關鍵。

// GET /someUrl
 this.$http.get('/someUrl').then(response => {
 // success callback
 }, response => {
 // error callback
 });

get 請求

前端發(fā)起 get 請求，當請求成功被返回執(zhí)行第一個回調(diào)函數(shù)，請求沒有被成功返回則執(zhí)行第二個回調(diào)函數(shù)。

this.$http.get('/api/articleDetail/' + id).then(
 response => this.article = response.body,
 response => console.log(response)
)

后端響應請求并返回結(jié)果

// 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 請求

前端發(fā)起 post 請求，當請求成功被返回執(zhí)行第一個回調(diào)函數(shù)，請求沒有被成功返回則執(zhí)行第二個回調(diào)函數(shù)。

// 新建文章
// 即將被儲存的數(shù)據(jù) 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: '發(fā)表文章成功',
 type: 'success'
 })
 // 保存成功后跳轉(zhuǎn)至文章列表頁
 self.refreshArticleList()
 },
 response => console.log(response)
)

后端存儲數(shù)據(jù)并返回結(jié)果

// 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 構(gòu)建了一個簡單的服務器，幾乎只用于操作數(shù)據(jù)庫。

app.js 位于項目根目錄，使用 node app 運行服務器。

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({
 url: 'mongodb://localhost:27017/blog'
 })
}))

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')
})

給自己挖了一個坑。因為登錄之后需要保存用戶狀態(tài)，用來判斷用戶是否登錄，如果登錄則可以進入后臺管理，如果沒有登錄則不能進入后臺管理頁面。之前寫 node 的時候用的是 session 來保存，不過spa應用不同于前后端不分離的應用，我在前端對用戶輸入的賬號密碼進行了判斷，如果成功則請求登錄在后端保存 session。不過不知道出于什么原因，session 總是沒辦法賦值。因為我 node 學的也是半吊子，所以暫時放著，等我搞清楚了再來填坑。

收獲

     1.學一個新模塊，新框架第一步就是閱讀官方文檔。

     2.不要覺得讀文檔費時間，認真的讀一遍官方文檔比你瞎折騰來得有效率。

     3.閱讀與你項目相關的優(yōu)秀項目的源碼，學習別人如何組織代碼。

     4.自己的解決方案不一定是最優(yōu)解，不過在找到最優(yōu)解之前不妨自己先試試。

     5.框架模塊的使用都不難，套API的活每個人都能干，只是快與慢的差別。

     6.嘗試思考這個API是如何實現(xiàn)的。

     7.了解了完整的web應用是如何運作的，包括服務器，數(shù)據(jù)庫，前端是如何聯(lián)系在一起的。

關于“怎么利用Vue.js+Node.js+MongoDB實現(xiàn)一個博客系統(tǒng)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：怎么利用Vue.js+Node.js+MongoDB實現(xiàn)一個博客系統(tǒng)-創(chuàng)新互聯(lián)
本文地址：http://chinadenli.net/article28/edjcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、虛擬主機、外貿(mào)建站、網(wǎng)站設計、品牌網(wǎng)站建設、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)