《前端開發(fā)框架》課程項目式教學(xué)的改革與實踐

王婷

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

關(guān)鍵詞：前端開發(fā)框架;vue.js;項目教學(xué)法

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

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

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

課程的教學(xué)采取以學(xué)生為中心、基于工作過程的項目教學(xué)法，通過師生實施完整的“項目”為向?qū)В眯袠I(yè)熱點話題及精準(zhǔn)案例，引發(fā)學(xué)生產(chǎn)生濃厚興趣，以“就業(yè)”為目標(biāo)，讓學(xué)習(xí)更科學(xué)，更有效地完成能力培養(yǎng)。

依據(jù)項目教學(xué)法中，通過“明確項目方案”、“計劃和布置任務(wù)”、“項目任務(wù)實操”、“管控和審核”、“評價與鼓勵”這五個具體的環(huán)節(jié)設(shè)計完整的項目流程，模擬真實工作情境中，通過“發(fā)布任務(wù)-分析問題-發(fā)現(xiàn)問題”的過程，體現(xiàn)學(xué)生的價值。

1.明確項目方案

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

2.計劃和布置任務(wù)

項目任務(wù)的計劃和發(fā)布，以就業(yè)為導(dǎo)向，根據(jù)任務(wù)需求創(chuàng)設(shè)不同工作崗位和角色，在考慮項目任務(wù)與企業(yè)效益的關(guān)聯(lián)基礎(chǔ)上，教師模擬公司部門主管布置任務(wù)。

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

3.項目任務(wù)實操

項目任務(wù)實操過程中，學(xué)生運用個人技能，不同工作崗位的“同事”之間的協(xié)作，在工作過程中不僅鍛煉了個人職業(yè)崗位技能，同時增強了團(tuán)隊協(xié)作能力，為未來就業(yè)提供了綜合素質(zhì)的保障。關(guān)于項目任務(wù)的實操，通過“創(chuàng)設(shè)工作任務(wù)情景”、“發(fā)布工作任務(wù)”這兩個環(huán)節(jié)來實現(xiàn)。

環(huán)節(jié)1：創(chuàng)設(shè)工作任務(wù)情景。該電商類移動端網(wǎng)站項目主要以iPhone6的頁面效果為主，使用Chrome的開發(fā)者工具測試頁面效果。前臺頁面分為“商城首頁”、“分類”、“購物車”、“我的”的功能模塊。前后端數(shù)據(jù)交互采用API的方式。

環(huán)節(jié)2：發(fā)布工作任務(wù)。

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

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

4.管控和審核

教師參考企業(yè)不同部門的分階段考核指標(biāo)，對項目實施過程進(jìn)行階段性指導(dǎo)，通過驗收規(guī)范和企業(yè)標(biāo)準(zhǔn)，增強學(xué)生遵守行業(yè)規(guī)范和尊重企業(yè)標(biāo)準(zhǔn)，確保項目實施達(dá)到質(zhì)量和效率的雙重指標(biāo)，學(xué)生通過考核，增強信心。

5.評價與鼓勵

通過小組評價，教師評價，引導(dǎo)學(xué)生從中反思過程，發(fā)現(xiàn)優(yōu)缺點和改進(jìn)方法。

教師通過評價橫向?qū)W生的掌握進(jìn)度。項目任務(wù)的完成后，鼓勵學(xué)生主動思考和探究，對比小組間的解決方案，學(xué)會自我反思，相互學(xué)習(xí)。

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

參考文獻(xiàn)：

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

[2]劉剛，李佳，梁晗.“互聯(lián)網(wǎng)+”時代高校教學(xué)創(chuàng)新的思考與對策[J].中國高教研究，2017（2）：93-98.

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