vue+node支持服務端渲染的博客系統

感悟

歷時兩個多月，終於利用工做之餘完成了這個項目的1.0版本，爲何要寫這個項目？其實基於vuejs+nodejs構建的開源博客系統有不少，可是大多數不支持服務端渲染，也不支持動態標題，只是作到了先後端分離，對於博客類系統seo確定很重要，索性就本身動手寫了這個項目，其中也遇到了很多問題， 由於基於服務端渲染的項目很少，本身能力也有限，因此用了好長時間。這裏特別感謝@lincenying，提供了登陸功能的解決思路，也是我在開發過程當中遇到最難解決的問題，本項目基於vue-hackernews-2.0開發，支持PWA(需升級爲https)，演示地址：https://www.86886.wang，項目地址：https://github.com/wmui/essay

開發環境和技術棧

操做系統：windows 10 64位
開發工具 ：webstrom sublime
前端：vue.js + vue-router + vuex
後端：node.js + mongodb (採用express框架)

特點功能

支持服務端渲染
支持標題動態切換
支持PWA
支持markdown語法，樣式採用github風格，代碼高亮
支持文章保存爲草稿
支持標籤和歸檔功能

pc端效果圖

首頁效果圖

代碼高亮效果圖

後臺發佈頁面

後臺文章列表

修改我的信息

手機端效果圖，以chrome瀏覽器演示

添加到主屏

啓動效果

首頁效果

文章頁效果

更多效果你們可經過線上演示地址查看

本地運行項目

1. 安裝mongodb並啓動
2. 安裝git工具
3. 克隆項目到你的本地
4. 修改配置項信息，/server/settings.js，你也能夠默認不修改，默認用戶名:q，默認密碼：q

let user = 'q';
let pass = md5('q');
let avatar = 'avatar.jpg';//頭像
let intro ='Never too old to learn';
let nickname = 'vueblog';
module.exports = {
    dbUrl:'mongodb://localhost:27017/vueblog',
    user:user,
    pass:pass,
    avatar:avatar,
    intro:intro,
    nickname:nickname
}

1. 打開本地終端，執行npm run dev ,訪問http://localhost:8080

結語

關於如何部署到線上和部署https，後面會更新相關教程。此項目我會長期更新，但願能和你們一塊兒學習，共同進步

更新： 本項目的2.0版本基於Nuxt.js開發，後端用Koa + Mongoose進行了重寫。

GitHub: https://github.com/wmui/essay