《JavaScript前端框架應(yīng)用》課程單元教學設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第10章大學生志愿者服務(wù)項目單元學時2授課教師職稱授課地點教學目標知識目標能力目標素質(zhì)目標開發(fā)環(huán)境的搭建第三方庫的安裝和引入路由的配置能夠根據(jù)要求獨立搭建開發(fā)環(huán)境能夠安裝第三方庫（vant、vue-router）能夠根據(jù)需求配置路由引導學生在社會中傳遞溫暖和善意，增進不同階層、不同背景人群之間的信任，減少社會矛盾和沖突。教學重難點教學重點路由配置教學難點梳理項目需求教學策略教學組織以任務(wù)為導向，將教學內(nèi)容進行結(jié)構(gòu)化，整個教學過程分為課前自學、課中導學、課后拓展三個教學環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學方法鑒于學生的學習積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學生多體驗、多積累。教學準備環(huán)境準備多媒體教室資料準備知識點總結(jié)方案資源準備智慧職教平臺項目代碼教學實施過程教學環(huán)節(jié)教學內(nèi)容教師活動學生活動設(shè)計意圖（含思政融入點）課前復習復習環(huán)境搭建、項目創(chuàng)建、vue-router的路由配置等知識點1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。1.通過發(fā)布復習任務(wù)，為本節(jié)課的實踐做準備。課中導學項目整體需求分析運行、演示“大學生志愿者服務(wù)”項目。列出5個模塊，分別介紹項目的結(jié)構(gòu)及其相關(guān)的頁面。帶領(lǐng)學生梳理每個模塊之間的關(guān)系。學生觀看、分析項目效果。學生梳理項目結(jié)構(gòu)。學生和教師一起梳理模塊頁面之間的關(guān)系。通過項目演示，使得項目的實現(xiàn)效果更加生動。通過一起分析、梳理，增加學生的學習參與度。志愿者無私地幫助他人時，能在社會中傳遞溫暖和善意，增進不同階層、不同背景人群之間的信任，減少社會矛盾和沖突。整體技術(shù)方案講解當前因前后端分離而導致沒有數(shù)據(jù)服務(wù)，介紹使用Mock服務(wù)講解頁面多個位置需要到比較復雜的組件，介紹使用vant組件庫講解數(shù)據(jù)的獲取使用axios完成接口請求。講解使用vue-router實現(xiàn)多個頁面的路由學生根據(jù)教師的講解和技術(shù)方案，做好筆記通過問題引導出技術(shù)方案。工程化項目搭建列出環(huán)境要求：Node18.20.6、鏡像資源、vsCode編輯器，發(fā)布環(huán)境搭建任務(wù)。發(fā)布搭建任務(wù)：創(chuàng)建包含了vue-router的工程化項目，并設(shè)置路由配置項，然后創(chuàng)建兩個頁面組件（login、home），并配置好路由巡視、指導學生，并提出共性問題根據(jù)環(huán)境要求，本機搭建環(huán)境。根據(jù)搭建任務(wù)，完成項目的創(chuàng)建和路由頁面的配置。自行解決問題，或者向教師、同學探討如何解決分步式任務(wù)引導學生完成項目的搭建。課后拓展1、登錄頁。發(fā)布任務(wù)：參考手機上各類App的登錄頁，設(shè)計并實現(xiàn)登錄頁。瀏覽各App的登陸頁，編碼自己的登陸頁1.培養(yǎng)學生借鑒優(yōu)秀典型的頁面交互，通過獨立編碼完成。教學評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學生實操演練成績構(gòu)成。從互評、師評等角度，對學生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學習軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等