《前端框架技术》课程教学探讨

胡龙平

摘要：为落实全方位育人的授课理念，针对前端框架技术进行课程教学探讨，更新课程教学方法，完善课程教学目标。课程通过以一个案例贯穿教学全过程，采用学生身边案例进行教学以及讲、学、练结合的理实一体教学方式，结合第二课堂实践等教学方法开展教学，最终明确完成课程的教学改革。

关键字：前端框架;教学改革;理实一体;

中图分类号：G4 文献标识码：A

一、课程基本情况

《前端框架技术》课程主要面向于我院计算机应用专业大二学生，是一门专业核心课程。该课程的前置课程包括《web前端基础》、《jquery编程技术》等，后置课程包括《web应用安全技术》、《代码安全》等，该课程在整个计算机应用专业人才培养方案课程体系中，起到了承上启下的作用。课程课时为96，其中理论课32课时，实验课64课时。

二、课程目标

依据学院对课程建设提出的新要求及人才培养方案中课程内容的要求，参照《1+X》证书web前端开发工程师的要求，制定了该课程的课程目标，课程目标的制定主要包含以下3个方面：

（1）知识目标

《前端框架技术》旨在培养学生使用Vue前端框架技术进行前端系统开发的能力。 课程以web前端技术HTML+CSS+JavaScript为基础，主要介绍目前主流的前端框架技术Vue，通过课程学习，了解Vue框架的运行机制，掌握Vue数据绑定实现方式，使用Vue指令进行动态样式的绑定，熟练掌握Vue组件及组件之间数据传递方式、渲染函数的使用及Vue路由的使用。通过本课程的学习，要求学生能够熟练使用Vue指令来操作DOM元素，给多个元素或组件制作动画，进行表格动态筛选、实现购物车列表、使用渲染函数循环渲染数组。

（2）技能目标

培养学生使用前端框架进行web应用系统开发的能力，培养学生对开发需求文档的撰写与规范能力，提高学生的Web应用安全风险识别和防范能力，培养学生运用web前端专业知识、工具、技术手段进行Web应用系统开发的能力，培养学生的Web安全意识，提升面向Web应用的安全保障体系设计与实施能力。

三、课程实施

（1）课程建设情况

课程以开设3年，主要采用线上线下相结合的课程实施方法， 课程开设以来，课程活动数已达10万余人，授课人数四百余人 ，章节知识点设置36个，题库总数106题，发布作业80余次，发布课堂活动100余个，讨论区话题达7000余个，课程资料160余个。

（2）课程设计

为完成课程三维度的课程目标，课程在实施设计上也进行了思政元素的设计与融入，具体的课程设计如下：

1）一个案例贯穿教学全程。课程在教学设计上以一个网站设计为案例开展教学，为达到课程思政的教学目的，我们选取学校官网作为教学案例，使学生在学技术的同时，也能了解到学校的相关通知，工作安排及学校宣传特色等内容。

2）讲、学、练三者结合。在课程开展的过程中，不再是采用传统的教与学，而是将课程形式进行转变，开展理实一体课，老师在教的过程中，学生同步进行练习，实时的发现问题与解决问题。

3）积极引进随堂小测。为进一步检验学生的学习效果，提高学习兴趣与参与度，在每个阶段课程结束后，以小组的形式进行趣味知识抢答，抢答内容主要是教材中的主要知识点，对表现较好的团队，给予期末加分及小奖品奖励。通过趣味知识抢答的开展可以有效提高学生的团队合作意识。

4）進行第二课堂实践。在课程内容结束后，组织学生开展网页设计大赛，鼓励学生讲课堂所学知识应用到实际的生活中。例如，2021年，网页设计大赛主题为“我的学校，我宣传”，要求学生以学校特色为载体，在原有学校官网的设计基础上，进行网页优化重构。

除了上述重点教学设计外，还利用超星学习通进行主题讨论，课程视频教学，生生互评，签到等，在整个课程设计过程，秉承着专业内容为主构建“全方位”育人理念，打造高效、实用的计算机课程实施方案。

（3）课程实施效果

为检验课程实施效果，将2019、2020及2021年该课程的期末成绩进行了对比，其中2019年授课采用的是教材案例，且没有采用理实一体化授课方式，在期末成绩数据统计显示，2019年，学生整体考试及格率为82%，优秀率占24%，而2020年和2021年整体及格率都在92%以上，且优秀率均超50%，上述数据表明，该课程的课程设计改革具有显著效果。

四、 课程评价

为了解课程设计的可行性，在课程结束后对课程进行了多维度的评价：

1）学生评价：关于学生对课程的评价主要通过考试来了解学生对知识点的掌握情况，以实现对课程知识目标的实现判定。另外通过设计问卷来了解学生对于课程实施的评价。通过测试结果表明，学生对于相关理论知识掌握较好，在教师讲解案例的过程中也能理解各个知识点的作用，基本能完成每次布置的实践任务，但是综合运用这些知识点来解决实际问题的能力还欠缺，过于依赖教师讲解，需要进一步培养其独立思考的能力以及综合运用知识的能力。在今后的教学过程中，将针对这一情况制定相应的改善方案，在介绍知识点的同时，多用案例来讲解解决实际问题的思路，注意启发学生的思维，让学生自己能从案例中总结出本质规律、并归纳出解决问题的方法，以培养其解决实际问题的能力。

2）同行评价：为从专业角度了解课程，组织校内相关专业教师进行了集中听课。在听课结束后进行了集中讨论，课程获得的整体评价较高。

五、总结

前端框架技术课程通过以一个案例贯穿教学全过程，采用学生身边案例进行教学以及讲、学、练结合的理实一体教学方式，结合第二课堂实践等教学方法开展教学，对整个课程后续的开展奠定了基础，也为其他同专业类似课程的开展提供了实施依据。

参考文献

[1]刘金羽. 基于Vue.js的前端教学软件设计与实现[J]. 电脑编程技巧与维护， 2020（2）：3.

[2]郑金洲. 基于新课程的课堂教学改革[M]. 福建教育出版社， 2003.

[3]杨进. 中国职业教育教学改革与课程建设--挑战与对策[J]. 职业技术教育， 2004.