首頁 > 文章 > web前端 > 新手如何透過Vue.js + Node.js打造個人博客

新手如何透過Vue.js + Node.js打造個人博客

零到壹度原創: 2018-03-26 10:34:472817瀏覽

本文主要給大家介紹了新手如何透過Vue.js + Node.js打造個人博客，文中透過範例程式碼介紹的非常詳細，對大家學習具有一定的參考學習價值，希望能幫助到大家。

方案

UI風格：主要參考Randy's Blog的風格，並加入自己的一點想法（主要是為了偷懶）。
前端頁面：基於Vue2.0的響應式SPA，啊？你問我為什麼？就如《關於》中的自我介紹：我自認為擅長Vue的SPA開發。
後台：前端工程師通往全端的捷徑：Node.js。負責寫入介面及渲染靜態頁面。
資料庫：原計畫是用MongoDB，但為了趕進度，索性資料庫都不用了，第一版就先這樣吧。
文章：參考hexo用markdown文法寫好文章再轉成html的做法。也是在本地編輯好md格式的文章，上傳到伺服器，Node.js直接讀取md檔案並轉換為html,回傳給前台，這也是為什麼暫時不需要資料庫的原因。
部署：AWS，一年時間免費使用！你問我一年後怎麼辦？ God knows!也許一年時間已經讓我經歷了從入門到放棄。

揚帆！起航！

頁面佈局：自己看Cloud's Blog，簡單介紹下。第一畫面為一張壁紙寬高皆為100%鋪滿整個視覺區域，內容有部落格名稱、小標題及三個關於部落客的連結；點擊向下箭頭捲動進入第二螢幕正題，分為四個Tab模組：【首頁】、【文章】、【作品】、【關於】。預設為【首頁】，即最新一篇文章詳情，【文章】為文章列表，點擊可閱讀文章內容，【作品】為作品列表，這部分還沒完成，【關於】為關於博主的一些介紹。 PS：首屏的壁紙在Google圖片裡找了一上午才找到這張還算滿意的，考慮到手機端壁紙是居中鋪滿整個可視區域，要找到一張PC端手機端效果都還行且逼格不能太低的圖片真的不容易，BTW，部落客還是選擇困難症患者。
前端開發：從Vue鷹架開始

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ 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库不再是vue-resource,而是axios
```
然後就可以開始碼靜態頁面了，根據第一步頁面佈局的思路寫出靜態頁面應該不是什麼難事，其中需要調用第三步中node.js提供的接口，這裡就不再多說了。完成靜態頁面後編譯
```
$ npm run build
```
後端開發：建立服務端目錄結構並安裝express框架及marked用於將md檔案轉為html
```
$ mkdir blog-server && cd blog-server
$ mkdir public
$ npm install --save express$ npm install --save marked
```
寫入接口，目前主要有三個接口。

渲染靜態頁面，將第二部編譯出來的靜態檔案及md格式的文章檔案拷入public資料夾，並用express內建的中間件指定public資料夾為靜態資源檔案的根目錄並緩存。因為是單頁應用，所以記得要處理好404錯誤。
```
# server.jsvar express = require(&#39;express&#39;);var app = express();
app.use(express.static(&#39;public&#39;,{maxAge:60*60*24*30}));
app.get(&#39;/&#39;,function(req,res){
 res.sendFile(&#39;/index.html&#39;,{root: __dirname + &#39;/public/&#39;});
});
app.listen(80);
```

取得文章清單介面。 fs.readdir方法讀取md檔案所在資料夾，傳回所有md檔案的檔案名稱即文章標題、建立時間、文章路徑，並依建立時間排序渲染在【文章】頁。
文章內容介面。根據第一個介面傳回的檔名及路徑，用fs.readFile方法讀取md檔的內容並用marked轉為html並傳回給客戶端，渲染在文章內容頁。

首頁內容介面。類似介面2，讀取最新一篇文章並回傳。記得處理跨域問題。

app.all(&#39;*&#39;, 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",&#39; 3.2.1&#39;)
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

部署

#申請AWS（亞馬遜雲端主機），一年免費試用，需填寫信用卡資料。實例一台EC2，win或Linux系統,推薦Linux。開放對應連接埠並安裝node.js。
安裝PM2，並執行第三步驟的server.js服務,並讓PM2隨系統啟動。
```
$ npm install -g PM2
$ pm2 start server.js
$ pm2 startup
```
此时我们的博客系统已经运行在EC2上了。

购买域名。在腾讯云上购买的xyz域名，第一年8块钱。解析到该EC2的公网IP上，即可通过域名访问。

以上是新手如何透過Vue.js + Node.js打造個人博客的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：NodeJS之前端註冊頁面下一篇：NodeJS之前端註冊頁面

看更多