王婷

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

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

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

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

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

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

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

1.明確項(xiàng)目方案

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

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

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

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

3.項(xiàng)目任務(wù)實(shí)操

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

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

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

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

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

4.管控和審核

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

5.評(píng)價(jià)與鼓勵(lì)

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

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

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

參考文獻(xiàn)：

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

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

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