《前端框架技術(shù)》課程教學(xué)探討

胡龍平

摘要：為落實(shí)全方位育人的授課理念，針對(duì)前端框架技術(shù)進(jìn)行課程教學(xué)探討，更新課程教學(xué)方法，完善課程教學(xué)目標(biāo)。課程通過(guò)以一個(gè)案例貫穿教學(xué)全過(guò)程，采用學(xué)生身邊案例進(jìn)行教學(xué)以及講、學(xué)、練結(jié)合的理實(shí)一體教學(xué)方式，結(jié)合第二課堂實(shí)踐等教學(xué)方法開(kāi)展教學(xué)，最終明確完成課程的教學(xué)改革。

關(guān)鍵字：前端框架;教學(xué)改革;理實(shí)一體;

中圖分類(lèi)號(hào)：G4 文獻(xiàn)標(biāo)識(shí)碼：A

一、課程基本情況

《前端框架技術(shù)》課程主要面向于我院計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)大二學(xué)生，是一門(mén)專(zhuān)業(yè)核心課程。該課程的前置課程包括《web前端基礎(chǔ)》、《jquery編程技術(shù)》等，后置課程包括《web應(yīng)用安全技術(shù)》、《代碼安全》等，該課程在整個(gè)計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)人才培養(yǎng)方案課程體系中，起到了承上啟下的作用。課程課時(shí)為96，其中理論課32課時(shí)，實(shí)驗(yàn)課64課時(shí)。

二、課程目標(biāo)

依據(jù)學(xué)院對(duì)課程建設(shè)提出的新要求及人才培養(yǎng)方案中課程內(nèi)容的要求，參照《1+X》證書(shū)web前端開(kāi)發(fā)工程師的要求，制定了該課程的課程目標(biāo)，課程目標(biāo)的制定主要包含以下3個(gè)方面：

（1）知識(shí)目標(biāo)

《前端框架技術(shù)》旨在培養(yǎng)學(xué)生使用Vue前端框架技術(shù)進(jìn)行前端系統(tǒng)開(kāi)發(fā)的能力。 課程以web前端技術(shù)HTML+CSS+JavaScript為基礎(chǔ)，主要介紹目前主流的前端框架技術(shù)Vue，通過(guò)課程學(xué)習(xí)，了解Vue框架的運(yùn)行機(jī)制，掌握Vue數(shù)據(jù)綁定實(shí)現(xiàn)方式，使用Vue指令進(jìn)行動(dòng)態(tài)樣式的綁定，熟練掌握Vue組件及組件之間數(shù)據(jù)傳遞方式、渲染函數(shù)的使用及Vue路由的使用。通過(guò)本課程的學(xué)習(xí)，要求學(xué)生能夠熟練使用Vue指令來(lái)操作DOM元素，給多個(gè)元素或組件制作動(dòng)畫(huà)，進(jìn)行表格動(dòng)態(tài)篩選、實(shí)現(xiàn)購(gòu)物車(chē)列表、使用渲染函數(shù)循環(huán)渲染數(shù)組。

（2）技能目標(biāo)

培養(yǎng)學(xué)生使用前端框架進(jìn)行web應(yīng)用系統(tǒng)開(kāi)發(fā)的能力，培養(yǎng)學(xué)生對(duì)開(kāi)發(fā)需求文檔的撰寫(xiě)與規(guī)范能力，提高學(xué)生的Web應(yīng)用安全風(fēng)險(xiǎn)識(shí)別和防范能力，培養(yǎng)學(xué)生運(yùn)用web前端專(zhuān)業(yè)知識(shí)、工具、技術(shù)手段進(jìn)行Web應(yīng)用系統(tǒng)開(kāi)發(fā)的能力，培養(yǎng)學(xué)生的Web安全意識(shí)，提升面向Web應(yīng)用的安全保障體系設(shè)計(jì)與實(shí)施能力。

三、課程實(shí)施

（1）課程建設(shè)情況

課程以開(kāi)設(shè)3年，主要采用線上線下相結(jié)合的課程實(shí)施方法， 課程開(kāi)設(shè)以來(lái)，課程活動(dòng)數(shù)已達(dá)10萬(wàn)余人，授課人數(shù)四百余人 ，章節(jié)知識(shí)點(diǎn)設(shè)置36個(gè)，題庫(kù)總數(shù)106題，發(fā)布作業(yè)80余次，發(fā)布課堂活動(dòng)100余個(gè)，討論區(qū)話題達(dá)7000余個(gè)，課程資料160余個(gè)。

（2）課程設(shè)計(jì)

為完成課程三維度的課程目標(biāo)，課程在實(shí)施設(shè)計(jì)上也進(jìn)行了思政元素的設(shè)計(jì)與融入，具體的課程設(shè)計(jì)如下：

1）一個(gè)案例貫穿教學(xué)全程。課程在教學(xué)設(shè)計(jì)上以一個(gè)網(wǎng)站設(shè)計(jì)為案例開(kāi)展教學(xué)，為達(dá)到課程思政的教學(xué)目的，我們選取學(xué)校官網(wǎng)作為教學(xué)案例，使學(xué)生在學(xué)技術(shù)的同時(shí)，也能了解到學(xué)校的相關(guān)通知，工作安排及學(xué)校宣傳特色等內(nèi)容。

2）講、學(xué)、練三者結(jié)合。在課程開(kāi)展的過(guò)程中，不再是采用傳統(tǒng)的教與學(xué)，而是將課程形式進(jìn)行轉(zhuǎn)變，開(kāi)展理實(shí)一體課，老師在教的過(guò)程中，學(xué)生同步進(jìn)行練習(xí)，實(shí)時(shí)的發(fā)現(xiàn)問(wèn)題與解決問(wèn)題。

3）積極引進(jìn)隨堂小測(cè)。為進(jìn)一步檢驗(yàn)學(xué)生的學(xué)習(xí)效果，提高學(xué)習(xí)興趣與參與度，在每個(gè)階段課程結(jié)束后，以小組的形式進(jìn)行趣味知識(shí)搶答，搶答內(nèi)容主要是教材中的主要知識(shí)點(diǎn)，對(duì)表現(xiàn)較好的團(tuán)隊(duì)，給予期末加分及小獎(jiǎng)品獎(jiǎng)勵(lì)。通過(guò)趣味知識(shí)搶答的開(kāi)展可以有效提高學(xué)生的團(tuán)隊(duì)合作意識(shí)。

4）進(jìn)行第二課堂實(shí)踐。在課程內(nèi)容結(jié)束后，組織學(xué)生開(kāi)展網(wǎng)頁(yè)設(shè)計(jì)大賽，鼓勵(lì)學(xué)生講課堂所學(xué)知識(shí)應(yīng)用到實(shí)際的生活中。例如，2021年，網(wǎng)頁(yè)設(shè)計(jì)大賽主題為“我的學(xué)校，我宣傳”，要求學(xué)生以學(xué)校特色為載體，在原有學(xué)校官網(wǎng)的設(shè)計(jì)基礎(chǔ)上，進(jìn)行網(wǎng)頁(yè)優(yōu)化重構(gòu)。

除了上述重點(diǎn)教學(xué)設(shè)計(jì)外，還利用超星學(xué)習(xí)通進(jìn)行主題討論，課程視頻教學(xué)，生生互評(píng)，簽到等，在整個(gè)課程設(shè)計(jì)過(guò)程，秉承著專(zhuān)業(yè)內(nèi)容為主構(gòu)建“全方位”育人理念，打造高效、實(shí)用的計(jì)算機(jī)課程實(shí)施方案。

（3）課程實(shí)施效果

為檢驗(yàn)課程實(shí)施效果，將2019、2020及2021年該課程的期末成績(jī)進(jìn)行了對(duì)比，其中2019年授課采用的是教材案例，且沒(méi)有采用理實(shí)一體化授課方式，在期末成績(jī)數(shù)據(jù)統(tǒng)計(jì)顯示，2019年，學(xué)生整體考試及格率為82%，優(yōu)秀率占24%，而2020年和2021年整體及格率都在92%以上，且優(yōu)秀率均超50%，上述數(shù)據(jù)表明，該課程的課程設(shè)計(jì)改革具有顯著效果。

四、 課程評(píng)價(jià)

為了解課程設(shè)計(jì)的可行性，在課程結(jié)束后對(duì)課程進(jìn)行了多維度的評(píng)價(jià)：

1）學(xué)生評(píng)價(jià)：關(guān)于學(xué)生對(duì)課程的評(píng)價(jià)主要通過(guò)考試來(lái)了解學(xué)生對(duì)知識(shí)點(diǎn)的掌握情況，以實(shí)現(xiàn)對(duì)課程知識(shí)目標(biāo)的實(shí)現(xiàn)判定。另外通過(guò)設(shè)計(jì)問(wèn)卷來(lái)了解學(xué)生對(duì)于課程實(shí)施的評(píng)價(jià)。通過(guò)測(cè)試結(jié)果表明，學(xué)生對(duì)于相關(guān)理論知識(shí)掌握較好，在教師講解案例的過(guò)程中也能理解各個(gè)知識(shí)點(diǎn)的作用，基本能完成每次布置的實(shí)踐任務(wù)，但是綜合運(yùn)用這些知識(shí)點(diǎn)來(lái)解決實(shí)際問(wèn)題的能力還欠缺，過(guò)于依賴教師講解，需要進(jìn)一步培養(yǎng)其獨(dú)立思考的能力以及綜合運(yùn)用知識(shí)的能力。在今后的教學(xué)過(guò)程中，將針對(duì)這一情況制定相應(yīng)的改善方案，在介紹知識(shí)點(diǎn)的同時(shí)，多用案例來(lái)講解解決實(shí)際問(wèn)題的思路，注意啟發(fā)學(xué)生的思維，讓學(xué)生自己能從案例中總結(jié)出本質(zhì)規(guī)律、并歸納出解決問(wèn)題的方法，以培養(yǎng)其解決實(shí)際問(wèn)題的能力。

2）同行評(píng)價(jià)：為從專(zhuān)業(yè)角度了解課程，組織校內(nèi)相關(guān)專(zhuān)業(yè)教師進(jìn)行了集中聽(tīng)課。在聽(tīng)課結(jié)束后進(jìn)行了集中討論，課程獲得的整體評(píng)價(jià)較高。

五、總結(jié)

前端框架技術(shù)課程通過(guò)以一個(gè)案例貫穿教學(xué)全過(guò)程，采用學(xué)生身邊案例進(jìn)行教學(xué)以及講、學(xué)、練結(jié)合的理實(shí)一體教學(xué)方式，結(jié)合第二課堂實(shí)踐等教學(xué)方法開(kāi)展教學(xué)，對(duì)整個(gè)課程后續(xù)的開(kāi)展奠定了基礎(chǔ)，也為其他同專(zhuān)業(yè)類(lèi)似課程的開(kāi)展提供了實(shí)施依據(jù)。

參考文獻(xiàn)

[1]劉金羽. 基于Vue.js的前端教學(xué)軟件設(shè)計(jì)與實(shí)現(xiàn)[J]. 電腦編程技巧與維護(hù)， 2020（2）：3.

[2]鄭金洲. 基于新課程的課堂教學(xué)改革[M]. 福建教育出版社， 2003.

[3]楊進(jìn). 中國(guó)職業(yè)教育教學(xué)改革與課程建設(shè)--挑戰(zhàn)與對(duì)策[J]. 職業(yè)技術(shù)教育， 2004.