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

solocoder 發布于2019-06-26 17:17 / 443人閱讀

摘要：此項目我會長期更新，希望能和大家一起學習，共同進步更新本項目的版本基于開發，后端用進行了重寫。

感悟

歷時兩個多月，終于利用工作之余完成了這個項目的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瀏覽器演示 添加到主屏

啟動效果

首頁效果

文章頁效果

更多效果大家可通過線上演示地址查看

本地運行項目

安裝mongodb并啟動

安裝git工具

克隆項目到你的本地

修改配置項信息，/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
}

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

結語

關于如何部署到線上和部署https，后面會更新相關教程。此項目我會長期更新，希望能和大家一起學習，共同進步

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

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

GPU云服務器云服務器支持node.js的云服務器支持markdown的博客 vue條件渲染 node博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19031.html

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

摘要：此項目我會長期更新，希望能和大家一起學習，共同進步更新本項目的版本基于開發，后端用進行了重寫。感悟歷時兩個多月，終于利用工作之余完成了這個項目的1.0版本，為什么要寫這個項目？其實基于vuejs+nodejs構建的開源博客系統有很多，但是大多數不支持服務端渲染，也不支持動態標題，只是做到了前后端分離，對于博客類系統seo肯定很重要，索性就自己動手寫了這個項目，其中也遇到了不少問題，...

xiaoxiaozi 2019-08-20 18:02 評論0 收藏0
Vue.js實踐：一個Node.js+mongoDB+Vue.js的博客內容管理系統

摘要：項目來源以前曾用過搭建自己的博客網站，但感覺很是臃腫。所以一直想自己寫一個博客內容管理器。正好近日看完了各個插件的文檔，就用著嘗試寫了這個簡約的博客內容管理器。關于后端后端是用作為服務器的，使用了框架。項目來源以前曾用過WordPress搭建自己的博客網站，但感覺WordPress很是臃腫。所以一直想自己寫一個博客內容管理器。正好近日看完了Vue各個插件的文檔，就用著Vue嘗試寫...

Dr_Noooo 2019-08-20 11:07 評論0 收藏0
用vue搭建的個人博客介紹----mapblog小站

摘要：后端主要使用的框架，數據庫采用。后臺管理登錄采用與后端進行登陸狀態的確認。本文首發于小站，這是一個積累和分享知識的個人博客這篇文章擱置了很長時間，最終決定還是把它寫出來，給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識，從一個vue小白變成了一個入門級選手，并最終完成了這個個人博客的搭建工作，代碼已托管在Github-justJokee。...

Ashin 2019-06-26 17:40 評論0 收藏0
vue 博客優化，服務端渲染(SSR)指南

摘要：現在我們需要在服務端和瀏覽器之間開啟一個中間層用于服務端渲染。問題設置的配置文件這樣我們的層才能獲取到的，并在客戶端將登陸時將保存下來，同時返回給客戶端。這樣用戶在刷新頁面時，會通過并帶上請求服務器獲取數據。 vue 博客優化，服務端渲染(SSR)指南對已有的單頁應用進行改造，優化，使之成為一個具有良好seo的應用 github地址WdBly博客地址安裝 git clone htt...

KnewOne 2019-08-23 13:00 評論0 收藏0