結(jié)合MVC和Node.js的教學(xué)案例設(shè)計

劉木友　魏保華　周少萍

摘要：針對計算機網(wǎng)絡(luò)技術(shù)專業(yè)學(xué)生對MVC開發(fā)模式掌握不到位的問題，研究現(xiàn)有MVC開發(fā)模式相關(guān)教材不能滿足高職高專學(xué)生需求，為了能讓學(xué)生系統(tǒng)地掌握MVC開發(fā)模式，并引入新的知識技能，設(shè)計了用戶注冊教學(xué)案例。教學(xué)案例以Node. js為主要載體，從模型、視圖、控制器角度設(shè)計并實現(xiàn)其功能，且改進為可操作數(shù)據(jù)庫和在服務(wù)器上可運行的動態(tài)Web用戶注冊程序，以達到讓學(xué)生掌握MVC開發(fā)模式的教學(xué)目的。

關(guān)鍵詞：MVC開發(fā)模式;Node.js;案例教學(xué)

中圖分類號：G642? ? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）01-0034-02

以計算機網(wǎng)絡(luò)技術(shù)專業(yè)學(xué)生為教學(xué)對象，從公司職員管理系統(tǒng)中進行功能模塊分離，成為一個簡潔且獨立運行的用戶注冊模塊，進而成為一個完整的教學(xué)案例。這個教學(xué)案例符合面向?qū)ο缶幊毯蚆VC開發(fā)模式的設(shè)計理念，并以Node.js為技術(shù)載體，可增強學(xué)生專業(yè)技能與職業(yè)素質(zhì)，提升教學(xué)環(huán)境與產(chǎn)業(yè)環(huán)境之間的契合度，讓學(xué)生盡可能地適應(yīng)未來工作崗位的Web應(yīng)用軟件開發(fā)需要。

1 MVC開發(fā)模式

MVC是由模型（Model）、視圖（View）、控制器（Control）這三個單詞的首字母組成的，模型是指處理數(shù)據(jù)的功能部分，視圖是指顯示在客戶端的界面，控制器是指處理用戶交互邏輯的功能部分。MVC設(shè)計模式是眾所周知的模式，用于交互式軟件系統(tǒng)架構(gòu)。MVC方法的工作原理是將模式（Model）、視圖（View）和控制器（Controller）等主要組件分離開來，使其更加簡潔、結(jié)構(gòu)化和易于開發(fā)[1]。圖1顯示了MVC各模塊的功能以及它們之間的相互關(guān)系[2]。

2 Node.js

Node.js是一個基于 Chrome V8 引擎進行代碼解析的 JavaScript 運行環(huán)境，Node.js具有強大軟件包管理工具npm， 它的在線代碼庫包含功能齊全的代碼模塊[3]。本教學(xué)案例采用Node.js作為服務(wù)器編程技術(shù)，以Express作為Web應(yīng)用框架，在Express框架中配置靜態(tài)資源，引入etpl模板引擎、body-parser 中間件，前端頁面以HTML、CSS、jQuery技術(shù)及Ajax異步傳輸設(shè)計用戶交互功能。

3 教學(xué)案例設(shè)計

3.1 用戶注冊執(zhí)行流程

以MVC開發(fā)模式為指導(dǎo)思想，Node.js為主要技術(shù)載體，配合對應(yīng)的技術(shù)支持，實現(xiàn)了用戶注冊功能模塊。用戶注冊執(zhí)行流程如圖2所示。

3.2 數(shù)據(jù)庫設(shè)計

MySQL具有跨平臺，免費的，運營成本低的特性[4]，因此數(shù)據(jù)庫采用MySQL5.7，字符編碼為UTF8，數(shù)據(jù)庫命名為company，數(shù)據(jù)表命名為users，其數(shù)據(jù)表結(jié)構(gòu)如表1所示。

4 教學(xué)案例實現(xiàn)

4.1 Models模型編碼

在項目根目錄下，建立models文件夾，存放模型文件。

（1）項目加載第三方模塊mysql，通過實例對象mysql調(diào)用createConnection方法連接數(shù)據(jù)庫。同時，加載md5加密模塊，并賦值到db對象，關(guān)鍵代碼如圖3所示。

（2）定義增加用戶數(shù)據(jù)函數(shù)，在函數(shù)體內(nèi)對用戶密碼進行md5加密，通過調(diào)用數(shù)據(jù)庫對象db.query（）方法，對獲得的用戶注冊信息寫入到數(shù)據(jù)庫。在定義SQL語句時，采用？占位符的技巧，以防止SQL注入，保護數(shù)據(jù)安全。關(guān)鍵代碼如圖4所示。

4.2 Views視圖編碼

在項目根目錄下，建立views文件夾，存放視圖文件。

（1）以HTML的表單記載用戶信息，通過jquery-validate.js第三方插件校驗用戶填寫數(shù)據(jù)的規(guī)范性，關(guān)鍵代碼如圖5所示。

（2）為了提供用戶良好的注冊體現(xiàn)，項目中使用Ajax進行異步HTTP數(shù)據(jù)請求。通過jQuery的on（）方法綁定表單事件，對圖5所示表單進行偵聽，當(dāng)表單提交（submit）時觸發(fā)事件。事件觸發(fā)后，調(diào)用serialize（） 方法，通過序列化表單值創(chuàng)建 URL 編碼文本字符串。關(guān)鍵代碼如圖6所示。

4.3 Control控制器編碼

在項目根目錄下，建立control文件夾，存放控制器文件。

（1）通過運用get方法請求，定義用戶注冊頁面路由，關(guān)鍵代碼如圖7所示。

（2）通過運用post方法請求，定義接收用戶注冊數(shù)據(jù)并寫入數(shù)據(jù)庫路由，關(guān)鍵代碼如圖7所示。

5 結(jié)論

案例設(shè)計簡潔和思路清晰，重在突出結(jié)合MVC開發(fā)模式的思維和Node.js技術(shù)應(yīng)用。學(xué)生應(yīng)用MVC開發(fā)模式需要基礎(chǔ)的Web開發(fā)經(jīng)驗，學(xué)習(xí)Node.js需要有JavaScript和面向?qū)ο缶幊痰幕A(chǔ)，而本教學(xué)案例的設(shè)計與實現(xiàn)有助于進一步提升學(xué)生Web綜合開發(fā)能力，同時有助于指導(dǎo)學(xué)生參加廣東省職業(yè)院校學(xué)生專業(yè)技能大賽高職組Web應(yīng)用軟件開發(fā)競賽，也為云計算實訓(xùn)教學(xué)綜合改革提供了基礎(chǔ)案例內(nèi)容。

參考文獻：

[1] Andri Sunardi，Suharjito. MVC Architecture： A Comparative Study Between Laravel Framework and Slim Framework in Freelancer Project Monitoring System Web Based[J]. Procedia Computer Science，2019，157.

[2] 蔣衛(wèi)祥，朱利華，閭楓.JavaEE企業(yè)級項目開發(fā)：Struts2+Hibernate+Spring[M].2版.北京：高等教育出版社，2018：5.

[3] 李丹清，韓利峰，李嘉曾，等.Nodejs平臺下遠(yuǎn)程視頻和信號監(jiān)控系統(tǒng)的融合[J].儀器儀表用戶，2019，26（3）：1-5，51.

[4] 傳智播客高教產(chǎn)品研發(fā)部.MySQL數(shù)據(jù)庫入門[M].北京：清華大學(xué)出版社，2015.

【通聯(lián)編輯：代影】