《前端开发框架》课程项目式教学的改革与实践

王婷

摘要：在前端技术发展的背景下，前端框架为开发者提供了不小的便利，一大批前端框架的涌现，也引发了前端开发模式的变化。而前端MVVM框架的概念产生的Vue.js框架，能够根据不同的业务需求开发出不同的功能，是通过数据绑定级组件系统来提高开发效率和代码的复用性的，这正符合Web前端组件化开发的核心思想。在《前端开发框架》课程中，工学结合，利用丰富的案例，采用项目教学法，辅助以任务分析法，通过师生实施完整的“项目”为导向，把学习到的理论知识灵活地运用到实际项目的开发过程中，运用vue-cli脚手架工具快速搭建项目，极大地提高教学质量，引发学生浓厚兴趣，体现学生价值。

关键词：前端开发框架;vue.js;项目教学法

《前端开发框架》是作者所在学校的计算机网络应用专业（网页前端方向）所开设的专业核心课，该课程主要以学习前端开发框架的应用来实现快速开发，学生在项目教学中以前端开发人员的角色从过去手动维护DOM状态过渡到DOM更新操作的自动化。对于该专业的高技生而言，具备一定的编程能力，已经熟练掌握了HTML5、CSS3和JavaScript的知识。而Vue.js框架是在前端MVC（MVVM）框架的出现及组件化开发及普及的大环境下诞生的优秀框架，也是目前主流热门框架，学习曲线坡度较小，上手容易，还能结合插件扩展Vue框架，是对初学者十分友好的渐进式框架。所以，这是还未接触过MVVM类前端框架的技工院校学生最适合学习的前端框架。

在《前端开发框架》课程中，为促进学生专业能力的发展，对Vue的基本概念以及优势、Vue开发环境的搭建、Vue实例对象、内置指令、组件、事件、生命周期、全局API以及实例属性、过渡动画、路由、状态管理等进行了详细介绍。而教学过程中，为了有效地挖掘学生潜能，培养学生独立解决问题的能力，课程教学采取项目教学法，辅助以任务分析法，以就业为导向，在考虑项目任务与企业效益的关联基础上，教师模拟公司部门主管布置任务，根据任务需求创设不同工作岗位和角色，让学生根据不同的业务需求开发出不同的功能，充分调动学生将所学的理论知识灵活运用到实际项目的开发过程中。

作为计算机网络应用专业（网页前端方向）所开设的专业核心课，《前端开发框架》课程既与之前的专业基础课程密切相关，也与今后将要学习到的《node.js》、《网站建设综合实训》等课程直接关联，该课程在整个专业学习中起到承上启下的作用。该课程的教学如果依托传统的教学方法，通过“教师讲解-学生练习”的模式，学生和教师之间会出现反馈单一、大量理论知识不能结合实际应用的情况。尤其是课程内容的每个环节，都是涉及到大量代码的编写，教学过程中，必须应用优秀的教学方法和教学过程，重点培养学生独立思考、独立解决问题的能力，激发学生对于知识的敏锐性，才能让学生在专业学习方面建立主动向上的内在驱动力，逐步促进学生长期自主的专业发展。

课程的教学采取以学生为中心、基于工作过程的项目教学法，通过师生实施完整的“项目”为向导，用行业热点话题及精准案例，引发学生产生浓厚兴趣，以“就业”为目标，让学习更科学，更有效地完成能力培养。

依据项目教学法中，通过“明确项目方案”、“计划和布置任务”、“项目任务实操”、“管控和审核”、“评价与鼓励”这五个具体的环节设计完整的项目流程，模拟真实工作情境中，通过“发布任务-分析问题-发现问题”的过程，体现学生的价值。

1.明确项目方案

结合Vue所需学习的各种功能，发布一个综合项目方案。将Vue开发环境的搭建、Vue实例对象、内置指令、组件、事件、生命周期、全局API以及实例属性、过渡动画、路由、状态管理等理论知识逐个分解为具体的项目任务，根據未来工作岗位的能力需求，将理论知识与具体项目功能逐一对应。以课程中具体综合项目为例，运用Vue、MUI、Mint UI、vue-router等前端库和插件，配合后端服务器提供的API，完成在线商城项目的制作。

2.计划和布置任务

项目任务的计划和发布，以就业为导向，根据任务需求创设不同工作岗位和角色，在考虑项目任务与企业效益的关联基础上，教师模拟公司部门主管布置任务。

例如，该项目任务书背景为一个类似淘宝、京东的电商类移动端网站。整个网站分为前台和后台，前台用来展示商品，用户可以进入网站中查看新闻资讯、分享图片、浏览商品，将需要购买的商品添加到购物车;后台用来提供API接口。教师发布项目任务书，明确项目的功能模块，并组织学生通过小组讨论，提供不同功能模块的技术解决方案。教师根据现场教学情况提供学生需要的帮助，如在课堂中提供“知识点”锦囊的方式让学生的小组讨论进入良性循环。

3.项目任务实操

项目任务实操过程中，学生运用个人技能，不同工作岗位的“同事”之间的协作，在工作过程中不仅锻炼了个人职业岗位技能，同时增强了团队协作能力，为未来就业提供了综合素质的保障。关于项目任务的实操，通过“创设工作任务情景”、“发布工作任务”这两个环节来实现。

环节1：创设工作任务情景。该电商类移动端网站项目主要以iPhone6的页面效果为主，使用Chrome的开发者工具测试页面效果。前台页面分为“商城首页”、“分类”、“购物车”、“我的”的功能模块。前后端数据交互采用API的方式。

环节2：发布工作任务。

（1）各小组根据项目任务书，进行小组讨论，寻找项目的技术方案。各小组将优化后的项目技术方案进行整理后粘贴在白板上，小组互评，教师总结优缺点。例如关于认识vue、熟悉Vue的基本工作原理图、以及比较Vue、Angular和React的区别等知识，在“项目任务1：如何运用VueCLI3脚手架搭建项目”中，通过同学之间的提问、资料查询、彼此之间探讨，最终信息汇总形成完整技术方案，这过程中学生勇于面对问题，发现问题，获得解决方案，能极大的提高学生信息获取和汇总的能力，增强学生的自信心。

（2）依据最优技术方案，完成项目任务实操环节。以“项目任务1：如何运用Vue CLI3脚手架搭建项目”为例，实操环节教师将提供技术支持，为学生就“如何完成Vue.js的下载和安装”、“如何使用Visual Studio Code编辑器”、“Node.js下载安装的基本过程”、“npm包管理器中命令的使用方法”、“如何创建项目之前应先完成vue-cli脚手架工具的安装”等技术盲点提供对应的技术说明文档。引导学生根据技术说明文档，完成实操任务的功能。在这个过程中，小组之间互助协作，教师为学生解答疑问，协助学生达成项目任务的目标。

4.管控和审核

教师参考企业不同部门的分阶段考核指标，对项目实施过程进行阶段性指导，通过验收规范和企业标准，增强学生遵守行业规范和尊重企业标准，确保项目实施达到质量和效率的双重指标，学生通过考核，增强信心。

5.评价与鼓励

通过小组评价，教师评价，引导学生从中反思过程，发现优缺点和改进方法。

教师通过评价横向学生的掌握进度。项目任务的完成后，鼓励学生主动思考和探究，对比小组间的解决方案，学会自我反思，相互学习。

综上所述，通过基于工作过程的项目教学法对《前端开发框架》课程进行改革和实践，通过丰富的教学案例，在真实工作场景中，引入工作岗位和角色，让学生全程参与真实的工作情景，在过程中解决课程中的重点、难点，避免学生理论知识无法应用于实践中等常见问题，在工作情境中面对问题，解决问题，将书本知识运用到实际工作中，锻炼了个人职业岗位技能的同时，增强了团队协作能力，培养了学生专业能力和职业素养，为未来就业提供了综合素质的保障。

参考文献：

[1]徐雅斌，周维真，施运梅，等.项目驱动教学模式的研究与实践[J].辽宁工业大学学报：社会科学版，2011，13（3）：125-130.

[2]刘刚，李佳，梁晗.“互联网+”时代高校教学创新的思考与对策[J].中国高教研究，2017（2）：93-98.

[3]钟晓流，宋述强，焦丽珍.信息化环境中基于翻转课堂理念的教学设计研究[J].开放教育研究，2013（1）：60-66