成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue+node支持服務(wù)端渲染的博客系統(tǒng)

solocoder / 496人閱讀

摘要：此項(xiàng)目我會長期更新，希望能和大家一起學(xué)習(xí)，共同進(jìn)步更新本項(xiàng)目的版本基于開發(fā)，后端用進(jìn)行了重寫。

感悟

歷時(shí)兩個(gè)多月，終于利用工作之余完成了這個(gè)項(xiàng)目的1.0版本，為什么要寫這個(gè)項(xiàng)目？其實(shí)基于vuejs+nodejs構(gòu)建的開源博客系統(tǒng)有很多，但是大多數(shù)不支持服務(wù)端渲染，也不支持動(dòng)態(tài)標(biāo)題，只是做到了前后端分離，對于博客類系統(tǒng)seo肯定很重要，索性就自己動(dòng)手寫了這個(gè)項(xiàng)目，其中也遇到了不少問題， 因?yàn)榛诜?wù)端渲染的項(xiàng)目不多，自己能力也有限，所以用了好長時(shí)間。這里特別感謝@lincenying，提供了登錄功能的解決思路，也是我在開發(fā)過程中遇到最難解決的問題，本項(xiàng)目基于vue-hackernews-2.0開發(fā)，支持PWA(需升級為https)，演示地址：https://www.86886.wang，項(xiàng)目地址：https://github.com/wmui/essay

開發(fā)環(huán)境和技術(shù)棧

操作系統(tǒng)：windows 10 64位
開發(fā)工具 ：webstrom sublime
前端：vue.js + vue-router + vuex
后端：node.js + mongodb (采用express框架)

特色功能

支持服務(wù)端渲染
支持標(biāo)題動(dòng)態(tài)切換
支持PWA
支持markdown語法，樣式采用github風(fēng)格，代碼高亮
支持文章保存為草稿
支持標(biāo)簽和歸檔功能

pc端效果圖 首頁效果圖

代碼高亮效果圖

后臺發(fā)布頁面

后臺文章列表

修改個(gè)人信息

手機(jī)端效果圖，以chrome瀏覽器演示 添加到主屏

啟動(dòng)效果

首頁效果

文章頁效果

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

本地運(yùn)行項(xiàng)目

安裝mongodb并啟動(dòng)

安裝git工具

克隆項(xiàng)目到你的本地

修改配置項(xiàng)信息，/server/settings.js，你也可以默認(rèn)不修改，默認(rèn)用戶名:q，默認(rèn)密碼：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
}

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

結(jié)語

關(guān)于如何部署到線上和部署https，后面會更新相關(guān)教程。此項(xiàng)目我會長期更新，希望能和大家一起學(xué)習(xí)，共同進(jìn)步

更新： 本項(xiàng)目的2.0版本基于Nuxt.js開發(fā)，后端用Koa + Mongoose進(jìn)行了重寫。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/19031.html

相關(guān)文章

  • vue+node支持服務(wù)端渲染的博客系統(tǒng)

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

    xiaoxiaozi 評論0 收藏0

  • Vue.js實(shí)踐：一個(gè)Node.js+mongoDB+Vue.js的博客內(nèi)容管理系統(tǒng)

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

    Dr_Noooo 評論0 收藏0

  • 用vue搭建的個(gè)人博客介紹----mapblog小站

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

    Ashin 評論0 收藏0

  • vue 博客優(yōu)化，服務(wù)端渲染(SSR)指南

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

    KnewOne 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<