刘木友 魏保华 周少萍
摘要:针对计算机网络技术专业学生对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.
【通联编辑:代影】