《前端框架技術》線上線下融合教學的研究與實踐

胡龍平 楊媛媛 譚雯

摘要：有效的教學方式往往決定了教學效果，隨著“互聯網+”理念的不斷成型與發展，教學方法的多元化已經成為高校教學改革的重點方向之一。具有強互動和濃厚學習氛圍的線下學習結合靈活性強、資源豐富的線上教學已經成為教學改革的趨勢之一，本文以《前端框架技術》課程為例，探索線上線下融合教學的教學實施方案。實踐證明，《前端框架技術》的線上線下合教學模式，不但提高了學生的學習興趣，并且對教學效果的提升具有顯著影響。

關鍵詞：融合教學;前端框架技術;線上線下;課程改革

中圖分類號：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.

【通聯編輯：梁書】