Vue.js實踐：一個Node.js+mongoDB+Vue.js的博客內容管理系統

時間 2019-12-13

標籤 vue.js vue 實踐一個 node.js+mongodb+vue.js node mongodb 博客內容管理系統欄目 JavaScript 简体版

原文原文鏈接

項目來源
之前曾用過WordPress搭建本身的博客網站，但感受WordPress非常臃腫。因此一直想本身寫一個博客內容管理器。javascript

正好近日看完了Vue各個插件的文檔，就用着Vue嘗試寫了這個簡約的博客內容管理器（CMS）。css

完成的功能html

一個基本的博客內容管理器功能，如後臺登錄，發佈並管理文章等支持markdown語法編輯
支持代碼高亮
能夠管理博客頁面的連接
博客頁面對移動端適配優化
帳戶管理(修改密碼)
頁面足夠大氣、酷炫~

因而，爲了彰顯一向的酷炫，我給後臺寫了一套星空主題。。。前端

登錄頁面vue

後臺管理頁面java

但博客頁面最後沒用後臺的星空主題，主要是以爲黑色不太好搭配。node

因而我想，既然前端都是用Vue.js寫的，那就參chao考xi一下Vue.js尤雨溪的博客樣式吧！webpack

在這基礎上博客頁面又加了本身寫的canvas動畫，應該是足夠優雅了~
git

Demogithub

登錄後臺按鈕在頁面最下方「站長登錄」，能夠以遊客身份登入後臺系統。

源碼

用到的技術和實現思路
前端：Vue全家桶

Vue.js
Vue-Cli
Vue-Resource
Vue-Validator
Vue-Router
Vuex
Vue-loader

後端

Node.js
mongoDB (mongoose) Express

工具和語言

Webpack
ES6
SASS
Jade

總體思路

Node服務端除了主頁外，不作模板渲染，渲染交給瀏覽器完成
Node服務端不作任何路由切換的內容，這部分交給Vue-Router完成
Node服務端只用來接收請求，查詢數據庫並用來返回值

因此這樣作先後端幾乎徹底解耦，只要約定好restful風格的數據接口，和數據存取格式就OK啦。

後端我用了mongoDB作數據庫，並在Express中經過mongoose操做mongoDB，省去了複雜的命令行，經過Javascript操做無疑方便了不少。

簡單的說一下Vue的各個插件：

Vue-Cli:官方的腳手架，用來初始化項目
Vue-Resource：能夠看做一個Ajax庫，經過在跟組件引入，能夠方便的注入子組件。子組件以this.$http調用
Vue-Validator：用來驗證表單
Vue-Router：官方的路由工具，用來切換子組件，是用來作SPA應用的關鍵
Vuex：控制組件中數據的流動，使得數據流動更加清晰，有跡可循。經過官方的vue-devtools能夠無縫對接
Vue-loader：webpack中對Vue文件的加載器

文件目錄

我將前端的文件統一放到了src目錄下，其中的mian.js是webpack的入口。

全部頁面分割成一個單一的vue組件，放在componentss中，經過入口文件mian.js，由webpack打包生成，生成的文件放在public文件夾下。

後端文件放在server文件夾內，這就是基於Express的node服務器，在server文件夾內執行

node www

就能夠啓動Node服務器，默認偵聽3000端口。
關於Vue-Cli
我只是使用了simple的template，相對於默認的template，simple的配置簡單得多，但已經有了瀏覽器自動刷新，生產環境代碼壓縮等功能。

vue init simple CMS-of-Blog

如下是Vue-Cli生成的webpack的配置文件，我只作了一點小改動。

話說React.js裏就沒用像Vue-Cli這樣好用的腳手架，仍是Vue.js簡單優雅。。

Webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
        publicPath: '/public/',
        filename: 'build.js',
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.html$/,
                loader: 'vue-html'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: '[name].[ext]?[hash]'
                }
            }
            , {
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=50000&name=[path][name].[ext]'
            }
        ]
    },
    babel: {
        presets: ['es2015'],
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false,
            },
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ])
}

能夠看出尤大大幫咱們把瀏覽器自動刷新，熱加載和生產環境的代碼壓縮都寫好了，簡直超貼心。

然而實際項目中，我仍是碰到一個麻煩的問題，下面是package.json中的script腳本

"scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "watch": "webpack --progress --color --watch",
    "server": "supervisor ./server/www"
  },

運行

npm run dev

後，瀏覽器在8080端口開了一個服務器，然而這個服務器是用來服務前端頁面的，也就是說，從這裏啓動服務器而不是開啓Node服務器會形成數據沒法交互，畢竟這個服務器不能鏈接數據庫。但這個端口是能夠在文件修改以後自動刷新瀏覽器的。

而後，經過分別執行

npm run watch
npm run server

來偵聽文件改動，並重啓Node服務器，此時瀏覽器是不能自動刷新的。找了一些方法但終歸沒解決。習慣了自動瀏覽器刷新，碰到這種狀況蠻蛋疼的。

因而只好這樣：

在修改樣式的時候使用8080端口的服務器，在修改數據交互的時候手動刷新在3000端口服務器的瀏覽器。

雖然不是很方便，但至少經過supervisor不用本身重啓Node服務器了。。。

關於Vue-Router
由於寫的是但也應用（SPA），服務器不負責路由，因此路由方面交給Vue-Router來控制。

下面是根組件，路由控制就在這裏，組件掛載在body元素下：

main.js

let router = new VueRouter()

router.map({
    '/': {
        component: Archive
    },
    'login': {
        component: Login
    },
    '/article': {
        component: Article
    },
    '/console': {
        component: Console,
        subRoutes: {
            '/': {
                component: ArticleList
            },
            '/editor': {
                component: Editor
            },
            '/articleList': {
                component: ArticleList
            },
            '/menu': {
                component: Links
            },
            'account': {
                component: Account
            },
        },
    },
})
let App = Vue.extend({
    data(){
        return {}
    },
    components: {Waiting,Pop,NightSky,MyCanvas},
    http: {
        root: '/'
    },
    computed: {
        waiting: ()=>store.state.waiting,
        pop:()=>store.state.popPara.pop,
        bg:()=>store.state.bg,
    },
    store
})

router.start(App, 'body')

對應的文檔首頁 index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Blog-CMS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <waiting v-if="waiting"></waiting>
    <pop v-show="pop"></pop>
    <component :is="bg"></component>
    <router-view></router-view>
    <script src="public/build.js"></script>
  </body>
</html>

能夠看到路由控制在body元素下的router-view中。以前的waiting，pop和component元素分別是等待效果（就是轉圈圈）的彈出層，信息的彈出層，和背景樣式的切換。

其實這個index.html是有express經過jade生成的，實際項目中並無html文件，我是把生成好的html放在這裏方便展現。

關於Vue-loader
Vue-loader是Vue官方支持webpack的工具，用來將組件寫在一個文件裏。以前的目錄中，有不少分割好的vue文件，每個文件是一個獨立的組件。

好比，這是一個彈出層的組件：

Pop.vue

<template> <div class="shade"> <div class="content"> <p>{{getPopPara.content}}</p> <div class="button"> <button class="ok" @click="ok">肯定</button> <button class="cancel" @click="cancel" v-if="getPopPara.cb2">取消 </button> </div> </div> </div> </template> <script> import {getPopPara} from '../vuex/getters' export default{ vuex: { getters: { getPopPara, } }, methods: { ok(){ let fn = this.getPopPara.cb1 typeof fn == 'function' && fn() }, cancel(){ let fn = this.getPopPara.cb2 typeof fn == 'function' && fn() } } } </script> <style lang="sass"> @import "../SCSS/Pop.scss"; </style>

每個vue文件都有三個部分（實際上是可選的），分別是template，script和style，這也很好理解，就是把html，JS和CSS合併在一塊兒寫了嘛。

這個彈窗組件，經過vuex得到其餘組件傳遞過來的參數，參數是一個對象，包括彈出層的展現信息和點擊肯定或取消時的回調函數。

由於編輯器不支持在vue文件中用sass語法，因此我把sass文件放在外部，經過@import引入。

關於Vue-Resource
Vue-Resource能夠當作一個與Vue集成的Ajax庫，用來建立xhr和獲取xhr的response。

由於和Vue高度集成，因此在vue組件中使用很方便。

Article.vue

<template> <div class="wrap"> <my-header></my-header> <section class="article"> <article class="post-block"> <div class="post-title">{{title}}</div> <div class="post-info">{{date}}</div> <div class="post-content" v-html="content | marked"> </div> </article> </section> <my-footer></my-footer> </div> </template> <script> import myHeader from './MyHeader.vue' import myFooter from './MyFooter.vue' import marked from '../js/marked.min.js' import {bgToggle} from '../vuex/actions' export default{ data(){ return { title: '', date: '', content: '' } }, filters: { marked }, created(){ let id = this.$route.query.id this.$http.get('/article?id=' + id) .then((response)=> { let body = JSON.parse(response.body) this.content = body.content this.title = body.title let d = new Date(body.date) this.date = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' }, (response)=> { console.log(response) }) }, components: { myHeader, myFooter }, ready(){ this.bgToggle('MyCanvas') }, vuex:{ actions:{ bgToggle } } } </script> <style lang="sass"> @import "../SCSS/Article.scss"; </style>

Article.vue組件種在created生命週期時建立併發送了一個xhr的get請求，在獲取成果後把response對象中的屬性在賦值給data中相應的屬性，vue會自動更新視圖。

博客所支持的markdown語法的關鍵所在也在這個組件裏。

<div class="post-content"> {{{content | marked}}} </div>

經過引入markdown的filter使得輸出的html直接被轉換成html結構，仍是很方便的。

關於後端
後端是用node.js做爲服務器的，使用了最流行Express框架。

主體是由Express生成，自己十分精簡。在實踐中修改的地方主要是添加了各類前端發送的get和post請求。

router.get('/article', function (req, res, next) {
    var id = req.query.id
    db.Article.findOne({_id: id}, function (err, doc) {
        if (err) {
            return console.log(err)
        } else if (doc) {
            res.send(doc)
        }
    })
})