摘要：基于Node.js平臺(tái)，開發(fā)一套風(fēng)格簡(jiǎn)約、性能優(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）。功能模塊包括用戶、文章、分類搜索三大模塊，用戶分為訪客、博主、管理員，不同身份的用戶對(duì)文章具有不同的操作權(quán)限，分類搜索模塊有助于用戶精準(zhǔn)地查詢感興趣的文章，節(jié)省用戶搜索知識(shí)的時(shí)間。

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

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

文章編號(hào)：1009-3044（2020）09-0071-02

1 背景

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

2 技術(shù)選型

2.1 Node.js

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

2.2 Vue.js

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

2.3 Koa.js

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

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

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

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

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

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

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

4.1 富文本編輯器

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

4.2 路由模塊

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

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

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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

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