張鵬飛 王乾 胡曉冬

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

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

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

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

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

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

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

1.1 ?為什么使用Node.js

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

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

（1）資源耗費(fèi)巨大

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

（2）線程阻塞

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

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

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

（1）非阻塞

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

（2）事件驅(qū)動(dòng)

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

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

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

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

2.1.1 ?概述

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

2.1.2 ?現(xiàn)狀

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

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

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

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

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

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

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

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

3 ?自主學(xué)習(xí)平臺(tái)設(shè)計(jì)

3.1 ?概要

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

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

3.1.1 ?整體設(shè)計(jì)

（1）前端頁(yè)面包含首頁(yè)、登錄、注冊(cè)、課程等頁(yè)面。

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

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

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

3.1.2 ?模塊設(shè)計(jì)

（1）首頁(yè)登錄

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

（2）課程模塊

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

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

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

（4）教師后臺(tái)管理

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

3.2 ?詳細(xì)設(shè)計(jì)

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

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

3.2.1 ?主模塊設(shè)計(jì)

（1）注冊(cè)設(shè)計(jì)

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

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

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

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

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

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

4.1 ?注冊(cè)登錄實(shí)現(xiàn)

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

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

4.1.1 ?注冊(cè)

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

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

4.1.2 ?登錄

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

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

req.session.islogin = nbr; /*將用戶學(xué)號(hào)存入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)頁(yè)設(shè)計(jì)基礎(chǔ)》課程主頁(yè)

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

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

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

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

4.2.2 ?進(jìn)度獲取

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

4.2.3 ?提問(wèn)部分

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

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

提問(wèn)實(shí)現(xiàn)：

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)

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

[2] 白璐， 翟高壽. 基于驅(qū)動(dòng)代碼分離的設(shè)備驅(qū)動(dòng)體系結(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 姚立， 彭森材譯. 機(jī)械工業(yè)出版社. 2014

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

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

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

[7] 郭彥輝. 響應(yīng)式 Web 設(shè)計(jì)的研究與實(shí)現(xiàn)[J]. 軟件， 2018， 39（1）： 169-172

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

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

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

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

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