《前端框架技术》线上线下融合教学的研究与实践

胡龙平 杨媛媛 谭雯

摘要：有效的教学方式往往决定了教学效果，随着“互联网+”理念的不断成型与发展，教学方法的多元化已经成为高校教学改革的重点方向之一。具有强互动和浓厚学习氛围的线下学习结合灵活性强、资源丰富的线上教学已经成为教学改革的趋势之一，本文以《前端框架技术》课程为例，探索线上线下融合教学的教学实施方案。实践证明，《前端框架技术》的线上线下合教学模式，不但提高了学生的学习兴趣，并且对教学效果的提升具有显著影响。

关键词：融合教学;前端框架技术;线上线下;课程改革

中图分类号：TP309;G712文献标识码：A

文章编号：1009-3044（2021）18-0121-02

开放科学（资源服务）标识码（OSID）：

Research and Practice of Online and Offline Integrated Teaching of "Front-end Framework Technology"

HU Long-ping， YANG Yuan-yuan， TAN Wen

（Hunan College of Information， Changsha 410000， China）

Abstract： Effective teaching methods often determine the teaching effect. With the continuous shaping and development of the concept of ‘Internet+， the diversification of teaching methods has become one of the key directions of college teaching reform. Offline learning with strong interaction and a strong learning atmosphere combined with flexible and resource-rich online teaching has become one of the trends in teaching reform. This article uses the "Front-end Framework Technology" course as an example to explore the teaching of online and offline integrated teaching implementation plan. Practice has proved that the online and offline teaching mode of "Front-end Framework Technology" not only improves students' interest in learning， but also has a significant impact on the improvement of teaching effects.

Key words：integrated teaching; front-end framework technology; online and offline; curriculum reform

1 融合教学模式概述

信息化时代的不断发展，使得资源共享成为必然，慕课、超星学习通、腾讯课堂[1]等在线教学平台应运而生。随着教学改革的不断深入发展，如何在保留传统线下教学优势的同时结合线上教学平台进行教学方式的改革已经成为高校教师面临的新一轮挑战[2]。

《前端框架技术》课程是计算机应用专业的一门专业核心课程，该课程的前置课程包括《Web前端技术》、《数据库技术》等，后置课程包括《专业技能》、《项目开发实战》等。课程处于前端开发架构中的核心地位，是目前企业级Web前端开发常用技术[3]。课程以实践操作为主，传统的线下教学，教学时间及资源有限，课程教学效果不理想，学生挂科率高，课程评价反馈不理想。因此，寻求有效的线上线下融合教学方案，使用创新型教学方式注入新力量，以突破传统教学瓶颈成为当代高校教师亟待解决的问题之一。

2 融合教学模式的优势

线上线下融合教学模式是在保留传统教学优点的基础上，充分利用丰富的线上资源及教学手段，对课堂进行丰富和完善。传统教学发展多年，在教学上的优点主要体现在，学生与教师面对面，可以对问题进行实时的反馈与讨论，课堂气氛浓烈，学习氛围强[4]。线上教学主要体现在，学生可以没有时间和地域的限制，无论什么时候什么地点，想学就学。线上线下融合教學的主要模式为，利用线上资源实现基础知识和理论知识的视频录制讲解及在线作业批改，学生可以进行在线练习;再结合线下课堂进行答疑指导。通过这种线上线下融合教学方式，教师不用再同一个知识点反复在不同班级讲解，学生也能对不理解的知识点反复观看;教师可以在线上平台布置相关学习任务，设置学生的学习时段，可以实时了解到学生的学习进度。线上的学习可以设置在学生的课余时间，学生在自学过程中出现的问题及不明白的知识点，在线下答疑课程提出，教师进行讲解，与学生进行互动讨论、学生之间也可以进行协作互动，最终实现知识的内化。

3 构建《前端框架技术》融合教学框架

《前端框架技术》是计算机应用技术专业的专业核心课程，课程符合专业人才培养方案中的培养目标和培养规格的要求，旨在培养学生使用Vue前端框架技术进行前端系统开发的能力。本课程涉及如下知识点：Vue双向数据绑定、使用Vue内置指令操作DOM、父子组件的通信、自定义指令、实现过渡与动画的3种方式、渲染函数、使用vue-router构建单页面应用、webpack的基本配置。通过本课程的学习，学生能够熟练使用Vue指令来操作DOM元素，给多个元素或组件制作动画，进行表格动态筛选、实现购物车列表、使用渲染函数循环渲染数组。

以《前端框架技术》课程目标为基础，结合学生的学习需求及实际情况，《前端框架技术》课程教学利用超星学习通及腾讯课堂作为线上平台，对线下教学进行补充，构建线上线下的融合教学框架[5]。课程基础为前端框架的理论知识，课程实现以实际的前端项目开发为主线，以功能模块的实现任务为载体，设计具有综合性特征的学习任务。学生通过线上的学习平台进行课前预习、线下进行课中讨论实践、线上进行课后作业，三者自然融合进行学习。

（1） 课前：课前教师通过线上平台进行任务布置，学生获取到学习任务后进行学习并参与教师发布的课堂讨论，教师对讨论情况及学生自学过程中提出的问题进行记录并为线下讲解做准备，这一过程主要锻炼学生的自主学习能力。

（2） 课中：课中教师针对课前自学的问题进行讲解，并设计扩展性知识延伸讨论题，学生进行小组讨论及知识点的归纳和总结，这一过程主要培养学生的发散思维及团队协作能力。

（3） 课后：经过课中的集中讨论后，教师布置相应的课后作业，学生进行知识点的巩固，拓展知识，培养学生的知识迁移能力。

这种融合模式的推行，要求教师在课前准备好课件、视频、讨论题、练习题等相关资料，并在课后对学生提交的作业和疑问进行及时的反馈。

4 教学情况分析

通过对计算机应用技术专业18级6个班进行《前端框架技术》课程的线上线下融合教学实践，对教学情况进行分析。使用超星学习通平台进行一学期的课程建设及授课，统计到该课程的平台访问量为46538次，发布主题讨论及课堂签到116次，发布课堂学习任务点103次，录制视频124个，教学PPT13个，发布课后作业及练习18次。

整个教学过程采取理论讲授、实操训练的教学方式。经过16周学习，最后以上机实操的形式完成对学生的考核，具体考核方案是2道大题，主要考查学生对vue指令v-model、vue组件、vue路由知识的掌握情况。通过6个班考核结果进行分析，得出以下结论：

大部分同学能够根据实际应用需求，运用所学的HTML5、CSS、Vue相关知识设计简洁、美观的界面并实现相应的功能。但是少部分同学因为对CSS、Vue等知识掌握不足导致所设计的前端页面效果不甚理想。随机选择计应4，5，6班的学习成绩进行统计，得到如下图所示的学情分析图。

《前端框架技术》课程的综合成绩由平时成绩和考试成绩两个部分构成，其中，平时成绩主要由学生的线上任务点完成情况、讨论热度、签到、平时作业完成情况等多方面综合考核而来。通过上述3个班的成绩分布情况可以了解到，4班的整体学习氛围及学生的学习积极性较高，因此4班的成绩在整体的分布上略优于5班和6班，通过三个班的成绩分析可以看出，通过线上线下融合教学方式，《前端框架技术》课程的及格率都在85%以上，优秀率在60%以上。课程的最终考试结果可以发现，线上线下融合教学，通过对教学过程的合理设计，循序渐进的引导学生进行学习，能有效地提高学生的知识掌握能力和自学能力，通过实际的案例驱动提高了学生的动手能力以及对知识的迁移能力。相较于传统线下教学，上述数据表明，该课程采用线上线下融合教学的教学效果明显。

5总结

《前端框架技术》课程采用线上线下的混合式教学模式弥补了传统的线下教学中存在的不足之处，经过对比发现，该教学模式能有效提高教学质量，从学生的角度来说，学生能将课堂知识应用到实际web开发过程中，达到学以致用的效果;从教师的角度来说，通过课程实践过程及教学设计的实现，能够有

效地提升自身的信息化技术利用能力和教学本领，对个人教学风格的形成具有重要作用。通过融合教学实践，发现教学班级人数对教学效果也有一定的影响，建议采用小班化教学。采用线上线下融合教学科研有效突破线下课程纸上谈兵式的教学瓶颈，通过结合課前的线上理论知识学习、课中的重点知识讲解和答疑、课后实践的教学模式，可有效调动学生的学习积极性及自学能力及学生知识迁移的能力，教师可通过该模式进行多样化的课堂教学。

参考文献：

[1] 田玉琬，文成，王贵.“互联网+教育”背景下混合式教学模式的浅析与探讨[J].轻工科技，2020，36（12）：180-181.

[2] 王淼，陈杰.基于翻转课堂的混合式教学模式探析[J].现代交际，2020（20）：215-217.

[3] 孙仕云.Web系统前端开发技术分析[J].通讯世界，2017（12）：267-268.

[4] 李翠莲.在线教学与线下教学质量实质等效措施研究[J].大学物理，2020，39（12）：55-60.

[5] 韩奇隆，赵洪华.常见各种网络教学平台特点分析[J].科技风，2020（28）：92-93.

【通联编辑：梁书】