結合MVC和Node.js的教學案例設計

劉木友　魏保華　周少萍

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

關鍵詞：MVC開發模式;Node.js;案例教學

中圖分類號：G642? ? ? ? 文獻標識碼：A

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

以計算機網絡技術專業學生為教學對象，從公司職員管理系統中進行功能模塊分離，成為一個簡潔且獨立運行的用戶注冊模塊，進而成為一個完整的教學案例。這個教學案例符合面向對象編程和MVC開發模式的設計理念，并以Node.js為技術載體，可增強學生專業技能與職業素質，提升教學環境與產業環境之間的契合度，讓學生盡可能地適應未來工作崗位的Web應用軟件開發需要。

1 MVC開發模式

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

2 Node.js

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

3 教學案例設計

3.1 用戶注冊執行流程

以MVC開發模式為指導思想，Node.js為主要技術載體，配合對應的技術支持，實現了用戶注冊功能模塊。用戶注冊執行流程如圖2所示。

3.2 數據庫設計

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

4 教學案例實現

4.1 Models模型編碼

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

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

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

4.2 Views視圖編碼

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

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

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

4.3 Control控制器編碼

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

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

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

5 結論

案例設計簡潔和思路清晰，重在突出結合MVC開發模式的思維和Node.js技術應用。學生應用MVC開發模式需要基礎的Web開發經驗，學習Node.js需要有JavaScript和面向對象編程的基礎，而本教學案例的設計與實現有助于進一步提升學生Web綜合開發能力，同時有助于指導學生參加廣東省職業院校學生專業技能大賽高職組Web應用軟件開發競賽，也為云計算實訓教學綜合改革提供了基礎案例內容。

參考文獻：

[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] 蔣衛祥，朱利華，閭楓.JavaEE企業級項目開發：Struts2+Hibernate+Spring[M].2版.北京：高等教育出版社，2018：5.

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

[4] 傳智播客高教產品研發部.MySQL數據庫入門[M].北京：清華大學出版社，2015.

【通聯編輯：代影】