基于Node.js和JS的前后端分離實現

張鵬飛 王乾 胡曉冬

摘 ?要： 針對Web開發中前后端耦合問題，在充分分析傳統開發模式的基礎上，提出引入Node.js來解決前后端語言不一致的解決新方案。設計的新架構模式針對小型團隊或個人開發Web項目提出新的方向，從而解決了人力不足，開發耗費巨大，前后端不同語言溝通耦合困難的問題。基于此研究，真實開發了一個基于網頁設計基礎自學平臺，并以此作為可行性檢驗的依據，系統采用B/S架構，后端程序在Node服務器中運行，數據傳輸則采用了Ajax的無刷新技術。后臺添加課程后，用戶經注冊可以達到在線學習的目的，并可以進行實時提問輔助自學過程。方便簡潔的后臺管理系統可以讓管理員及時形象地了解所有用戶實時學習情況，整個系統獨立完整，不依賴其他程序，聯網的瀏覽器即可完成用戶在線，學習后臺實時查看，方便快速，滿足當今社會碎片化時間和快節奏需求。

關鍵詞： Web開發;Node.js;JavaScript;Ajax;前后端分離;在線學習平臺

中圖分類號： TP311.52 ? ?文獻標識碼： A ? ?DOI：10.3969/j.issn.1003-6970.2019.04.003

本文著錄格式：張鵬飛，王乾，胡曉冬，等. 基于Node.js和JS的前后端分離實現[J]. 軟件，2019，40（4）：1117

【Abstract】： Aiming at the problem of front-end coupling in web development， this paper proposes a new solution that introduces Node.js to solve the inconsistency of front-end language by fully analyzing the traditional development mode. The new architectural model of the design proposes a new direction for small teams or individuals to develop Web projects， thus solving the problem of lack of manpower， huge cost of development， and difficulties in communication between front and back. Based on this research， we have developed a self-learning platform based on web design， and use it as the basis of feasibility test， the system adopts B/S architecture， the back-end program runs in Node server， and the data transfer adopts Ajax-free technology. After adding courses in the background， users can achieve the purpose of online learning by registering and can conduct real-time questioning to assist self-study process. Convenient and concise backstage management system can let the administrator timely image to understand all users real-time learning situation， the whole system is independent and complete， do not rely on other programs， internet browser can complete the user online， learning background real-time viewing， convenient and fast， to meet the current social fragmentation time and fast-paced.

【Key words】： Web development; Node.js; JavaScript; Ajax; Front-end separation; Online learning platform

0 ?引言

隨著信息化時代的飛躍式發展，移動通信寬帶大幅提高、資費不斷降低、互聯網業務創新速度加快和移動終端功能逐漸增強，用戶的信息服務需求開始由單一的語音服務和傳統的移動增值服務向互動化、多媒體化、多元化、融合化方向轉變[1]。網上購物、網上支付、網上學習等等，互聯網已經越來越深入的融入我們的生活。Web應用的日益廣泛和Web開發技術的不斷發展，以用戶體驗型網絡服務為特征的Web應用代表了目前互聯網的發展趨勢[2]。

互聯網的急速發展也給web開發帶來了越來越多的困難，復雜的界面交互、龐大的數據傳輸、更強的穩定要求。為提高工作效率和程序性能，當前web開發多采用前后端耦合的開發模式，前后端的發展都越來越高深，想要前后都做好的最好方法就是前后端獨立，然后進行耦合。然而只有大中型公司才有能力進行專分，小公司或個人獨立項目也需要前后端分離卻受限于人力與資金。本文中試圖采用JavaScript解決前后端語言不一致，以Node.js為后端語言，采用MVC模型，使開發成本與開發難度大大減小，并且通過網頁設計基礎自主學習平臺的實例開發，驗證了該模型的可行性。

1 ?Node.js前后端開發特點

1.1 ?為什么使用Node.js

1.1.1 ?傳統Web應用開發流程

在過去，編寫Web應用是一個相當標準化的流程。你有一個或多個服務器部署在機器上并監聽某個端口（如HTTP的80端口），每當服務器接收到一個請求時，它會創建一個進程或者線程去處理和響應請求。處理這些請求會頻繁地與外部服務進行通信，比如數據庫、內存緩存、外部計算服務器或者僅僅是文件系統。當所有的工作最終結束之后，線程或者進程會返回到“可用”服務器池中，這樣服務器就可以處理更多的請求了。這個過程符合人的思維方式，容易讓人理解，編寫程序時也很簡單。但是這中模型有兩個缺點：

（1）資源耗費巨大

創建一個線程就會消耗一定的資源。對于使用PHP和Apache構建的應用，單進程可能需要10MB左右的內存，所以根據業務需求較大那么對內存的要求會很高。對于大型服務器，由于需要不斷的創建新線程來處理請求，很快，服務器的內存就會耗盡，出現反應極慢或假死狀態，嚴重時可導致服務器崩潰。

（2）線程阻塞

由于Web服務器會經常與數據庫、緩存服務器、外部服務器或文件系統進行通信，如果數據量過大，則會家具等待時間，直到這些數據處理完服務器才會返回響應。當服務器等待響應的時候，當前線程就會被‘阻塞，無法繼續進行處理其他數據。因此，消耗的服務器資源和當前進程或線程會被完全凍結，直到外部組件返回響應后，進程或線程才能繼續完成處理，并把結果返回給客戶端，進而等待下一個請求[3]。

1.1.2 ?Node.js的優點

Node.js借助JavaScript特有的事件驅動機制和V8高性能引擎，使得編寫高性能Web服務更加輕而易舉，因為它完全構建在事件驅動、非阻塞的編程模型上，所以它不會出現傳統模式中的線程阻塞，不過Node.js本身是支持同步編程的，所以在一些特殊情況下，也依然是可以滿足需求的。

（1）非阻塞

Node.js是單進程的，新建一個node進程那將是一個全新的進程，兩者之間沒有直接聯系。對于每一個進程，除非異常或手動停止否則它將持續進行。當服務器收到請求，該進程會將請求分發給特定的進程去處理（比如傳給一個數據庫查詢的進程），在特地進程處理上一個請求過程中主進程仍然可以接受請求并進行分發處理，直到上一個請求處理完成返回響應后該進程結束，達到非阻塞目的。

（2）事件驅動

Node.js進程持續進行，當有請求傳入，服務器才開始處理請求，請求就是驅動處理的事件。

2 ?自主學習平臺概述

隨著科學技術的高速發展和知識經濟的興起，教會學生學習，構建終身學習體系，建設學習型社會已經成為當今世界各國教育改革與發展的重要目標。自主學習作為一種有效的學習方式和相對穩定可遷移的學習能力，不僅有利于提高學生的學習成績，也是實現終身學習和畢生發展的前提和基礎[4]。計算機網絡的飛速發展和普及，高校傳統的教育教學管理模式和理念已經不能完全滿足需求。一直以來，加強高校網絡自主學習平臺建設的探索和研究，謀求適合大學生個性化發展的自主學習模式，加強大學生信息化水平和信息素養具有重要作用[5]。

2.1 ?當前在線學習平臺

2.1.1 ?概述

在線學習平臺是學習者通過網絡學習的一種學習媒介，學習者可以在在線學習平臺上獲取學習資源、跟老師進行活動，或者與其他學習者進行交流討論。在線學習平臺可以通過記錄學員在線上參加學習的課程進度、課后練習鞏固程度、模擬考場考試、答疑解惑互相交流等情況，實現對學員學習情況的全程跟蹤管理和對學員學習需求的全面掌握，可以通過對學員學習數據分析的進行學習進度及方向上的調整，讓學習者更加系統、全面、科學的學習。

2.1.2 ?現狀

當前國內的在線學習平臺形形色色，大都采用網上培訓班的方式進行授課，因此授課質量也是魚龍混雜。比較出名的如騰訊課堂，它開設有各種課程，學員購買后就可以得到老師每天按時的在線直播授課。也有一些是個人開設的網課，受人力物力影響只能側重某一方面的學習培訓，不能保證適合所有類型學生。還有一些與高校合作的網絡課平臺，比如超星、智慧樹等。這些平臺收錄國內外知名高校教師的講課視頻，其他高校學生就可以達到資源共享的目的。

但是綜上各種類項在線學習平臺都有一個特點：面向公共客戶，不能制定符合高校內部特定的學習計劃，靈活性較差。因此針對本校網頁設計基礎課程，開發一個符合教師課程講授、易于學生自學的在線學習平臺。

2.2 ?自主學習平臺

自主學習平臺從本校學習安排出發，結合教師個人特色以及學生學習需求，制定符合本校學生學習情況內容安排合理的在線學習內容。平臺內容包含學習大綱，同步視頻，實時文檔，對應課件等一系列與課程相關文件，供學生自學參考。

（1）每門課的每節視頻都由本校授課教師按照教學進度和教學大綱親自錄制。學生既可以以此參考自學，拓展自己學習視野。也可以從中找查漏補缺，彌補自己學習中的不足。

（2）課程對應的主要內容會由授課教師以文檔形式記錄。會上傳到平臺，學生可以在線閱讀或下載后隨時查看。

（3）對應每節課都有專欄討論。針對本節課的任何疑問都可以在次提問，老師會及時進行解答，其他學生可以參與解答。解答問題設有獎勵，以此鼓勵學生進行互相學習。

（4）課程數目、類項、內容可以以高校實際情況進行更改調整。

3 ?自主學習平臺設計

3.1 ?概要

系統采用B/S結構，用戶交互由瀏覽器實現，業務邏輯在服務器實現，數據存儲在數據庫服務器內，構成常見的Web應用三層：界面層（UI）業務邏輯層（BLL）和數據訪問層（DAL）。前端頁面包含首頁、登錄、注冊、課程等頁面。

系統開發采用MVC（Model-View-Controller）框架，將界面展示邏輯（用戶界面）獨立到一些文件中（Views），把一些和用戶交互的程序邏輯（Controller）單獨放在一些文件中，在 Views 和 Controller 中傳遞數據使用一些專門封裝數據的實體對象Models。

3.1.1 ?整體設計

（1）前端頁面包含首頁、登錄、注冊、課程等頁面。

（2）后端服務對頁面發來的數據進行處理、如登陸驗證、課程拉取等。

（3）數據庫內存儲注冊信息、學習進度、視頻地址等數據。

前后端分離但是采用統一語言JavaScript，系統架構如圖1。

3.1.2 ?模塊設計

（1）首頁登錄

首頁為平臺介紹信息，務必信息直觀明了。主頁主要展示平臺基本信息及登錄，且登錄位置明顯，用戶登錄后可執行學習課程及查看個人信息等操作。首次登錄用戶，可在登錄界面直接跳轉到注冊頁面進行注冊然后跳回登錄頁面進行登錄。

（2）課程模塊

課程部分為平臺主題內容。默認展示課程內容章節名稱，點擊章節名稱后展開對應章節課程內容，包括視頻、文檔、案例以及當前章節對應的學生提問。當完成一章學習內容后，系統自動給完成情況進行評分并在個人信息里實時顯示當前學習進度。

（3）學生個人中心

在學生個人中心可以對部分個人信息進行修改，也可以看到當前的學習進度、課程得分情況、提問的回復內容以及教師和系統的通知。

（4）教師后臺管理

教師或管理員可以在教師后臺管理里進行課程的修改、添加、刪除等操作以及查看所有或特定學生的課程完成情況及課程分數。還可以對所有學生或特定進行發送通知或提醒。

3.2 ?詳細設計

用戶進入首頁必須進行登錄，無賬號則需要先進行注冊然后登錄。當用戶登錄后課程與個人中心開放，登錄用戶進入課程主頁后可以在頁面左側看到當前課程的所有章節，點擊章節名稱后展開菜單內出現視頻、課件、案例等選項，選擇后頁面中間區域出現視頻播放區域或文檔展示區域。頁面右側展示當前章節的所有提問信息，登錄用戶可以對其中的問題進行查看和回復。登錄用戶進入個人中心后可以查看個人詳細信息和修改部分信息，也可以查看自己的學習進度和課程分數，另外也可以看到別人對自己提問的解答或者對別人問題的回復。也可以進行查看系統通知或教師的課程通知。

系統由Views、Controller、Data組成。Views部分采用ejs模板以實現視圖兼數據傳遞的作用，該部分發出請求經由Controller處理后對Data中數據進行修改或拉取。系統整體框架如下圖2。

3.2.1 ?主模塊設計

（1）注冊設計

注冊信息包括：姓名，學號，性別，電子郵件以此兩次確認密碼。首先在瀏覽器端進行基本格式校驗，然后以JSON格式傳回服務器與數據庫數據進行比對，如出現學號重復情況則返回錯誤，提示進行修改。注冊信息填寫無誤注冊成功后跳轉到登錄頁面提示用戶進行登錄。

（2）課程主頁設計

章節名稱采用手風琴模式進行垂直排列，用戶點擊某一章節名稱后該章節展開并展示該章節的視頻和文檔，同時向服務器發送請求拉取本章節對應的提問內容。用戶點擊視頻、文檔進行觀看或瀏覽后，系統根據用戶離開時間確定完成進度然后發回服務器在數據庫進行存儲。

（3）個人中心設計

點擊個人信息后向服務器發送請求返回數據庫內存儲的對應個人數據;點擊學習進度后可以拉取視頻、文檔等詳細的進度情況;系統通知模塊采用事件驅動機制，待有通知發來后將通知進行展示。

4 ?自主學習平臺實現

4.1 ?注冊登錄實現

以HTML為基礎搭建了頁面基本框架，以CSS3進行渲染。邏輯語言采用JavaScript，為簡化書寫引入jQuery插件。為實現后期的響應式頁面，頁面引入Bootstrap框架。為與Node.js進行通訊html采用ejs

模板。服務器為Node.js，數據庫為MySQL。系統采用前后端分離開發思想，但是以統一語言Java?Script進行編寫，大大降低程序耦合難度。系統采用MySQL數據庫，設計時充分考慮程序處理的要求、應用環境的需求，斟酌數據庫表結構和字段設置，考慮數據庫各表中的字段類型和長度，盡可能提前預估到可能出現的問題，避免程序設計過程中帶來不必要的麻煩[6]。考慮到系統上傳Linux服務器后的MySQL數據庫對中文支持問題，所以全部改為UTF-8編碼方式。

4.1.1 ?注冊

用戶輸入注冊信息點擊提交后，本地進行基本格式驗證通過后傳入服務端，服務的進行校驗合格后存入數據庫。注冊信息字段表如表1。

系統獲取到用戶輸入信息后通過checkData（）進行基本校驗，驗證通過后經由Ajax發給服務器端進行判斷。響應返回status=‘success后注冊成功跳轉到登錄頁面，否則返回失敗信息，注冊失敗。

4.1.2 ?登錄

系統獲取到用戶登錄數據后通過Ajax發給服務器進行校驗，校驗成功后登錄成功。為避免用戶短時間退出重復登錄，系統通過Session設置了默認保持登錄30分鐘。Session 機制采用的是一種在客戶端與服務器之間保持狀態的解決方案， 由于網頁是一種無狀態的連接程序，因此無法得知用戶的瀏覽狀態。通過Session記錄用戶的有關信息，以供用戶再次以此身份對Web服務器提供要求時作確認[7]。部分關鍵代碼如下：

if （result.type == 'success'） {

req.session.islogin = nbr; /*將用戶學號存入session*/

req.session.username = result.name; /*將用戶姓名存入session*/

res.json（{status：1，name：result.name}）; /*返回成功狀態碼1和姓名*/

}else{

res.json（{status：0}）; /*返回失敗狀態碼0*/

};

4.2 《網頁設計基礎》課程主頁

課程主頁由三列構成，左側部分為課程章節，中間部分為完成情況和視頻、文檔展示區，右側為評論區。選擇左側章節后中間區域展示相應文檔或視頻，右側評論區出現對應章節的提問及回復內容。

4.2.1 ?視頻、文檔模塊實現

視頻播放未采用需另行安裝的繁瑣且安全性有爭議的flash插件。而是采用HTML5自帶

由于瀏覽器不支持原生ppt，所以ppt轉化未PDF后進行瀏覽，ViewerJS是一個非常棒的通用文檔查看器，它完全獨立不依賴其他服務，所以對PDF的瀏覽采用ViewerJS插件，支持縮放、旋轉、打印等功能，滿足在線瀏覽需求。

4.2.2 ?進度獲取

學習內容完成情況用state表征，state為1表示該部分內容完成，為0則表示未完成。數據庫表中設置fileDetail和videoDetail分別用于表示文檔和視頻的每章完成情況[9]，fileRate和videoRate則根據文檔和視頻各自所占權重（由管理員確定）換算得到的分數，score為總體情況得分。詳細字段設置見表2。

4.2.3 ?提問部分

本系統提問部分所用數據庫表的一個特點是將提問內容與回復內容置于一個表中，解決了嵌套表在數據龐大情況下的時效問題，采用字段forWho區分提問與回復很好的避免了兩者在一張表中容易出現的混亂問題[10]。另一個特點是為解決各章節提問內容混雜的問題，本系統將各個章節的提問、回復在數據表中以unit字段的設置加以區分。同時為保證系統加載速度，用戶選擇章節后系統只拉取該章節的提問內容，點擊問題下的展開按鈕后系統拉取該問題的評論部分。提問內容數據庫表結構如表3。

登錄用戶在提問框內輸入問題后點擊提問，系統通過getTime（）函數獲得提問詳細時間和session內姓名，與提問內容一起以JSON格式通過Ajax請求傳入Node服務器，服務器進行接受處理后由MySQL儲存[11]。服務器發回成功響應后，瀏覽器直接將該提問渲染在頁面上。如果是初次打開頁面，則頁面先發送Ajax請求獲取所有當前章節的提問內容進行渲染展示。

提問實現：

（1）瀏覽器端事件監聽（event）檢測到用戶提問點擊事件，檢測用戶提問內容是否合法，通過后發起請求并攜帶數據如：提問內容、用戶信息、提問單元、提問類型。

（2）瀏覽器端路由器（router）對數據進行判斷，確定分發對象。

（3）對應處理對象（handle）接收請求，調用對象方法進行處理。

（4）相應的操作方法（operate）接收請求，格式數據、拆分數據、字段檢測等完成后調用Node的MySQL數據庫中間件。

（5）數據庫中間件（connect）接收請求，讀取數據，插入MySQL數據庫，返回插入結果狀態信息[12]。

以上5步完成了由用戶數據請求經由服務端處理存入數據庫的操作，步驟（5）完成后，開始逆向返回響應，在響應經過的每一步驟中都會對響應進行封裝、轉化等處理，最終發回（1）步驟中的事件監聽。如果最終返回成功響應狀態則會伴隨數據返回，事件監聽將會將數據傳入DOM，然后瀏覽器進行頁面渲染;若最終返回失敗響應狀態則會伴隨失敗日志返回，而錯誤會在響應返回過程中逐步解決，返回事件監聽的仍是具體的響應結果，同樣瀏覽器進行頁面渲染，至此完整的提問過程。

4.3 ?管理員系統

管理員系統不同于普通用戶系統，是一個獨立的系統。可以查看學生完成進度、對用戶信息進行管理操作、添加課程、發布廣播等功能。

5 ?結語

本文在對傳統Web開發中采用的前后端分離的基礎上，提出采用Node.js作為后端服務器語言以達到前后端語言統一的目的，從而提高開發效率，提升了代碼靈活性，為小型團隊或個人開發Web項目提供了參考思路。并且在此基礎上實現了一個網頁設計基礎自主學習平臺的搭建作為該思路可行性的校驗依據。該平臺以現代瀏覽器為前端執行環境，提供在線觀看視頻、瀏覽文檔、實時提問、后臺管理等功能。系統采用B/S架構，后端程序在Node服務器中運行。后臺添加課程后，用戶經注冊可以達到在線學習的目的，并可以進行實時提問輔助自學過程。方便簡潔的后臺管理系統可以讓管理員及時形象地了解所有用戶實時學習情況，并且可以對整個系統及用戶進行實時管理。該學習系統獨立完整，只需聯網的瀏覽器即可完成用戶在線、管理后臺實時查看，滿足當今社會碎片化時間和快節奏需求。另外，得意于Node.js的通用性，該項目可直接轉移到Linux服務器端后配置MySQL可直接運行。

由于時間、能力等原因系統無法保證十分完美，但是基本框架已經確立，接下來的主要工作是對系統進行優化。當然也有需要繼續增強或者修改調整的模塊，比如后臺系統的添加課程、發布廣播等功能亟待解決。完善的系統需要不斷地進行優化，完美的模式也需要不斷的進行修正。學習之路漫長而崎嶇，需要不斷地堅持與探索，“路漫漫其修遠兮，吾將上下而求索”。

參考文獻

[1] 李俊受. 中國和韓國移動互聯網發展的比較研究[D]. 北京郵電大學， 010

[2] 白璐， 翟高壽. 基于驅動代碼分離的設備驅動體系結構的研究[J]. 軟件， 2015， 36（1）： 17-21

[3] （美）溫施耐德. （Wandschneider， M. ）Learning Node. js： A Hands-On Guide to Building Web Applications in JavaScript 姚立， 彭森材譯. 機械工業出版社. 2014

[4] 趙宏， 陳麗， 鄭勤華， 張善實. 成人遠程學習者自主學習能力培養的教學模式探究[J]. 中國電化教育， 2014（06）： 37-41+48

[5] 夏鳳龍， 王菲菲. 高校網絡自主學習平臺建設的探索與思考[J]. 無線互聯科技， 2016（05）： 23-24

[6] 繆亞波， 趙軼群. 一種針對復雜交互界面應用的Web開發框架[J]. 計算機應用， 2004（02）： 154-156+160

[7] 郭彥輝. 響應式 Web 設計的研究與實現[J]. 軟件， 2018， 39（1）： 169-172

[8] 柳麗娜. 淺淡Session機制與Cookie機制[J]. 電腦編程技巧與維護， 2008（16）： 28-29

[9] 彭金勝. 一種新型的Web國際化解決思路及實踐[J]. 軟件， 2018， 39（7）： 143-145

[10] 劉翔宇， 朱大明. Arcgis中基于Python的地理數據庫批量合并方法研究[J]. 軟件， 2018， 39（7）： 161-165

[11] 朱東紅， 吳東麗， 郭劍， 等. 氣象自動觀測集成平臺設計[J]. 軟件， 2018， 39（7）： 182-190

[12] 王芳， 蔡沂. 基于生成樹的學生互校驗簽到應用研究[J]. 軟件， 2018， 39（7）： 06-11