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

關(guān)鍵詞：Node.js;Vue.js;Koa.js;mavon-editor;SPA;分類

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A

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

1 背景

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

2 技術(shù)選型

2.1 Node.js

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

2.2 Vue.js

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

2.3 Koa.js

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

3 系統(tǒng)設(shè)計

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

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

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

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

4 核心模塊實現(xiàn)

4.1 富文本編輯器

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

4.2 路由模塊

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

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

4.3 對象關(guān)系映射

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

5 結(jié)束語

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

參考文獻(xiàn)：

[1]黃宜修.軟件公司知識分享系統(tǒng)的設(shè)計與實現(xiàn)[D].杭州：浙江大學(xué)，2011.

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

[3]錢磊，寧少淳.基于知識共享協(xié)議的數(shù)字作品分享平臺設(shè)計與實現(xiàn)【Jl.軟件導(dǎo)刊，2017，16（9）： 126-129.

[4]柳志強，陜粉麗.基于NodejS的聊天系統(tǒng)的設(shè)計與實現(xiàn)[Jl.電腦知識與技術(shù)，2017，13（13）： 69-70.

[5]何錫浩，單玉剛.基于nodejs的校園智能視頻監(jiān)控系統(tǒng)設(shè)計和實現(xiàn)[J].電腦知識與技術(shù)，2019，15（36）： 198-200.

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

[7]羅路騰，王貴鑫.基于Springboot的博客網(wǎng)站的設(shè)計與實現(xiàn)[J].科學(xué)技術(shù)創(chuàng)新，2019（33）： 64-66.

[8]鄒競瑩.Node.JS博客系統(tǒng)的設(shè)計與實現(xiàn)[D].哈爾濱：黑龍江大學(xué)，2016.

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

【通聯(lián)編輯：謝媛媛】

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