基于NodeJS的開發(fā)者交流社區(qū)

基于NodeJS的開發(fā)者交流社區(qū)平臺設(shè)計與實現(xiàn)DesignandImplementationofaDeveloperCommunicationCommunityPlatformBasedonNodeJS摘要本論文旨在解決現(xiàn)有的技術(shù)交流社區(qū)網(wǎng)站的不完善問題，以現(xiàn)有的各類社區(qū)作為主要研究對象?；谥髁鞯拈_發(fā)語言和工具，包括React、Antd、NodeJS、MongoDB等框架和數(shù)據(jù)庫，設(shè)計并實現(xiàn)一款運行于PC端瀏覽器上的技術(shù)交流社區(qū)，給程序員等其他技術(shù)人員提供一個全面的交流平臺。本系統(tǒng)基于MVVM設(shè)計模式，在前后端架構(gòu)上選取流行的模式（分離前后臺），選用React作為前臺的主要技術(shù)棧，而后端則選用Node.js，數(shù)據(jù)庫則選取非關(guān)系型數(shù)據(jù)庫MongoDB，各類編程語言結(jié)合VSCode編輯器使得本系統(tǒng)具有較高的實用性、拓展性。系統(tǒng)主要功能包含發(fā)表技術(shù)文章、發(fā)表沸點動態(tài)、在線加好友、在線聊天等。關(guān)鍵詞：React；NodeJS；MongoDB；SPA；技術(shù)社區(qū)；開發(fā)者AbstractThisthesisaimstosolvetheimperfectproblemoftheexistingtechnicalcommunicationcommunitywebsite,andtakesvariousexistingcommunitiesasthemainresearchobject.Thetechnologyusedisbasedonmainstreamdevelopmentlanguagesandtools,includingReact,Antd,NodeJS,MongoDBandotherframeworks.Anddatabase,designandimplementaPC-basedbrowsertechnologycommunicationcommunity，provideprogrammersandothertechnicalpersonnelwithacomprehensivecommunicationplatform.MVVMisthecornerstoneofthissystem,usingacompletelyseparatefrontandbackendform,thefrontendusesFiberReactisanarchitecture.ThebackendusesNodeJStobuildasingleapplication.Thedatabaseusesanon-relationaldatabaseMongoDB.Variousprogramminglanguages??combinedwiththeVSCodeeditormakethissystemhighlypracticalandscalable.Themainfunctionsofthesystemincludepublishingtechnicalarticles,publishingboilingpointdynamics,addingfriendsonline,onlinechat,etc.Keywords：React;NodeJS;MongoDB;SPA;Technologycommunity;Developer

目錄第一章緒論 第一章緒論1.1研究背景目的和意義近幾年，互聯(lián)網(wǎng)產(chǎn)業(yè)飛速磅礴發(fā)展，計算機作為互聯(lián)網(wǎng)的主要載體，發(fā)揮了重要的作用，正因為如此，計算機軟件開發(fā)行業(yè)也快速崛起，從而催生出了軟件開發(fā)工程師這個職業(yè)，并且程序員數(shù)量日益增多，眾所周知，知識是沒有國界的，那么眾多的程序員如何互相交流，分享知識呢?博客（Blog），以用戶聯(lián)系為基礎(chǔ)，用戶可以在其上發(fā)布各種內(nèi)容，包括但不限于隨筆、感想、技術(shù)交流等，它是一個網(wǎng)絡(luò)平臺，用戶可以在該平臺上建立自己的圈子和社區(qū)，借此來分享信息。博客（Blog）是網(wǎng)絡(luò)發(fā)展的潮流下催生的優(yōu)秀產(chǎn)物，它的分享性強，快速傳播，有效地將“你”、“我”、“他”三者結(jié)合。特別是對于軟件開發(fā)人員來說，需要一個能將自己的想法、開發(fā)經(jīng)驗、開發(fā)心得分享給其他開發(fā)者、能汲取到其他開發(fā)者的知識的平臺。博客類似于一個社交網(wǎng)絡(luò)，每一個用戶不僅僅只是一個觀眾（Visitor），觀閱自己有興趣的信息，同時也是一個分享者（Sharer），將自己的知識分享給他人。用一句話來概括：“人皆可聽，人皆可言，人皆可寫”[1]。但是，對于開發(fā)者這一專業(yè)的群體來說，僅僅依靠博客來單純地發(fā)表文章、評論是遠遠不夠的。進而，需要一個功能更為完善的平臺，姑且稱它為——社區(qū)。目前，市面上已經(jīng)有很多技術(shù)交流社區(qū)，諸如CSDN、掘金、思否、開發(fā)者頭條等……以上這些都是比較知名的平臺。它們都在博客的基礎(chǔ)上，添加了發(fā)表動態(tài)、發(fā)表想法等功能，這讓眾多開發(fā)者可以在閑暇時間去舒緩自己的心情。諸如掘金、思否、CSDN等社區(qū)，基本功能是很完善的，但是仍然存在一些欠缺的點，比如缺少私信功能。因為開發(fā)者對于代碼、各類文件、圖片的需求是很大的，僅僅依靠文章評論作為運輸載體肯定是不夠的，所以需要“私信”。什么是私信?簡單來說就是在線聊天，兩個開發(fā)者可以在交流平臺上進行遠程的在線聊天，利用本系統(tǒng)在線聊天室提供的發(fā)送文件、發(fā)送代碼、發(fā)送圖片等輔助型功能進行更深層級的交流。以下為本系統(tǒng)的主要特點：高交流性：在保持博客的基本功能前提下，增加的在線聊天室，使得開發(fā)者可以通過實時添加、刪除好友，來進行高質(zhì)量、隨時隨地的在線聊天。高性能：采用Redis作為緩存數(shù)據(jù)庫，解決點贊、統(tǒng)計在線情況的需求。1.2論文總體結(jié)構(gòu)本系統(tǒng)前端采用React，后端采用NodeJS，數(shù)據(jù)存儲則選用MongoDB。React作為前端三大框架之一，以其“組件化”的思想收獲了一大批開發(fā)者；NodeJS則是一個后起之秀；MongoDB作為一個非關(guān)系型數(shù)據(jù)庫，其優(yōu)質(zhì)的特性可以與NodeJS完美融合；Redis作為數(shù)據(jù)緩存數(shù)據(jù)庫，有效的解決點贊時產(chǎn)生的性能問題。以下為本論文的大致框架：第一章：論文緒論，簡要概述本論文的研究背景、研究目的、技術(shù)架構(gòu)等。第二章：介紹本系統(tǒng)采用的各種技術(shù)棧，包括前端、后端、數(shù)據(jù)庫，以及各技術(shù)的特點。第三章：需求分析模塊，以功能導向為基礎(chǔ)，提前規(guī)劃整個系統(tǒng)，包括需求是否可行，需求是否合理等。第四章：系統(tǒng)設(shè)計板塊，著重對整個系統(tǒng)的數(shù)據(jù)庫加以設(shè)計，包括字段可行性、字段拓展性等。第五章：系統(tǒng)實現(xiàn)和測試，利用編程技術(shù)，結(jié)合需求分析的結(jié)果，對系統(tǒng)加以實現(xiàn)和完善；并最終進行自測，對于明顯的BUG加以解決。第六章：論文總結(jié)部分，也是整篇論文的收尾工作，包括系統(tǒng)的結(jié)構(gòu)優(yōu)化、功能優(yōu)化、代碼優(yōu)化，以及對于整篇論文的總結(jié)和展望。

第二章系統(tǒng)有關(guān)技術(shù)2.1ReactJSReact.js是一個幫助前端開發(fā)者構(gòu)建頁面UI的庫，與Vue、Angular同屬前端的優(yōu)秀框架之一。React會在數(shù)據(jù)流發(fā)生變化的情況下，利用內(nèi)部的調(diào)和、調(diào)度機制更新組件（聲明式）；聲明式使得React代碼更加健壯，利于開發(fā)者們?nèi)フ{(diào)試糅合，并且可維護性大大提高；此外，React將界面分成了獨立的小塊，每一塊就是一個組件，這些組件之間可以相互嵌套、組合，借此可以輕松地在應用中傳遞數(shù)據(jù)，并使得狀態(tài)與DOM分離，這就是組件化[4]。本系統(tǒng)前端采用React，后端采用NodeJS，數(shù)據(jù)存儲則選用MongoDB。React作為前端三大框架之一，以其“組件化”的思想收獲了一大批開發(fā)者，React的聲明式特性，使得創(chuàng)建交互式的UI視圖變得輕而易舉，配合redux，當數(shù)據(jù)改變時能有效地更新并且正確渲染組件，通過聲明式編寫的UI，可以讓代碼更加可靠，方便調(diào)試，并且可維護性大大提高[3]。本系統(tǒng)采用目前主流的前后端分離的開發(fā)模式，利用SPA架構(gòu)，結(jié)合較為前沿的主流編程技術(shù)棧進行開發(fā)。前后端分離模式利用其可維護性強、用戶體驗友好等特點，解決傳統(tǒng)的不分離模式下存在的前后端開發(fā)人員工作不合理、代碼健壯性差的問題；SPA架構(gòu)則是近幾年較為流行的，中文又稱“單頁應用”，隨著用戶體驗標準的提高，傳統(tǒng)的多頁應用（MPA）已經(jīng)無法滿足用戶的審美，SPA架構(gòu)下，B/S類型的網(wǎng)站可以在不刷新頁面的情況下獲取后端數(shù)據(jù)，所有的路由由前端統(tǒng)一管理，據(jù)此可以實現(xiàn)各種過度動畫效果，提升用戶體驗[2]。2.2NodeJSNode.js是一個基于ChromeV8引擎的JavaScript運行時[5]。他的目標是幫助開發(fā)者構(gòu)建可伸縮且高度化的應用程序，編寫能夠處理上萬條同時連接在一個物理機的高并發(fā)代碼[6]。Node.js有很多內(nèi)置的模塊，比如文件（fs）、網(wǎng)絡(luò)（http）、process（進程）等，使得開發(fā)者可以對計算機底層進行更深層次的操作；并且它的語法是以JavaScript為基礎(chǔ)的，使得前端開發(fā)者可以快速上手；Node.js是以事件做為驅(qū)動的，這使得開發(fā)者可在不借助線程的情況下開發(fā)出一個高并發(fā)的服務(wù)器，相較于其它編程語言來說，Node.js在高并發(fā)下的性能是極好的。Node.js提出了模塊化的概念，每個文件都屬于一個模塊，各個模塊之間互不影響，這解決了遺留很久的變量重復等問題；其通過npm來進行包管理，開發(fā)者只需執(zhí)行相應的命令，便可在npm包市場下載所需要的工具包。2.3SPA架構(gòu)傳統(tǒng)的B/S（Broswer/Server，瀏覽器/服務(wù)器）模式下的web開發(fā)存在很多問題，比如前后端工作冗雜，分工不明確，所有的工作幾乎由后端獨自完成，并且產(chǎn)出的代碼無法復用，重構(gòu)困難[2]。這種情況下，多頁應用（MPA，multiplepagewebapplication）極為流行。但是，隨著互聯(lián)網(wǎng)的不斷發(fā)展，用戶對于視覺和感官體驗的要求越來越高，多頁應用由于要頻繁的刷新整個頁面，用戶體驗極為不好，所以應允的出現(xiàn)了SPA，它提倡單個html文件，也就是說所有的模塊都在同一個html文件里面來展現(xiàn)，瀏覽器在首次渲染時加載所需的HTML、CSS、JavaScript資源，所有的操作都在該html中進行。單頁應用具有以下特點：速度快：可以在不刷新頁面的情況下發(fā)送并接收后端數(shù)據(jù)，并且可以按需請求數(shù)據(jù)，避免頁面刷新之后再次請求造成的性能問題。用戶體驗友好：前端開發(fā)者可以控制路由，來實現(xiàn)各種過渡動畫效果。路由：路由由前端統(tǒng)一控制,并且在錨點跳轉(zhuǎn)之后，不會重新刷新頁面。業(yè)務(wù)邏輯：偏向前端，前端利用AJAX獲取數(shù)據(jù)，并負責渲染到頁面。2.4模塊化在Node.js時期，涌現(xiàn)出了“模塊化”這個詞匯，每個JavaScript文件都屬于一個小模塊，里面包含了自己的變量、自己的方法，各個模塊之間互不影響，只需要將該模塊想分享給其它模塊的變量或者方法暴露出去就可，這解決了遺留很久的變量重復等問題；此外，一個個小的模塊，通過組合的方式，可以形成npm包，npm理所當然的成為了Node.js最受喜愛的包管理，開發(fā)者只需執(zhí)行相應的命令，便可在npm包市場下載所需要的工具包?，F(xiàn)在Web3.0時代已經(jīng)到來，Web2.0也早已滲透到互聯(lián)網(wǎng)各處，前端的整個生態(tài)鏈深受Node.js影響，目前前端各種構(gòu)建工具都基于Node.js，隨著前端代碼結(jié)構(gòu)上的不斷增大、可維護性要求越來越高，模塊化會變得愈發(fā)重要。2.5MongoDBMongoDB是非關(guān)系型數(shù)據(jù)庫的一種，存儲的數(shù)據(jù)格式是JSON形式的，易學易用，對于本系統(tǒng)是非常合適的。MongoDB廣泛應用于不同規(guī)模的公司和多個行業(yè)，它的數(shù)據(jù)模式不是一塵不變的，也就是說，當你的應用迭代時，它也可以很靈敏的升級更新，另外，像MySql提供的多級索引，n表查詢等功能，MongoDB也有提供，由此可見，它非常適合項目周期短，快速上手的項目。同時，MongoDB具有較強的可拓展性、高性能等特點，可以部署多服務(wù)器集群，并完美解決多服務(wù)器互相依賴的情況下，機器故障的問題；再者，得益于內(nèi)存計算，MongoDB可以進行高性能的數(shù)據(jù)讀取與寫入[7]。2.6Webpack隨著大前端的興起，以及Web、H5等應用的體積不斷增大，開發(fā)難度大大提高，說明前端已經(jīng)不可或缺。從復雜龐大的管理后臺，到對性能要求苛刻的移動網(wǎng)頁，再到類似于ReactNative的原生應用開發(fā)方案，通過直接編寫JavaScript、CSS、HTML開發(fā)Web應用的方式已經(jīng)無法應對當前Web應用的發(fā)展[8]。Webpack作為一款優(yōu)秀的打包工具，可以將JavaScript、CSS代碼以及各種圖片，打包在一起，可以在瀏覽器中使用。并且，由于SPA模式的盛行，網(wǎng)站的功能和源代碼變得愈發(fā)復雜、龐大，進而Web開發(fā)向模塊化演進。同時，Webpack可以在眾多的打包工具中脫穎而出，成為構(gòu)建工具的首選，原因如下：一體化：Webpack將一系列能做的工作，包括打包、壓縮、性能優(yōu)化，統(tǒng)統(tǒng)處理了，留給開發(fā)者的只剩下專心的處理業(yè)務(wù)邏輯。生態(tài)圈：Webpack具有強大的生態(tài)圈和維護團隊，以及眾多的使用者，可以提供良好的保障能力。健壯性：Webpack被大量團隊所使用，容錯性和BUG大幅度減少，可以很輕松的于互聯(lián)網(wǎng)上找到教程和開發(fā)經(jīng)驗。2.7AntDesign原始的網(wǎng)站開發(fā)，只需編寫簡單的CSS樣式，但是隨著Web3.0時代的到來，以及Web2.0時代的大量普及，為了保持良好的重構(gòu)性，以提供最好的性能，有時多個模塊，或者多個項目都需要使用同一塊樣式，這時候傳統(tǒng)的方式，就會變得難以復用，捉襟見肘了。所以，為了更有效、更快速地編寫健壯地CSS樣式代碼，就需要將樣式和腳本封裝起來，使用的時候直接調(diào)用其提供的接口即可，這就是UI框架。AntDesign是一款優(yōu)秀的UI框架，可以與React.js完美搭配，開發(fā)出美觀實用的站點，隨著商業(yè)化的趨勢，愈來愈多的企業(yè)級產(chǎn)品對更好的用戶體驗要求有了現(xiàn)象級的提升，AntDesign以自然性、確定性、意義感、生長性為基礎(chǔ)，提供給開發(fā)者一套完美的CSS模塊化解決方案，讓開發(fā)者專注于更好的用戶體驗。2.8RedisRedis是一個以鍵值對作存儲的緩存數(shù)據(jù)庫，提供了多種數(shù)據(jù)結(jié)構(gòu)，比如字符串、集合、散列等，使得開發(fā)者可以選用合適的形式進行存儲。Redis基于內(nèi)存，這就使得它可以進行更快速的讀寫操作，據(jù)此可以實現(xiàn)點贊等較為頻繁的數(shù)據(jù)庫讀寫操作。同時，Redis基于它優(yōu)秀的拓展性以及強大的并發(fā)性，可以存儲大批量的數(shù)據(jù)，并且在高并發(fā)的情景下，也能高質(zhì)量的讀寫，這一點，相對于MySql等其它數(shù)據(jù)庫來說，可以說是最大的優(yōu)勢所在，因此，對于開發(fā)社區(qū)這種中小站點來說，是極為合適的。第三章系統(tǒng)分析3.1系統(tǒng)市場可行性分析目前已存在的眾多技術(shù)交流社區(qū)，諸如掘金、思否等并沒有為眾多開發(fā)者提供一個功能完善、體驗優(yōu)良的在線聊天系統(tǒng)，當開發(fā)者需要私聊或者分享資料時，就不得不去添加其它好友，是極為不便利的。因此，本系統(tǒng)有必要站出來，通過內(nèi)置的聊天室模塊，抓準市面上眾多的技術(shù)社區(qū)共同的痛點，有針對性地提出一整套地解決方案。本站點實現(xiàn)可持續(xù)運行地道路就是與其它平臺進行積極的溝通和合作，據(jù)此為眾多開發(fā)者提供一個優(yōu)質(zhì)地交流社區(qū)，提升用戶體驗。3.2系統(tǒng)可操作性分析 本系統(tǒng)基于傳統(tǒng)的B/S（Browser/Server，瀏覽器端/服務(wù)端）架構(gòu)，旨在為廣大開發(fā)者提供一個優(yōu)質(zhì)的社區(qū)平臺，系統(tǒng)整體操作簡潔明了，與已存在的各類平臺類似。本系統(tǒng)設(shè)計的原則就是不僅要功能實用，更要操作方便，也要界面優(yōu)美，吸引用戶，本系統(tǒng)采用“綠色”作為主色調(diào)，綠色象征和平寧靜，意義在于讓開發(fā)者可以在社區(qū)內(nèi)得到更大的技術(shù)提升，以及得到充分的身心放松。3.3系統(tǒng)MVVM架構(gòu)設(shè)計分析3.3.1傳統(tǒng)MVC架構(gòu)實現(xiàn)視圖層（View）業(yè)務(wù)邏輯層（視圖層（View）業(yè)務(wù)邏輯層（Controller）數(shù)據(jù)層（Model）數(shù)據(jù)庫圖3-1MVC3.3.2增強型MVVM結(jié)構(gòu)實現(xiàn)本系統(tǒng)采用增強型MVVM架構(gòu)，如圖3-2所示：圖3-2MVVM架構(gòu)MVVM模式相較于傳統(tǒng)的MVC模式，消除了Controller之間的耦合性；可測試性；可移植性，由VM層則替代了傳統(tǒng)的Controller層。View代表視圖層，也就是DOM樹，ViewModel代表前端的數(shù)據(jù)流管理，比如Redux，Model就是數(shù)據(jù)庫層。View層的所有改變只能由ViewModel層來直接控制。3.3.3MVVM架構(gòu)處理業(yè)務(wù)邏輯MVVM將業(yè)務(wù)邏輯統(tǒng)一放置于VM層中管理，每個系統(tǒng)根據(jù)功能進行區(qū)分，每個功能點又拆分為獨立的子系統(tǒng)，各個系統(tǒng)互相協(xié)同，配合完成整套的業(yè)務(wù)流程，前端部分如圖3-3所示：登錄注冊模塊邏輯登錄注冊模塊邏輯文章管理模塊邏輯動態(tài)管理模塊邏輯VM（ViewModel）聊天系統(tǒng)邏輯好友系統(tǒng)邏輯足跡系統(tǒng)邏輯圖3-3MVVM架構(gòu)處理業(yè)務(wù)邏輯圖3-4為整套的業(yè)務(wù)流程：把一個整體的系統(tǒng)拆分為多個子模塊，以功能作為劃分的的主要依據(jù)，各子模塊之間互相不干擾，各自處理邏輯功能：登錄注冊模塊登錄注冊模塊文章管理模塊動態(tài)模塊聊天模塊ViewModel業(yè)務(wù)邏輯層Redis緩存數(shù)據(jù)庫MongoDB數(shù)據(jù)庫后端用戶路由后端文章路由后端動態(tài)&足跡路由后端聊天路由圖3-4整體業(yè)務(wù)流程3.4系統(tǒng)主要功能需求分析登陸注冊功能：登錄之后的權(quán)限認證，采用目前流行的JWT（jsonwebtoken）技術(shù)，jwt驗證可以有效的解決傳統(tǒng)的Cookie認證存在的可拓展性差、XSRF（跨站請求偽造）的問題。Token和Cookie盡不相同，服務(wù)端不用保存用戶的登錄信息，而是在每次HTTP請求的Header部分添加Authorization字段即可，并且Token還支持攜帶其它有用的數(shù)據(jù)。在線人數(shù)統(tǒng)計功能：為了更好的統(tǒng)計網(wǎng)站流量，需要對網(wǎng)站在線訪客加以統(tǒng)計，由于傳統(tǒng)的HTTP協(xié)議無法實時收發(fā)數(shù)據(jù)，屬于半雙工通信，故采用Websocket，用戶登錄本系統(tǒng)之后，系統(tǒng)自動websocket請求，后端將當前用戶的ID保存至Redis緩存中。Websocket基于HTTP，是全雙工通信的，也就是說，客戶端和服務(wù)端分別可以接收和主動發(fā)送數(shù)據(jù)。后端采用Redis存儲用戶的在線狀態(tài)，因為在線狀態(tài)是隨時變化的，此時為了服務(wù)端的性能，減少數(shù)據(jù)庫的讀寫操作，故采用Redis。加好友功能：用戶A可以在網(wǎng)站內(nèi)添加用戶B為好友，進行更近一步的私聊。用戶B可以實時的接收到用戶A發(fā)出的加好友請求，不需要重載頁面，如何實時的接收數(shù)據(jù)呢?就需要Websocket，基于Webscoket的全雙工通信機制，服務(wù)端在接收到用戶A發(fā)出的加好友請求之后，可以主動的推送該消息給用戶B，無需用戶B主動請求。具體的流程如圖3-5所示：單聊功能：如果用戶A和用戶B互為好友，那么在雙方的好友列表中對方都是存在的。本系統(tǒng)采用自定義的ID作為每個單聊的唯一標識，該ID通過組合用戶A和用戶B的userId來實現(xiàn)。加好友加好友44444好友請求圖STYLEREF3\s0SEQ圖\*ARABIC\s31圖STYLEREF3\s0SEQ圖\*ARABIC\s32用戶A用戶B互為好友同意ss拒絕圖3-5好友申請流程3.5系統(tǒng)流程設(shè)計由于本系統(tǒng)采用前后端完全分離的開發(fā)模式，所以將主要的邏輯都交予前端處理，后端部分只需要負責數(shù)據(jù)存儲和讀取。前端界面采用組件化的React和高度可定制的UI框架AntDesign，旨在為用戶呈現(xiàn)出精美的網(wǎng)站；前端腳本采用TypeScript，TypeScript（TS）是JavaScript（JS）的超集，它可以在眾多的平臺上運行，TypeScript提供了一系列強大的類型聲明，比如接口（Interface）、類（Class）、命名空間（Namespace）、泛型等，TypeScript始于JavaScript，歸于JavaScript，并且具有強大的工具用來構(gòu)建大型應用程序。本系統(tǒng)采用Axios作為HTTP請求的工具，用來與后端進行數(shù)據(jù)交互，Axios是一款非常優(yōu)秀的Ajax請求框架，它基于Promise，可以同時在前端和后端使用，它提供了一套攔截方案，可以針對符合特定要求的HTTP請求和HTTP響應，進行攔截處理，并且在數(shù)據(jù)過濾方面，還可自行將文本轉(zhuǎn)換為JSON格式的數(shù)據(jù)，非常適合本項目。本系統(tǒng)的總體流程，如圖3-6所示：用戶社區(qū)首頁注冊成功注冊功能用戶社區(qū)首頁注冊成功注冊功能登錄功能登錄成功功能模塊沸點個人中心話題聊天室寫文章文章詳情圖3-6系統(tǒng)大體流程第四章系統(tǒng)設(shè)計4.1系統(tǒng)體系結(jié)構(gòu)設(shè)計瀏覽器（Browser）服務(wù)端（Server）數(shù)據(jù)存儲（Database）系統(tǒng)的主要面向用戶群體，用戶瀏覽器（Browser）服務(wù)端（Server）數(shù)據(jù)存儲（Database）系統(tǒng)的主要面向用戶群體，用戶通過系統(tǒng)提供的UI界面，進行發(fā)表文章、聊天等各種操作，通過Ajax將數(shù)據(jù)發(fā)送給后端處理瀏覽器發(fā)送的HTTP請求，對數(shù)據(jù)庫進行增刪改查后，將數(shù)據(jù)返回給瀏覽器持久化保存用戶數(shù)據(jù)，其中包括緩存數(shù)據(jù)庫和持久化數(shù)據(jù)庫兩個部分圖4-1系統(tǒng)構(gòu)思圖B/S（瀏覽器/服務(wù)器，Browser/Server）架構(gòu)，相對于C/S（客戶端/服務(wù)器，Client/Server）架構(gòu)，有幾個比較突出的優(yōu)點：B/S架構(gòu)下，用戶只需操作瀏覽器，極大的降低了使用門檻，開發(fā)者不需要關(guān)注用戶操作系統(tǒng)的差異性，因此開發(fā)者在開發(fā)過程中把所有精力投入到業(yè)務(wù)邏輯的開發(fā)而不是項目的最終部署。B/S架構(gòu)下，可以在一定程度減少客戶端上的資源消耗和投入，對于用戶來說，他們更傾向于一個節(jié)省資源的訪問方式，而不是大費周章的下載客戶端安裝包。B/S架構(gòu)下，大大的節(jié)省了開發(fā)人員的開發(fā)周期，并且后續(xù)的可維護性也比C/S架構(gòu)下的系統(tǒng)高。4.2系統(tǒng)數(shù)據(jù)關(guān)系設(shè)計（1）文章實體，如圖4-2所示：文章信息已閱用戶文章標題文章信息已閱用戶文章標題創(chuàng)建時間文章模式文章類型文章ID文章評論更新時間文章描述文章內(nèi)容沸點ID圖片內(nèi)容沸點評論沸點ID圖片內(nèi)容沸點評論創(chuàng)建時間文本內(nèi)容話題ID沸點項圖4-3沸點項實體圖話題ID沸點列表關(guān)注用戶話題ID沸點列表關(guān)注用戶發(fā)表用戶話題描述創(chuàng)建時間話題名稱話題項圖4-4話題項實體圖（4）足跡實體，如圖4-5所示：關(guān)注用戶關(guān)注用戶關(guān)注話題發(fā)表文章收藏文章點贊沸點發(fā)表沸點點贊文章足跡圖4-5足跡實體圖評論ID評論人ID評論ID評論人ID圖片內(nèi)容文章ID文本內(nèi)容回復列表創(chuàng)建時間文章評論圖4-6文章評論實體圖單聊標識ID最后會話更新時間單聊標識ID最后會話更新時間創(chuàng)建時間最后會話時間消息總數(shù)消息列表接收方發(fā)起方單聊圖4-7單聊實體圖消息ID更新時間單聊消息ID更新時間單聊ID未讀消息創(chuàng)建時間消息內(nèi)容消息類型接收方發(fā)送方單聊圖4-8單聊消息實體圖4.3系統(tǒng)數(shù)據(jù)表設(shè)計開發(fā)者交流社區(qū)系統(tǒng)為了保證多個子模塊的可行性以及彼此之間的互相協(xié)同配合，就需要基于實體的屬性關(guān)系，制定相對完善的數(shù)據(jù)庫表，如下多表為其中的幾個數(shù)據(jù)表展示：（1）用戶數(shù)據(jù)表，如表4-1所示。表4-1用戶表名稱類型空默認值其他備注_idString否auto_increment標識IDusernameString否空用戶名userpwdString否空密碼，加密usergenderString否空性別useravatarString是‘’頭像create_timeNumber是Date.now()注冊時間update_timeNumber是Date.now()更新時間articlesArray是[]文章列表attentionObject是[]關(guān)注followersArray是[]關(guān)注者列表friendsArray是[]好友列表chat_memoryArray是[]聊天歷史列表notificationsArray是[]通知列表activitiesArray是[]動態(tài)列表tracksArray是[]足跡列表pinsArray是[]沸點列表collectionsArray是[]收藏夾列表profile_cover_imgString是‘’封面圖片addressString是‘’地址websiteString是‘’個人站點introductionString是‘’個人介紹jobString是‘’職業(yè)educationString是‘’學歷bind_third_partyObject是{}第三方綁定（2）單聊消息數(shù)據(jù)表，如表4-2所示。表4-2單聊消息表名稱類型空默認值其他備注chat_idString否空所屬單聊ID_idObject否空auto_increment自增IDfrom_member_idObject否空發(fā)送人IDto_member_idObject否空接收人IDcontent_typeString否空消息類型(image|files|plain|contentString否空消息內(nèi)容create_timeNumber是空Date.now()創(chuàng)建時間update_timeNumber是空Date.now()更新時間（3）沸點數(shù)據(jù)表，如表4-3所示。表4-3沸點表名稱類型空默認值其他備注_idObject否auto_increment自增IDauthor_idObject否空發(fā)布者IDtopic_idObject否空所屬話題IDcontent_plainString是‘’文本內(nèi)容content_imageString是‘’圖片內(nèi)容content_linkString是‘’鏈接內(nèi)容commentsArray是[]評論列表create_timeNumber是Date.now()創(chuàng)建時間update_timeNumber是Date.now()更新時間第五章系統(tǒng)實現(xiàn)與測試5.1項目整體結(jié)構(gòu)本項目整體偏向前端，由于前端利用Node.js來進行項目搭建，所以將前后端項目源碼一起放置于同個項目文件夾內(nèi)部，如圖5-1所示：圖5-1項目整體結(jié)構(gòu)圖前端源代碼目錄如圖5-2所示：圖5-2前端源碼結(jié)構(gòu)圖后端源代碼目錄如圖5-3所示：圖5-3后端整體結(jié)構(gòu)圖5.2登錄模塊登錄模塊主要采用jwt（jsonwebtoken）技術(shù)做權(quán)限認證，并且集成了Github第三方登錄，因為開發(fā)人員對于Github是很熟悉的，所以新老用戶可以使用Github賬號直接登錄，Github登錄的流程如圖5-4所示：圖5-4Github登錄流程圖前端主要邏輯：登錄時，將用戶輸入的用戶名和密碼通過Ajax發(fā)送到后端，再根據(jù)后端返回的JSON信息進行路由跳轉(zhuǎn)以及持久化存放用戶ID等操作后端主要邏輯：后端接收到前端傳遞過來的用戶登錄數(shù)據(jù)，在判斷用戶信息是否合理的同時,也要進行token的更新，以及用戶狀態(tài)讀取5.3文章模塊在本系統(tǒng)內(nèi)部，用戶可以創(chuàng)建并發(fā)表不同類型的文章，包括但不僅僅局限于前端、后端、數(shù)據(jù)庫、運維等，同時，發(fā)表文章是有明確的權(quán)限控制的，也就是說，未登錄的用戶不能發(fā)表文章。后端接收到前端提供的文章信息，進行數(shù)據(jù)庫的讀寫操作，主要針對文章數(shù)據(jù)表（Posts）來進行，同時需要更新用戶數(shù)據(jù)表（User），將該文章ID同步添加至用戶創(chuàng)建的文章列表內(nèi)，后端部分邏輯如圖5-5所示：圖5-5發(fā)表文章后端邏輯圖5.4沸點模塊用戶可以在沸點分享自己的感想和心情，沸點可以說是一個小型的社交平臺，沸點模塊的前端主要代碼如圖5-6所示：圖5-6沸點布局圖沸點模塊的后端邏輯,主要是進行常規(guī)的沸點增刪改查,以及創(chuàng)建用戶足跡等。5.5話題模塊話題模塊也是本系統(tǒng)的一個內(nèi)置亮點功能，本系統(tǒng)內(nèi)置了20多種話題，比如報offer、今日最佳、內(nèi)推招聘等，用戶可以將自己的沸點發(fā)表到對應的話題下。話題模塊的后端主要工作,同樣是話題的添加,但是本系統(tǒng)目前的設(shè)定是：暫時只能由系統(tǒng)管理員來創(chuàng)建新的話題，后續(xù)可能會開放給普通用戶。5.6聊天模塊這是本系統(tǒng)最大的亮點模塊，也是本系統(tǒng)對于市面上已知的同類型網(wǎng)站的功能上的補充，用戶可以在通過好友申請，添加對方為好友，進而進行私聊，并且在私聊中可以發(fā)送圖片、文件、代碼等，聊天模塊的前端路由設(shè)計，如圖5-7所示：圖5-7聊天頁前端路由設(shè)計圖前后端的數(shù)據(jù)交互采用Websocket來傳輸，包括好友申請、聊天消息發(fā)送和接收等。當接收方同意好友申請方的請求時，后端的主要處理邏輯如圖5-8所示：圖5-8同意好友申請后端邏輯圖5.7足跡模塊足跡系統(tǒng)記錄了每個用戶的行為，包括用戶點贊、好友申請、發(fā)表文章、收藏文章等，但是足跡功能有很多需要注意的點，以點贊文章為例，后端的主要邏輯如圖5-9所示：圖5-9創(chuàng)建足跡后端主要邏輯圖5.8收藏模塊收藏模塊包括收藏文章和收藏沸點兩部分，用戶瀏覽到自己喜歡的文章，可以將其添加至收藏夾，以供后續(xù)閱讀，后端的主要代碼如圖5-10所示：圖5-10創(chuàng)建收藏夾后端邏輯圖5.9各模塊測試結(jié)果登錄界面，前端對用戶輸入的賬戶名以及密碼作是否為空和字段合理性校驗，符合規(guī)范則跳轉(zhuǎn)至首頁部分，如圖5-11所示：圖5-11登錄頁圖系統(tǒng)主頁，如圖5-12所示：圖5-12系統(tǒng)主頁圖沸點主頁，進入沸點首頁，默認展示一個話題，并且發(fā)布沸點框位于中央,利于吸引用戶的眼球，激發(fā)用戶的創(chuàng)作欲望，此外，發(fā)布沸點時，可以選擇上傳圖片和選擇一個對應的話題，但是上傳圖片的數(shù)量是有限制的，前端已經(jīng)做了判斷處理，同時發(fā)布沸點時必須選擇一個話題，便于后端作分類處理，如圖5-13所示：圖5-13沸點主頁圖話題主頁，包括我關(guān)注的話題，和全部話題，用戶可以在此處關(guān)注自己感興趣地話題，當完成關(guān)注話題后，該話題圖標會出現(xiàn)在“我關(guān)注地話題”下，如圖5-14所示：圖5-14話題主頁圖話題詳情頁，對于每個話題，進行詳細的介紹，并展示該話題內(nèi)部的沸點列表。整個話題頁的布局思想與沸點頁一致，采取左中右的布局形式，同時將沸點發(fā)布框置于相對中央的位置，右側(cè)則介紹該話題并展示了該話題包括的沸點數(shù)以及關(guān)注的用戶數(shù)，同時，也會將在該話題下發(fā)表過沸點的用戶一一列出，如圖5-15所示：圖5-15話題詳情頁圖點擊關(guān)注按鈕，會關(guān)注該話題，該話題會出現(xiàn)在“我關(guān)注的話題”列表內(nèi)部，如圖5-16所示：圖5-16關(guān)注話題圖發(fā)表沸點，創(chuàng)建新的沸點，并發(fā)表到對應的話題下面，前端已經(jīng)做了相應的數(shù)據(jù)驗證，當點擊發(fā)布按鈕時，前端會分別驗證沸點內(nèi)容是否為空、上傳的圖片數(shù)量是否超出限制、上傳的圖片大小是否符合規(guī)范、圖片格式是否支持，最重要的是是否已經(jīng)選擇了話題，如圖5-17所示：圖5-17發(fā)表沸點圖發(fā)表文章頁，可以使用富文本編輯器來編輯文章，因為本系統(tǒng)主要面向的用戶群體都是開發(fā)者，所以就采用了富文本作為主要語言，由于文章的數(shù)據(jù)表定義了文章類型、文章形式、文章頭圖、文章標簽等多個字段，所以前端也根據(jù)這種思路來進行頁面布局，如圖5-18所示：圖5-18發(fā)表文章圖通知系統(tǒng)，當用戶點擊我的沸點或者文章、申請好友、好友申請狀態(tài)改變、文章被收藏時，都會有實時的通知提醒，這是通過Websocket實現(xiàn)的，當用戶進行如上操作時，前端會實時的通知后端，旨在提供更好的用戶體驗，如圖5-19所示：圖5-19點贊通知圖文章控制，在文章詳情頁，主人和訪客都可以進行點贊文章、收藏文章等操作，當看到自己喜歡的文章時，可以將其添加到自定義的文件夾里面，方面日后閱讀，如圖5-20所示：圖5-20收藏文章圖在個人中心內(nèi)部，可以編輯用戶的個人信息等，這里是有權(quán)限區(qū)分的，如果是主人訪問，則前端控制并暴露出“編輯個人信息”和“上傳頭像”按鈕入口，用戶可以訪問特定的頁面；如果是訪客訪問，那么就隱藏上述兩個入口。另外，在上傳頭像時，也進行了圖片的格式、大小等判斷，如圖5-21所示：圖5-21上傳頭像圖個人中心的足跡模塊，記錄了當前用戶所有的行為，包括發(fā)表文章、發(fā)表沸點、點贊文章、點贊沸點、收藏文章、添加好友、關(guān)注話題、關(guān)注用戶等，這是本系統(tǒng)的附加功能，可以有效地提升用戶體驗，如圖5-22所示：圖5-22個人足跡圖個人中心的文章區(qū)塊，可以很清晰的查看到自己發(fā)表的文章，并且這些文章會按照時間由近到遠的順序依次排列，方便用戶搜尋，其實，此處還可以添加一個搜索功能，當用戶創(chuàng)作的文章過多時，可以很便捷的檢索到想要的文章，如圖5-23所示：圖5-23個人文章圖個人中心的收藏區(qū)塊，可以很清楚的看到用戶創(chuàng)建的收藏夾，提供了兩個入口，入口一為進入該收藏夾詳情頁，收藏夾詳情頁詳盡的列出了用戶已收藏的文章信息、并且可以編輯收藏夾，比如添加圖片等；入口二為刪除收藏夾，如圖5-24所示：圖5-24個人收藏圖如果用戶想查看自己關(guān)注了哪些人和話題，可以在個人中心的關(guān)注選項卡中找到，并且還可以進行關(guān)注操作，極大的方便了用戶，如圖5-25所示：圖5-25個人關(guān)注圖在設(shè)置模塊的賬號管理區(qū)塊，用戶可以自行綁定或者解綁第三方賬號，包括微信、微博、Github、郵箱、手機號等，由于開發(fā)者重度依賴Github，所以提供一個Github登錄入口非常重要，如圖5-26所示：圖5-26賬號關(guān)聯(lián)區(qū)塊圖于文章詳情頁，除了正常地評論，用戶還可以進行加好友和關(guān)注操作，這也是本系統(tǒng)設(shè)計的唯一地加好友入口，當申請好友時，也可以附帶備注信息，好友申請的界面如圖5-27所示：圖5-27申請好友彈窗圖當用戶接收到好友申請時，首頁通知欄會實時的提示，此時用