结合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.

【通联编辑：代影】