《前端框架技術》課程教學探討

胡龍平

摘要：為落實全方位育人的授課理念，針對前端框架技術進行課程教學探討，更新課程教學方法，完善課程教學目標。課程通過以一個案例貫穿教學全過程，采用學生身邊案例進行教學以及講、學、練結合的理實一體教學方式，結合第二課堂實踐等教學方法開展教學，最終明確完成課程的教學改革。

關鍵字：前端框架;教學改革;理實一體;

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