新工科背景下Web前端課程教學改革

李嘉明 李慧芬

摘要：在新工科背景下，對新型工程技術人才的培養提出了新的要求，以Web前端課程為例，針對傳統教學存在的弊端，結合當下前端工程化開發的先進理念，從教學目標、教學內容、教學方法、考核方式四個方面提出了具體的教學改革措施，以期培養出科學基礎厚、工程能力強、綜合素質高的新型工科人才。

關鍵詞：新工科;Web前端;前端工程化;教學改革;新型工科人才

中圖分類號：G642 ? ? ? ?文獻標識碼：A

文章編號：1009-3044（2020）24-0159-02

Abstract：Under the background of new engineering， new requirements are put forward for the cultivation of new engineering talents. Taking the web front-end course as an example， aiming at the disadvantages of traditional teaching and combining with the current advanced concept of front-end engineering development， specific teaching reform measures are proposed from four aspects of teaching objectives， teaching contents， teaching methods and assessment methods， in order to cultivate a scientific foundation and engineering A new type of engineering talents with strong ability and high comprehensive quality.

Key words：new engineering;web front-end;front-end engineering;teaching reform;new engineering talents

1 引言

在國家實施創新驅動發展、“中國制造2025”“互聯網+”等重大發展戰略的背景下，需要大量新型工科人才參與建設發展，需要高校探索更符合服務地區經濟發展的人才培養模式，以支撐服務新技術、新業態、新產業、新模式為特點的新經濟蓬勃發展[1]。

新工科提出于2016年，該概念提出后的一年多時間內，教育部組織高校進行深入探討，形成“復旦共識”和“天大行動”[2]。與傳統工科專業教學過程相比，新工科更為注重教學模式、教學方法、教學內容的實用創新性和交叉融合性，以培養科學基礎厚、工程能力強、綜合素質高的復合型人才[3]。本文以應用型本科院校的Web前端開發類課程為例，探索順應時代發展要求的人才培養模式。

2 教學現狀

隨著Web2.0技術的普及，以及前后端分離方案與Web前端組件化思想的廣泛傳播，各大行業對Web前端開發方面的需求大幅提升[4-5]，同時也提高了前端工程師這一工作崗位的準入門檻。目前很多高校在Web前端開發課程教學方面存在的問題日益凸顯，主要體現在課程教學目標與新工科工程教育的理念缺乏有效融合、教學內容與就業崗位需求存在一定的差距、教學方法仍停留在“滿堂灌”階段、考核評價方式相對單一。上述的種種原因造成了學生在就業市場上缺乏競爭力，而企業方面也不能招聘到符合崗位要求的人才，不利于地區經濟的發展。由此可見，傳統的Web前端課程教育模式無法適應新工科背景，急需提出新工科背景下Web前端課程的改革方案。

3 教學改革

針對以上前端工程課程現存的弊端，立足于應用型本科院校的實際情況，從教學目標、教學內容、教學方法、考核方式四個方面提出Web前端課程的改革方案。

（1）教學目標改革

教學目標是課程教學的出發點，只有選取合適的教學目標，Web前端課程的教學才能有的放矢，才能將教學成果有效地落實到學生的進步與發展上。

Web前端課程原有的教學目標是通過各占總課時一半的理論課和上機課，使學生在掌握扎實理論基礎的同時，強化學生的動手實踐能力，加強學生對Web編程概念的理解。然而，在實際上機課的教學中，只側重于讓學生完成給定的上機任務，忽略了對學生綜合能力的培養。此外，由于每次上機課時間受限，且每次上機課之間的內容缺乏連貫性，上機課布置的任務相對簡單、零散，不利于培養學生解決復雜工程問題的能力，不符合新工科背景下對學生能力的培養要求。

改革后的教學目標定位在項目驅動的基礎上，課堂上引入真實的企業案例或學科競賽的參賽題目，提高學生的工程實踐能力。學生分組完成一個完整的工程實踐項目，在完成工程實踐項目的過程中，組內成員相互協作、配合，分工完成整個項目，逐步培養組內成員的團隊協作能力和解決實際工程項目的能力。

（2）教學內容改革

教學內容是教學目標的支撐。隨著Web2.0時代的到來，交互功能需求大幅提升，Web前端開發不再是開發僅供信息瀏覽的頁面，而是更趨向于開發Web型的應用軟件。為了提高Web型應用的前端渲染性能，涌現出眾多優秀的JavaScript框架（Vue、React、Angular），這些新框架的出現，極大地顛覆了前端開發的開發模式，再加上具備模塊化、組件化、規范化、自動化等特點的前端工程化解決方案的出現，前端開發的效率和質量得到了有效的保障[6]。Web前端課程教學內容也應與時俱進，使學生掌握至少一種主流的前端框架，并熟悉前端工程化的開發方法。

Web前端課程的教學內容由于知識點較多，分為“前端工程基礎”和“前端工程設計”兩門課程，分別為大二上學期、大二下學期的專業選修課。兩門課程在教學內容連貫性上有所銜接，其中，“前端工程基礎”是面向零基礎學生的專業選修課，無其他先修課程要求，而“前端工程設計”的先修課程是“前端工程基礎”，該課程要求學生具備一定的前端開發的基礎知識。通過與企業講師的多次探討和一學年的實際教學探索，在獲知了當下用人單位對前端工程師的用人要求之后，對教學內容做出了重大調整。其中，“前端工程基礎”課程的變動不大，仍然是以HTML、CSS內容的學習為主，刪除一些廢棄的HTML標簽的內容，新增了部分HTML5和CSS3的新特性。至于“前端工程設計”，保留JavaScript語法的教學內容，刪減jQuery、Boostrap部分的教學內容，引入Vue.js框架知識點的學習。Vue.js是一個高效、靈活、易用的漸進式JavaScript框架，越來越多的企業在技術選型時，開始采用Vue.js。同時，Vue.js由于其漸進式的特點，既可以使用Vue.js構建小型項目或是項目中的某部分功能，也可以使用Vue.js構建大型復雜的Web應用，能夠靈活地與現有的項目進行整合，學習曲線相對來說更為平滑，易于上手。因此，“前端工程設計”課程的教學內容以Vue.js框架的內容作為學習的主線。通過對Vue.js知識體系中vue-cli的學習，使得學生對前端工程化的理念有更加深刻的認識，進而能夠開發出符合模塊化、組件化、規范化、自動化等前端工程化要求的項目。

（3）教學方法改革

教學方法在很大程度上決定了學生的參與程度和互動效果，“滿堂灌”的教學方法很難激發學生的學習熱情，而教學方法創新的根本目的是在于提高教學質量。理論課和上機課的教學方法均實施了相應的改革措施。

理論課的授課場所是教室，采用線上、線下教學相結合的方式，在線下教學中加入搶答環節，激發學生的學習興趣和成就感。上課前，利用慕課、超星平臺上已有的優質教學資源，由任課老師指定特定的線上課程，組織學生在上課前完成對應章節的預習，學生帶著問題進教室學習，聽課效率會顯著提高。上課期間，任課老師通過實際的代碼演示，講解每個重要知識點，學生借助一個個細致的案例代碼，深刻理解并掌握相應的知識點。此外，在理論課上會設置搶答環節，能夠極大地調動學生學習的積極性，并在課堂上主動思考，而不僅僅是被動地接收老師講授的內容，進而提高學生的參與度，活躍課堂氣氛。

上機課的授課場所是機房，以往的授課方式是學生完成老師布置的上機任務，其間遇到問題后，舉手示意老師，老師再上前解答疑問。這種授課方式的弊端有兩點：一是部分學生在碰到問題后不是先經過自己認真思考，過度依賴老師的解答，不利于學生分析問題和解決問題能力的培養;二是部分學生在完成上機任務時缺少緊迫感，對完成任務的時間把握不好，而編程又是一份注重效率的工作，這將不利于學生日后走上相應的工作崗位。因此，為了培養學生的獨立思考能力和競爭意識，將單次上機課的時間一分為二。在上半場，學生獨立完成上機任務，老師只負責維護機房秩序。在下半場，老師解答學生疑問，在解答疑問之前，評選出完成最快且達標的前10名同學，計入加分名單，通過這種方式激發學生的成就感，提升編程效率，增強競爭意識。到了工程實踐項目開發階段，老師在課上引導學生進行項目選題、需求分析、概要設計，啟發學生解決問題的思路，每組在組內進行討論，確定分工，并擬定項目計劃，每次上機課將項目進度表交由老師查閱，并匯報項目推進時遇到的問題，老師啟發學生找到問題的解決方案。

（4）考核方式改革

傳統的考核方式其評判標準相對單一，有待完善，改革后的考核方式更為多元化，兼顧理論考核、項目實施、資料查閱等多個方面，可以更加全面地評估學生的水平。

課程考核由六個部分組成，包括考勤、卷面、課堂搶答、基礎作業、項目實踐、技術探索?？记谡伎偝煽兊?0%，考勤情況一定程度上反映出學生的學習態度;卷面占總成績的50%，通過期末考試完成，考點覆蓋教學大綱中的知識點，考核學生對基本理論、基本概念、基本編程方法的掌握情況;課堂搶答占總成績的5%，課堂搶答表現優異的學生，平時對知識點的掌握較好，這部分學生在該項得分中能夠獲得較高的分數;基礎作業占總成績的5%，基礎作業指的是教師在上機課上布置的上機任務，教師對學生一學期下來作業的完成情況進行評分，每次完成作業用時較短且作業達到要求的學生，會獲得較高的分數;項目實踐占總成績的20%，通過提交項目報告書和演示項目運行的方式完成，考核學生的團隊協作能力和工程實踐能力;技術探索占總成績的10%，該部分每位學生需提交一份新技術探索報告，并上臺作技術分享演講，演講時間控制在5至10分鐘，課時不夠的情況下，每位學生通過錄制視頻的方式取代上臺演講，此舉的目的在于引導學生對學科相關的前沿科技進行初步的探索，開闊學生的學術視野及科技視野，提高學生的自主創新能力。

4 結束語

新工科背景下，高校需培養工程技術強、綜合素質高的新型工科人才，通過引入工程實踐項目，學生能夠全面地掌握前端工程化開發的方法，提高學習成就感和市場競爭力。Web前端課程教學改革中教學目標的調整、教學內容的優化、教學方法的運用、考核方式的完善，順應我國新型工科人才的培養目標，具有一定的借鑒意義。

參考文獻：

[1] 謝濤，薄鈞戈，房琛琛.新工科背景下Web編程技術課程的實驗教學改革研究[J].計算機教育，2019（1）：63-67，71.

[2] 鐘登華.新工科建設的內涵與行動[J].高等工程教育研究，2017（3）：1-6.

[3] 阮夢黎.新工科背景下軟件工程專業新模式研究[J].中國現代教育裝備，2019（21）：107-110.

[4] 趙大偉，陳剛.Web前端開發技術人才培養模式研究[J].電腦知識與技術，2015，11（24）：109-110.

[5] 張志飛.前端工程化的研究與實踐[J].電腦知識與技術，2016，12（25）：224-226.

[6] 周偉，鄭世玨.Web前端工程化解決方案研究[J].信息技術，2018，42（8）：44-47.

[7] 劉佳，石婧雯，謝海燕.專業認證視角下獨立學院教學質量保障體系的構建——以華南理工大學廣州學院為例[J].教育教學論壇，2018（52）：8-9.

[8] 劉磊.以工作過程為導向的《大前端開發》課程規劃與設計[J].現代計算機（專業版），2015（33）：13-16.

[9] 張敏，陶建林.HTML5前端開發課程教學改革實踐[J].教育現代化，2018，5（52）：94-95，101.

【通聯編輯：王力】