基于Node.js多人博客系統的設計與實現

摘要：基于Node.js平臺，開發一套風格簡約、性能優異的多人博客系統。前端技術棧為Vue.j s+vue-router+iView，后端技術棧為Koa.js+sequlize+mysql，富文本編輯器采用與Vue深度集成的mavon-editor，路由的切換由vue-router完成，是典型的SPA（ single page application）。功能模塊包括用戶、文章、分類搜索三大模塊，用戶分為訪客、博主、管理員，不同身份的用戶對文章具有不同的操作權限，分類搜索模塊有助于用戶精準地查詢感興趣的文章，節省用戶搜索知識的時間。

關鍵詞：Node.js;Vue.js;Koa.js;mavon-editor;SPA;分類

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）09-0071-02

1 背景

隨著知識經濟時代的到來，知識已經日漸成為個人、企業、國家發展的核心力量[1]。互聯網煩瑣冗余的知識碎片難免令人感到暈眩和焦慮[2]，這是對知識缺乏篩選造成的，缺乏一個快捷方便的工具，去收集整理某領域實用的知識或經驗。同時，一部分人渴望能有一個平臺記錄、分享學習或工作中的知識[7]，博客系統應運而生。然而，國內外眾多博客系統較為臃腫，充斥著許多與文章主題無關的元素。人們對功能和效率的追求逐漸提高，對網絡博客的文章也是如此[8]，為用戶打造簡約、高性能的博客系統具有重要意義。本文基于Node.js開發了一套風格簡約的多人博客系統，旨在為用戶提供精簡記錄、分享知識的平臺，并且通過細粒度的標簽分類和關鍵字搜索，用戶能夠快速、精準地獲取到感興趣的知識，節省用戶的時間。

2 技術選型

2.1 Node.js

Node.js是一個基于Chrome V8引擎的JavaScript運行時環境，被設計用來構建可伸縮的網絡應用程序。Node.js使用事件驅動、非阻塞1/0模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。npm （Node package manag-er）是Node.js的包管理器，解決了Node.js平臺上代碼部署的諸多問題，通過npm命令可以方便地下載、安裝、卸載、升級、查詢第三方軟件包。在Node.js平臺上開發Web應用，還能統一前后端開發的編程語言，減少開發者的學習成本。

2.2 Vue.js

Vue.js，簡稱vue，是一套專注于構建用戶界面的漸進式Ja-vascript框架，具有高性能、靈活性強的特點[6]。vue遵循漸進增量的設計原則，使其可以方便地集成到現有的項目中，這一特性使得vue既可以快速構建出較小的原型，也可以構建出復雜的大型web應用。作為vue的核心功能之一，響應式的數據系統，能通過輕量式的虛擬DOM引擎，自動、高效更新用戶界面，避免以往命令式操作DOM所帶來的弊端，簡化前端開發的流程和開發效率，同時大大提高了系統后期的可維護性。

2.3 Koa.js

后臺框架選用Koa.js，Koa.js是基于Node.js平臺的下一代web開發框架，致力于成為一個更小、更富有表現力、更健壯的web框架。使用koa編寫web應用，可以避免煩瑣的回調函數嵌套，并極大地提升錯誤處理的效率。

3 系統設計

本系統含有用戶、文章、分類搜索等3大功能模塊。

1）用戶模塊：訪問本系統的用戶具有3種身份，分別是訪客、博主、管理員。其中，訪客是指沒有在該系統注冊過的用戶，訪客進入系統后，對網站內的文章僅有瀏覽權限，能夠正常使用分類搜索功能檢索文章。博主是指使用注冊過的賬號登錄本系統，注冊賬號時需要輸入用戶名、密碼以及有效的郵箱，三者均為必填項，博主除了能瀏覽所有文章之外，還具備新增文章、對文章進行點贊的功能。管理員具有最高權限，除了具備博主的所有功能外，還能發出公告、對分類標簽進行管理。

2）文章模塊：文章模塊主要用于對執行文章的增刪改查操作，一篇文章所具有的屬性有id、標題、標題、作者、簡介、封面、內容、瀏覽數、點贊數、分類標簽。其中封面指的是顯示在主頁文章列表中的圖片，用于增強文章吸引力，瀏覽數和點贊數用于甄別文章質量的高低，同一用戶對同一篇文章只能點贊一次，訪客不具備點贊功能，分類標簽是給文章指定一個類別。新增文章時，文章作者自動成為博主的用戶名，無法更改，文章標題、簡介、內容是必填項，分類標簽是必選項，均不能為空。博主只能對自己發表的文章進行修改和刪除，而不能修改或刪除其他博主的文章。

3）分類搜索模塊：分類搜索模塊可進一步拆分為分類標簽子模塊和關鍵字搜索子模塊。其中，分類標簽子模塊是將文章分門別類的一個指標，在每篇文章生成時，都需要選定有且僅有一個的分類標簽，用于將這篇文章歸屬到某個領域，方便對該領域感興趣的用戶可以快速查詢到相關的文章。關鍵字搜索子模塊是在搜索框中輸入文章的關鍵字，后端獲取到該關鍵字后，在數據庫中執行模糊查詢，標題含有相應關鍵字的文章會從數據庫中取出，然后將這些文章渲染到首頁的文章列表。分類標簽和關鍵字搜索兩個子模塊可同時生效，即同時滿足兩個條件的文章才會呈現在用戶面前，因此提供了一種更精確的搜索方法，為用戶查找節省時間。

4 核心模塊實現

4.1 富文本編輯器

富文本編輯器（Rich Text Editor）是一種可內嵌于瀏覽器，所見即所得的文本編輯器，提供了類似于Office Word的編輯功能，用戶不需要掌握HTML語法，也能輕松地在網頁中編輯自己的文章。本系統選用基于Vue的mavon-editor富文本編輯器，引入mavon-editor后，界面主體分為左右兩部分，左邊是支持markdown語法書寫的文本內容，右邊是對應生成的網頁上展示的內容，用戶能實時預覽書寫的內容在網頁上實際展現的效果。通過在mavon-editor標簽中添加vue指令“v-model”，實現文章內容與vue組件中的數據變量雙向綁定，將該變量通過axios存人數據庫，實現文章內容的永久存儲。除此之外，ma-von-editor還內嵌有許多實用的事件方法，比如點擊工具欄中的上傳圖片時，會自動觸發“$imgAdd”方法，開發者通過重寫“$imgAdd”方法實現文章內圖片的上傳。圖片上傳成功后，由于mavon-editor會記錄圖片在文章中的位置信息，開發者只需專注于獲取正確的圖片url，無需操心如何將圖片放置在文章對應的地方，mavon-editor會在插入圖片的位置自動生成圖片的url等信息。

4.2 路由模塊

路由就是根據不同的url地址展示不同的內容或頁面。傳統的Web應用，頁面的切換是通過向后端發送http請求，后端路由處理http請求后跳轉到新的頁面，此過程會刷新瀏覽器頁面，造成重復請求不同頁面中相同的靜態資源的現象，在用戶并發量大或是網絡延遲大的場合，用戶體驗差。而在SPA應用中，頁面的切換是通過前端路由來實現，渲染新頁面的動態數據由前端向后端發送aJax請求獲得，此過程并不會刷新瀏覽器頁面。這也是單頁應用的核心：更新視圖而不重新請求頁面，加載頁面時只更新某個指定的容器中的內容。在SPA應用中，用戶所有的操作都是在同一個頁面中完成，共享資源只需要請求一次即可，用戶體驗較好。

vue-router是與vue.js深度集成的路由插件，用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是使用超鏈接來實現頁面的切換和跳轉的，而vue-router在SPA應用中，負責路徑的切換，也就是組件的切換。結合HTML5中新增的API（Application Programming Interface），可以實現在不刷新頁面的情況下，動態改變頁面的URL，減少http請求，提高用戶體驗。對于使用vue-cli4腳手架生成的vue項目，路由的配置在根目錄下的router/index.js中完成，指定不同路徑所對應的組件，實現全局路由的跳轉配置。可在每一項中添加meta屬性，用于保存每個路徑攜帶的額外信息，比如切換到該路徑時是否需要校驗用戶權限、將瀏覽器標題為meta中指定的字符串等。此外，還能通過路由鉤子函數beforeEach在跳轉到對應頁面之前進行攔截，判斷當前用戶是否可以訪問該頁面，如果權限不夠，則不展示該路徑的內容，并重新定位到另一頁面，提示用戶無訪問權限。

4.3 對象關系映射

ORM（ Object-Relational Mapping）框架，其作用在于把關系型數據庫的表結構映射到對象上，是對soL語句的封裝，通過讀寫JavaScript對象的方式操作數據庫，優雅地生成安全、可維護的soL代碼。Sequelize是一款基于Node.js功能強大的異步ORM框架，同時支持PostgreSQL、MySQL，SQLite、MssoL等多種數據庫，非常適合作為nodejs后端數據庫的存儲接口，避免直接操作煩瑣的SQL語句，提高了開發效率。

5 結束語

本文主要從相關技術、系統設計、核心模塊實現這三個方面，詳細地闡述了基于Node.js平臺多人博客系統的開發設計工作。本系統是典型的SPA，當頁面切換時，瀏覽器無須刷新頁面請求相同的靜態資源，大大提升了用戶體驗，為用戶提供了快速便捷的歸納、整理知識的工具，同時也為不同的用戶架起了分享知識、經驗的橋梁。

參考文獻：

[1]黃宜修.軟件公司知識分享系統的設計與實現[D].杭州：浙江大學，2011.

[2]柳艷，馬毓聯，馬禹晨，等，知識分享平臺盈利模式研究——以某App為例【Jl.營銷界，2019（42）： 61，63.

[3]錢磊，寧少淳.基于知識共享協議的數字作品分享平臺設計與實現【Jl.軟件導刊，2017，16（9）： 126-129.

[4]柳志強，陜粉麗.基于NodejS的聊天系統的設計與實現[Jl.電腦知識與技術，2017，13（13）： 69-70.

[5]何錫浩，單玉剛.基于nodejs的校園智能視頻監控系統設計和實現[J].電腦知識與技術，2019，15（36）： 198-200.

[6]呂英華.漸進式JavaScript框架Vue.js的全家桶應用[J].電子技術與軟件工程，2019（22）： 39-40.

[7]羅路騰，王貴鑫.基于Springboot的博客網站的設計與實現[J].科學技術創新，2019（33）： 64-66.

[8]鄒競瑩.Node.JS博客系統的設計與實現[D].哈爾濱：黑龍江大學，2016.

[9]王璐，崔保磊，潘紅霞，等.基于Vue.js的在線設計開放平臺研究與實現[J].信息技術與信息化，2019（11）： 168-170.

【通聯編輯：謝媛媛】

作者簡介：李嘉明（1993-），男，廣東梅州人，助教，碩士，主要研究方向為物聯網、軟件工程。