《前端開發框架》課程項目式教學的改革與實踐

王婷

摘要：在前端技術發展的背景下，前端框架為開發者提供了不小的便利，一大批前端框架的涌現，也引發了前端開發模式的變化。而前端MVVM框架的概念產生的Vue.js框架，能夠根據不同的業務需求開發出不同的功能，是通過數據綁定級組件系統來提高開發效率和代碼的復用性的，這正符合Web前端組件化開發的核心思想。在《前端開發框架》課程中，工學結合，利用豐富的案例，采用項目教學法，輔助以任務分析法，通過師生實施完整的“項目”為導向，把學習到的理論知識靈活地運用到實際項目的開發過程中，運用vue-cli腳手架工具快速搭建項目，極大地提高教學質量，引發學生濃厚興趣，體現學生價值。

關鍵詞：前端開發框架;vue.js;項目教學法

《前端開發框架》是作者所在學校的計算機網絡應用專業（網頁前端方向）所開設的專業核心課，該課程主要以學習前端開發框架的應用來實現快速開發，學生在項目教學中以前端開發人員的角色從過去手動維護DOM狀態過渡到DOM更新操作的自動化。對于該專業的高技生而言，具備一定的編程能力，已經熟練掌握了HTML5、CSS3和JavaScript的知識。而Vue.js框架是在前端MVC（MVVM）框架的出現及組件化開發及普及的大環境下誕生的優秀框架，也是目前主流熱門框架，學習曲線坡度較小，上手容易，還能結合插件擴展Vue框架，是對初學者十分友好的漸進式框架。所以，這是還未接觸過MVVM類前端框架的技工院校學生最適合學習的前端框架。

在《前端開發框架》課程中，為促進學生專業能力的發展，對Vue的基本概念以及優勢、Vue開發環境的搭建、Vue實例對象、內置指令、組件、事件、生命周期、全局API以及實例屬性、過渡動畫、路由、狀態管理等進行了詳細介紹。而教學過程中，為了有效地挖掘學生潛能，培養學生獨立解決問題的能力，課程教學采取項目教學法，輔助以任務分析法，以就業為導向，在考慮項目任務與企業效益的關聯基礎上，教師模擬公司部門主管布置任務，根據任務需求創設不同工作崗位和角色，讓學生根據不同的業務需求開發出不同的功能，充分調動學生將所學的理論知識靈活運用到實際項目的開發過程中。

作為計算機網絡應用專業（網頁前端方向）所開設的專業核心課，《前端開發框架》課程既與之前的專業基礎課程密切相關，也與今后將要學習到的《node.js》、《網站建設綜合實訓》等課程直接關聯，該課程在整個專業學習中起到承上啟下的作用。該課程的教學如果依托傳統的教學方法，通過“教師講解-學生練習”的模式，學生和教師之間會出現反饋單一、大量理論知識不能結合實際應用的情況。尤其是課程內容的每個環節，都是涉及到大量代碼的編寫，教學過程中，必須應用優秀的教學方法和教學過程，重點培養學生獨立思考、獨立解決問題的能力，激發學生對于知識的敏銳性，才能讓學生在專業學習方面建立主動向上的內在驅動力，逐步促進學生長期自主的專業發展。

課程的教學采取以學生為中心、基于工作過程的項目教學法，通過師生實施完整的“項目”為向導，用行業熱點話題及精準案例，引發學生產生濃厚興趣，以“就業”為目標，讓學習更科學，更有效地完成能力培養。

依據項目教學法中，通過“明確項目方案”、“計劃和布置任務”、“項目任務實操”、“管控和審核”、“評價與鼓勵”這五個具體的環節設計完整的項目流程，模擬真實工作情境中，通過“發布任務-分析問題-發現問題”的過程，體現學生的價值。

1.明確項目方案

結合Vue所需學習的各種功能，發布一個綜合項目方案。將Vue開發環境的搭建、Vue實例對象、內置指令、組件、事件、生命周期、全局API以及實例屬性、過渡動畫、路由、狀態管理等理論知識逐個分解為具體的項目任務，根據未來工作崗位的能力需求，將理論知識與具體項目功能逐一對應。以課程中具體綜合項目為例，運用Vue、MUI、Mint UI、vue-router等前端庫和插件，配合后端服務器提供的API，完成在線商城項目的制作。

2.計劃和布置任務

項目任務的計劃和發布，以就業為導向，根據任務需求創設不同工作崗位和角色，在考慮項目任務與企業效益的關聯基礎上，教師模擬公司部門主管布置任務。

例如，該項目任務書背景為一個類似淘寶、京東的電商類移動端網站。整個網站分為前臺和后臺，前臺用來展示商品，用戶可以進入網站中查看新聞資訊、分享圖片、瀏覽商品，將需要購買的商品添加到購物車;后臺用來提供API接口。教師發布項目任務書，明確項目的功能模塊，并組織學生通過小組討論，提供不同功能模塊的技術解決方案。教師根據現場教學情況提供學生需要的幫助，如在課堂中提供“知識點”錦囊的方式讓學生的小組討論進入良性循環。

3.項目任務實操

項目任務實操過程中，學生運用個人技能，不同工作崗位的“同事”之間的協作，在工作過程中不僅鍛煉了個人職業崗位技能，同時增強了團隊協作能力，為未來就業提供了綜合素質的保障。關于項目任務的實操，通過“創設工作任務情景”、“發布工作任務”這兩個環節來實現。

環節1：創設工作任務情景。該電商類移動端網站項目主要以iPhone6的頁面效果為主，使用Chrome的開發者工具測試頁面效果。前臺頁面分為“商城首頁”、“分類”、“購物車”、“我的”的功能模塊。前后端數據交互采用API的方式。

環節2：發布工作任務。

（1）各小組根據項目任務書，進行小組討論，尋找項目的技術方案。各小組將優化后的項目技術方案進行整理后粘貼在白板上，小組互評，教師總結優缺點。例如關于認識vue、熟悉Vue的基本工作原理圖、以及比較Vue、Angular和React的區別等知識，在“項目任務1：如何運用VueCLI3腳手架搭建項目”中，通過同學之間的提問、資料查詢、彼此之間探討，最終信息匯總形成完整技術方案，這過程中學生勇于面對問題，發現問題，獲得解決方案，能極大的提高學生信息獲取和匯總的能力，增強學生的自信心。

（2）依據最優技術方案，完成項目任務實操環節。以“項目任務1：如何運用Vue CLI3腳手架搭建項目”為例，實操環節教師將提供技術支持，為學生就“如何完成Vue.js的下載和安裝”、“如何使用Visual Studio Code編輯器”、“Node.js下載安裝的基本過程”、“npm包管理器中命令的使用方法”、“如何創建項目之前應先完成vue-cli腳手架工具的安裝”等技術盲點提供對應的技術說明文檔。引導學生根據技術說明文檔，完成實操任務的功能。在這個過程中，小組之間互助協作，教師為學生解答疑問，協助學生達成項目任務的目標。

4.管控和審核

教師參考企業不同部門的分階段考核指標，對項目實施過程進行階段性指導，通過驗收規范和企業標準，增強學生遵守行業規范和尊重企業標準，確保項目實施達到質量和效率的雙重指標，學生通過考核，增強信心。

5.評價與鼓勵

通過小組評價，教師評價，引導學生從中反思過程，發現優缺點和改進方法。

教師通過評價橫向學生的掌握進度。項目任務的完成后，鼓勵學生主動思考和探究，對比小組間的解決方案，學會自我反思，相互學習。

綜上所述，通過基于工作過程的項目教學法對《前端開發框架》課程進行改革和實踐，通過豐富的教學案例，在真實工作場景中，引入工作崗位和角色，讓學生全程參與真實的工作情景，在過程中解決課程中的重點、難點，避免學生理論知識無法應用于實踐中等常見問題，在工作情境中面對問題，解決問題，將書本知識運用到實際工作中，鍛煉了個人職業崗位技能的同時，增強了團隊協作能力，培養了學生專業能力和職業素養，為未來就業提供了綜合素質的保障。

參考文獻：

[1]徐雅斌，周維真，施運梅，等.項目驅動教學模式的研究與實踐[J].遼寧工業大學學報：社會科學版，2011，13（3）：125-130.

[2]劉剛，李佳，梁晗.“互聯網+”時代高校教學創新的思考與對策[J].中國高教研究，2017（2）：93-98.

[3]鐘曉流，宋述強，焦麗珍.信息化環境中基于翻轉課堂理念的教學設計研究[J].開放教育研究，2013（1）：60-66