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

劉木友　魏保華　周少萍

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

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

中圖分類號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）01-0034-02

以計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)學(xué)生為教學(xué)對(duì)象，從公司職員管理系統(tǒng)中進(jìn)行功能模塊分離，成為一個(gè)簡潔且獨(dú)立運(yùn)行的用戶注冊(cè)模塊，進(jìn)而成為一個(gè)完整的教學(xué)案例。這個(gè)教學(xué)案例符合面向?qū)ο缶幊毯蚆VC開發(fā)模式的設(shè)計(jì)理念，并以Node.js為技術(shù)載體，可增強(qiáng)學(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）這三個(gè)單詞的首字母組成的，模型是指處理數(shù)據(jù)的功能部分，視圖是指顯示在客戶端的界面，控制器是指處理用戶交互邏輯的功能部分。MVC設(shè)計(jì)模式是眾所周知的模式，用于交互式軟件系統(tǒng)架構(gòu)。MVC方法的工作原理是將模式（Model）、視圖（View）和控制器（Controller）等主要組件分離開來，使其更加簡潔、結(jié)構(gòu)化和易于開發(fā)[1]。圖1顯示了MVC各模塊的功能以及它們之間的相互關(guān)系[2]。

2 Node.js

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

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

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

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

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

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

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

4.1 Models模型編碼

在項(xiàng)目根目錄下，建立models文件夾，存放模型文件。

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

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

4.2 Views視圖編碼

在項(xiàng)目根目錄下，建立views文件夾，存放視圖文件。

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

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

4.3 Control控制器編碼

在項(xiàng)目根目錄下，建立control文件夾，存放控制器文件。

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

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

5 結(jié)論

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

參考文獻(xiàn)：

[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è)級(jí)項(xiàng)目開發(fā)：Struts2+Hibernate+Spring[M].2版.北京：高等教育出版社，2018：5.

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

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

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