張鵬飛 王乾 胡曉冬

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

關(guān)鍵詞： Web開發(fā);Node.js;JavaScript;Ajax;前后端分離;在線學(xué)習(xí)平臺

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

本文著錄格式：張鵬飛，王乾，胡曉冬，等. 基于Node.js和JS的前后端分離實現(xiàn)[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 ?引言

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

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

1 ?Node.js前后端開發(fā)特點

1.1 ?為什么使用Node.js

1.1.1 ?傳統(tǒng)Web應(yīng)用開發(fā)流程

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

（1）資源耗費巨大

創(chuàng)建一個線程就會消耗一定的資源。對于使用PHP和Apache構(gòu)建的應(yīng)用，單進程可能需要10MB左右的內(nèi)存，所以根據(jù)業(yè)務(wù)需求較大那么對內(nèi)存的要求會很高。對于大型服務(wù)器，由于需要不斷的創(chuàng)建新線程來處理請求，很快，服務(wù)器的內(nèi)存就會耗盡，出現(xiàn)反應(yīng)極慢或假死狀態(tài)，嚴(yán)重時可導(dǎo)致服務(wù)器崩潰。

（2）線程阻塞

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

1.1.2 ?Node.js的優(yōu)點

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

（1）非阻塞

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

（2）事件驅(qū)動

Node.js進程持續(xù)進行，當(dāng)有請求傳入，服務(wù)器才開始處理請求，請求就是驅(qū)動處理的事件。

2 ?自主學(xué)習(xí)平臺概述

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

2.1 ?當(dāng)前在線學(xué)習(xí)平臺

2.1.1 ?概述

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

2.1.2 ?現(xiàn)狀

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

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

2.2 ?自主學(xué)習(xí)平臺

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

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

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

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

（4）課程數(shù)目、類項、內(nèi)容可以以高校實際情況進行更改調(diào)整。

3 ?自主學(xué)習(xí)平臺設(shè)計

3.1 ?概要

系統(tǒng)采用B/S結(jié)構(gòu)，用戶交互由瀏覽器實現(xiàn)，業(yè)務(wù)邏輯在服務(wù)器實現(xiàn)，數(shù)據(jù)存儲在數(shù)據(jù)庫服務(wù)器內(nèi)，構(gòu)成常見的Web應(yīng)用三層：界面層（UI）業(yè)務(wù)邏輯層（BLL）和數(shù)據(jù)訪問層（DAL）。前端頁面包含首頁、登錄、注冊、課程等頁面。

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

3.1.1 ?整體設(shè)計

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

（2）后端服務(wù)對頁面發(fā)來的數(shù)據(jù)進行處理、如登陸驗證、課程拉取等。

（3）數(shù)據(jù)庫內(nèi)存儲注冊信息、學(xué)習(xí)進度、視頻地址等數(shù)據(jù)。

前后端分離但是采用統(tǒng)一語言JavaScript，系統(tǒng)架構(gòu)如圖1。

3.1.2 ?模塊設(shè)計

（1）首頁登錄

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

（2）課程模塊

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

（3）學(xué)生個人中心

在學(xué)生個人中心可以對部分個人信息進行修改，也可以看到當(dāng)前的學(xué)習(xí)進度、課程得分情況、提問的回復(fù)內(nèi)容以及教師和系統(tǒng)的通知。

（4）教師后臺管理

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

3.2 ?詳細設(shè)計

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

系統(tǒng)由Views、Controller、Data組成。Views部分采用ejs模板以實現(xiàn)視圖兼數(shù)據(jù)傳遞的作用，該部分發(fā)出請求經(jīng)由Controller處理后對Data中數(shù)據(jù)進行修改或拉取。系統(tǒng)整體框架如下圖2。

3.2.1 ?主模塊設(shè)計

（1）注冊設(shè)計

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

（2）課程主頁設(shè)計

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

（3）個人中心設(shè)計

點擊個人信息后向服務(wù)器發(fā)送請求返回數(shù)據(jù)庫內(nèi)存儲的對應(yīng)個人數(shù)據(jù);點擊學(xué)習(xí)進度后可以拉取視頻、文檔等詳細的進度情況;系統(tǒng)通知模塊采用事件驅(qū)動機制，待有通知發(fā)來后將通知進行展示。

4 ?自主學(xué)習(xí)平臺實現(xiàn)

4.1 ?注冊登錄實現(xiàn)

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

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

4.1.1 ?注冊

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

系統(tǒng)獲取到用戶輸入信息后通過checkData（）進行基本校驗，驗證通過后經(jīng)由Ajax發(fā)給服務(wù)器端進行判斷。響應(yīng)返回status=‘success后注冊成功跳轉(zhuǎn)到登錄頁面，否則返回失敗信息，注冊失敗。

4.1.2 ?登錄

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

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

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

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

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

}else{

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

};

4.2 《網(wǎng)頁設(shè)計基礎(chǔ)》課程主頁

課程主頁由三列構(gòu)成，左側(cè)部分為課程章節(jié)，中間部分為完成情況和視頻、文檔展示區(qū)，右側(cè)為評論區(qū)。選擇左側(cè)章節(jié)后中間區(qū)域展示相應(yīng)文檔或視頻，右側(cè)評論區(qū)出現(xiàn)對應(yīng)章節(jié)的提問及回復(fù)內(nèi)容。

4.2.1 ?視頻、文檔模塊實現(xiàn)

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

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

4.2.2 ?進度獲取

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

4.2.3 ?提問部分

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

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

提問實現(xiàn)：

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

（2）瀏覽器端路由器（router）對數(shù)據(jù)進行判斷，確定分發(fā)對象。

（3）對應(yīng)處理對象（handle）接收請求，調(diào)用對象方法進行處理。

（4）相應(yīng)的操作方法（operate）接收請求，格式數(shù)據(jù)、拆分數(shù)據(jù)、字段檢測等完成后調(diào)用Node的MySQL數(shù)據(jù)庫中間件。

（5）數(shù)據(jù)庫中間件（connect）接收請求，讀取數(shù)據(jù)，插入MySQL數(shù)據(jù)庫，返回插入結(jié)果狀態(tài)信息[12]。

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

4.3 ?管理員系統(tǒng)

管理員系統(tǒng)不同于普通用戶系統(tǒng)，是一個獨立的系統(tǒng)?？梢圆榭磳W(xué)生完成進度、對用戶信息進行管理操作、添加課程、發(fā)布廣播等功能。

5 ?結(jié)語

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

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

參考文獻

[1] 李俊受. 中國和韓國移動互聯(lián)網(wǎng)發(fā)展的比較研究[D]. 北京郵電大學(xué)， 010

[2] 白璐， 翟高壽. 基于驅(qū)動代碼分離的設(shè)備驅(qū)動體系結(jié)構(gòu)的研究[J]. 軟件， 2015， 36（1）： 17-21

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

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

[5] 夏鳳龍， 王菲菲. 高校網(wǎng)絡(luò)自主學(xué)習(xí)平臺建設(shè)的探索與思考[J]. 無線互聯(lián)科技， 2016（05）： 23-24

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

[7] 郭彥輝. 響應(yīng)式 Web 設(shè)計的研究與實現(xiàn)[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的地理數(shù)據(jù)庫批量合并方法研究[J]. 軟件， 2018， 39（7）： 161-165

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

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