新手如何通過(guò)Vue.js+Node.js打造個(gè)人博客

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:58:23

新手如何通過(guò)Vue.js+Node.js打造個(gè)人博客

新手如何通過(guò)Vue.js+Node.js打造個(gè)人博客:本文主要給大家介紹了新手如何通過(guò)Vue.js + Node.js打造個(gè)人博客，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，希望能幫助到大家。方案UI風(fēng)格：主要參考Randy's Blog的風(fēng)格，并加入自己的一點(diǎn)想法（主要是為了偷懶）。前端頁(yè)面：

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀新手如何通過(guò)Vue.js+Node.js打造個(gè)人博客:本文主要給大家介紹了新手如何通過(guò)Vue.js + Node.js打造個(gè)人博客，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，希望能幫助到大家。方案UI風(fēng)格：主要參考Randy's Blog的風(fēng)格，并加入自己的一點(diǎn)想法（主要是為了偷懶）。前端頁(yè)面：

本文主要給大家介紹了新手如何通過(guò)Vue.js + Node.js打造個(gè)人博客，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，希望能幫助到大家。

方案

UI風(fēng)格：主要參考Randy's Blog的風(fēng)格，并加入自己的一點(diǎn)想法（主要是為了偷懶）。

前端頁(yè)面：基于Vue2.0的響應(yīng)式SPA，??？你問我為什么？就如《關(guān)于》中的自我介紹：我自認(rèn)為擅長(zhǎng)Vue的SPA開發(fā)。

后臺(tái)：前端工程師通向全棧的捷徑：Node.js。負(fù)責(zé)寫接口及渲染靜態(tài)頁(yè)面。

數(shù)據(jù)庫(kù)：原計(jì)劃是用MongoDB，但為了趕進(jìn)度，索性數(shù)據(jù)庫(kù)都不用了，第一版就先這樣吧。

文章：參考hexo用markdown語(yǔ)法寫好文章再轉(zhuǎn)成html的做法。也是在本地編輯好md格式的文章，上傳到服務(wù)器，Node.js直接讀取md文件并轉(zhuǎn)化為html,返回給前臺(tái)，這也是為什么暫時(shí)不需要數(shù)據(jù)庫(kù)的原因。

部署：AWS，一年時(shí)間免費(fèi)使用哦！你問我一年后怎么辦？God knows!也許一年時(shí)間已經(jīng)讓我經(jīng)歷了從入門到放棄。

揚(yáng)帆！起航！

頁(yè)面布局：自己看Cloud's Blog，簡(jiǎn)單介紹下。第一屏為一張壁紙寬高均為100%鋪滿整個(gè)可視區(qū)域，內(nèi)容有博客名稱、小標(biāo)題及三個(gè)關(guān)于博主的鏈接；點(diǎn)擊向下箭頭滾動(dòng)進(jìn)入第二屏正題，分為四個(gè)Tab模塊：【首頁(yè)】、【文章】、【作品】、【關(guān)于】。默認(rèn)為【首頁(yè)】，即最新一篇文章詳情，【文章】為文章列表，點(diǎn)擊可閱讀文章內(nèi)容，【作品】為作品列表，這部分還沒完成，【關(guān)于】為關(guān)于博主的一些介紹。PS：首屏的壁紙?jiān)贕oogle圖片里找了一上午才找到這張還算滿意的，考慮到手機(jī)端壁紙是居中鋪滿整個(gè)可視區(qū)域，要找到一張PC端手機(jī)端效果都還行且逼格不能太低的圖片真的不容易，BTW，博主還是選擇困難癥患者。
前端開發(fā)：從Vue腳手架開始

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack blog
# 安裝依賴，走你
$ cd blog
$ npm install
$ npm run dev

然后安裝Vue-router用于SPA路由及vue-resource或axios用于Ajax。
```
$ npm install --save vue-router
$ npm install --save axios
# vue官方推薦的ajax庫(kù)不再是vue-resource,而是axios
```
然后就可以開始碼靜態(tài)頁(yè)面了，根據(jù)第一步頁(yè)面布局的思路寫出靜態(tài)頁(yè)面應(yīng)該不是什么難事，其中需要調(diào)用第三步中node.js提供的接口，這里就不再多說(shuō)了。完成靜態(tài)頁(yè)面后編譯
```
$ npm run build
```
后端開發(fā)：創(chuàng)建服務(wù)端目錄結(jié)構(gòu)并安裝express框架及marked用于將md文件轉(zhuǎn)為html
```
$ mkdir blog-server && cd blog-server
$ mkdir public
$ npm install --save express$ npm install --save marked
```
寫接口，目前主要有三個(gè)接口。
渲染靜態(tài)頁(yè)面，將第二部編譯出來(lái)的靜態(tài)文件及md格式的文章文件拷入public文件夾，并用express內(nèi)置的中間件指定public文件夾為靜態(tài)資源文件的根目錄并緩存。因?yàn)槭菃雾?yè)應(yīng)用，所以記得要處理好404錯(cuò)誤。
```
# server.jsvar express = require('express');var app = express();
app.use(express.static('public',{maxAge:60*60*24*30}));
app.get('/',function(req,res){
 res.sendFile('/index.html',{root: __dirname + '/public/'});
});
app.listen(80);
```

獲取文章列表接口。fs.readdir方法讀取md文件所在文件夾，返回所有md文件的文件名即文章標(biāo)題、創(chuàng)建時(shí)間、文章路徑，并按創(chuàng)建時(shí)間排序渲染在【文章】頁(yè)。
文章內(nèi)容接口。根據(jù)第一個(gè)接口返回的文件名及路徑，用fs.readFile方法讀取md文件的內(nèi)容并用marked轉(zhuǎn)為html并返回給客戶端，渲染在文章內(nèi)容頁(yè)。

首頁(yè)內(nèi)容接口。類似接口2，讀取最新一篇文章并返回。記得處理跨域問題。

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

部署
申請(qǐng)AWS（亞馬遜云主機(jī)），一年免費(fèi)試用，需填信用卡信息。實(shí)例一臺(tái)EC2，win或Linux系統(tǒng),推薦Linux。開放相應(yīng)端口并安裝node.js。
安裝PM2，并運(yùn)行第三步的server.js服務(wù),并讓PM2隨系統(tǒng)啟動(dòng)。
```
$ npm install -g PM2
$ pm2 start server.js
$ pm2 startup
```
此時(shí)我們的博客系統(tǒng)已經(jīng)運(yùn)行在EC2上了。
購(gòu)買域名。在騰訊云上購(gòu)買的xyz域名，第一年8塊錢。解析到該EC2的公網(wǎng)IP上，即可通過(guò)域名訪問。