Web前端應(yīng)用開(kāi)發(fā)項(xiàng)目式教程（基于uni-app框架） 教案-教學(xué)設(shè)計(jì) 任務(wù)8　實(shí)現(xiàn)文章發(fā)布與文章分頁(yè)功能

教學(xué)整體設(shè)計(jì)任務(wù)名稱(chēng)任務(wù)8實(shí)現(xiàn)文章發(fā)布與文章分頁(yè)功能開(kāi)課學(xué)期第3學(xué)期課程類(lèi)型專(zhuān)業(yè)核心課授課班級(jí)授課學(xué)時(shí)8學(xué)時(shí)授課地點(diǎn)研討型智慧實(shí)訓(xùn)室授課形式理實(shí)一體教學(xué)內(nèi)容本任務(wù)將實(shí)現(xiàn)啟嘉校園社區(qū)模塊的文章發(fā)布和文章列表分頁(yè)功能。通過(guò)該任務(wù)的實(shí)現(xiàn)讓學(xué)生掌握uni-app上傳組件的應(yīng)用方法、頁(yè)面間通信方法，以及移動(dòng)端最為常見(jiàn)的“下拉刷新”和“上拉加載”分頁(yè)方式。教學(xué)目標(biāo)素質(zhì)目標(biāo)1.通過(guò)對(duì)uni.uploadFile文件上傳方法的學(xué)習(xí)，培養(yǎng)學(xué)習(xí)者樂(lè)于探究、勇于創(chuàng)新的精神。2.通過(guò)完成“專(zhuān)業(yè)交流”版塊的開(kāi)發(fā)，增強(qiáng)學(xué)習(xí)者職業(yè)認(rèn)同感。3.通過(guò)合理選擇圖片儲(chǔ)存方式，培養(yǎng)學(xué)習(xí)者服務(wù)意識(shí)。知識(shí)目標(biāo)1.了解圖片、視頻等文件托管儲(chǔ)存的優(yōu)點(diǎn)和實(shí)現(xiàn)原理。2.掌握uni.uploadFile文件上傳方法的使用。3.掌握uni-app頁(yè)面通訊方法的使用。能力目標(biāo)1.能夠使用uni.uploadFile方法實(shí)現(xiàn)圖片上傳功能。2.能夠使用組件通訊方法在頁(yè)面間傳遞數(shù)據(jù)。學(xué)情分析知識(shí)基礎(chǔ)1.已了解ajax請(qǐng)求封裝的方法及其優(yōu)點(diǎn)。2.已掌握uni.request方法進(jìn)行接口調(diào)用的方法。技能基礎(chǔ)1.已具備基本的功能分析與理解能力。2.已能夠完成ajax數(shù)據(jù)請(qǐng)求的調(diào)用。學(xué)習(xí)特點(diǎn)與訴求1.初步掌握了ajax請(qǐng)求封裝的方法，希望得到更多的練習(xí)。2.在已有簡(jiǎn)單功能實(shí)現(xiàn)的基礎(chǔ)上，希望嘗試更復(fù)雜業(yè)務(wù)邏輯的實(shí)現(xiàn)。教學(xué)重點(diǎn)1.uni.uploadFile文件上傳。2.下拉刷新和上拉加載分頁(yè)功能的實(shí)現(xiàn)。3.uni-app頁(yè)面間通訊教學(xué)難點(diǎn)1.uni-app頁(yè)面間通訊。教學(xué)策略教學(xué)方式方法1.任務(wù)驅(qū)動(dòng)教學(xué)。2.組隊(duì)討論教學(xué)。3.啟發(fā)式教學(xué)。4.理實(shí)一體化教學(xué)。教學(xué)團(tuán)隊(duì)1.企業(yè)工程師與校內(nèi)專(zhuān)任教師共同開(kāi)發(fā)課程項(xiàng)目、構(gòu)造任務(wù)場(chǎng)景、設(shè)計(jì)教學(xué)實(shí)施過(guò)程、設(shè)計(jì)融入思政的課程評(píng)價(jià)體系并開(kāi)展多元評(píng)價(jià)。2.校內(nèi)教師重點(diǎn)負(fù)責(zé)課堂過(guò)程中的項(xiàng)目講解與項(xiàng)目實(shí)施。3.企業(yè)工程師在個(gè)別環(huán)節(jié)（如項(xiàng)目驗(yàn)收等）參與雙師授課。4.企業(yè)工程師負(fù)責(zé)對(duì)項(xiàng)目完成情況給予工程化評(píng)價(jià)。5.學(xué)生助教負(fù)責(zé)協(xié)助教師開(kāi)展課前及課后的拓展任務(wù)等。教學(xué)資源使用本書(shū)配套文檔、素材等資源教學(xué)評(píng)價(jià)

二、教學(xué)實(shí)施過(guò)程教學(xué)過(guò)程（一）課前1.以預(yù)習(xí)培養(yǎng)學(xué)生自主學(xué)習(xí)能力通過(guò)布置課前任務(wù)“了解移動(dòng)端應(yīng)用程序常見(jiàn)的分頁(yè)方式”，鍛煉學(xué)生自主檢索、善于觀察和總結(jié)規(guī)律的能力；通過(guò)布置課前任務(wù)“預(yù)習(xí)uni.uploadFile文件上傳方法的使用”，鍛煉學(xué)生自主學(xué)習(xí)能力，促進(jìn)學(xué)生養(yǎng)成預(yù)習(xí)的學(xué)習(xí)習(xí)慣。2.以測(cè)驗(yàn)促進(jìn)課堂提質(zhì)增效通過(guò)布置異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測(cè)驗(yàn)，教師可以更好地了解學(xué)生數(shù)據(jù)請(qǐng)求基礎(chǔ)知識(shí)的學(xué)習(xí)需求和問(wèn)題，總結(jié)提煉重難點(diǎn)知識(shí)，從而在課堂上進(jìn)行更有針對(duì)性的講解和討論，提高教學(xué)質(zhì)量和效果。教師活動(dòng)學(xué)生活動(dòng)1.發(fā)布任務(wù)。通過(guò)職教云或其他線上教學(xué)平臺(tái)發(fā)布預(yù)習(xí)任務(wù)：（1）了解移動(dòng)端應(yīng)用程序常見(jiàn)的分頁(yè)方式。（2）預(yù)習(xí)uni.uploadFile文件上傳方法的使用。2.發(fā)布測(cè)驗(yàn)。通過(guò)職教云或其他線上教學(xué)平臺(tái)發(fā)布異步數(shù)據(jù)請(qǐng)求的相關(guān)知識(shí)測(cè)驗(yàn)。3.發(fā)布資料。通過(guò)職教云發(fā)布微課視頻、PPT課件、虛擬仿真等學(xué)習(xí)資源。4.批閱任務(wù)。分析知識(shí)測(cè)驗(yàn)結(jié)果，梳理重難點(diǎn)知識(shí)。1.課前預(yù)習(xí)。通過(guò)微課和課件自主學(xué)習(xí)uni.uploadFile方法的使用，并了解移動(dòng)端常見(jiàn)分頁(yè)方式。2.基礎(chǔ)測(cè)驗(yàn)。通過(guò)職教云完成教師發(fā)布的數(shù)據(jù)請(qǐng)求相關(guān)知識(shí)的測(cè)驗(yàn)，并整理易錯(cuò)題，寫(xiě)好技術(shù)筆記。3.資料學(xué)習(xí)。學(xué)習(xí)教師推動(dòng)的視頻、PPT、虛擬仿真、知識(shí)圖譜拓展閱讀等，有問(wèn)題同學(xué)可通過(guò)平臺(tái)在留言板留言進(jìn)行提問(wèn)。（二）課中1.課程教學(xué)設(shè)計(jì)遵循學(xué)生的技能成長(zhǎng)規(guī)律和學(xué)習(xí)規(guī)律，緊密結(jié)合文章發(fā)布和文章列表頁(yè)分析功能的實(shí)際開(kāi)發(fā)過(guò)程，進(jìn)行系統(tǒng)性的教學(xué)設(shè)計(jì)，構(gòu)造“情景項(xiàng)目導(dǎo)入、漸進(jìn)任務(wù)分解、組隊(duì)任務(wù)執(zhí)行、多元技能測(cè)評(píng)、凝練項(xiàng)目總結(jié)、激發(fā)構(gòu)想延展”六步教學(xué)實(shí)施過(guò)程，確保學(xué)生能夠體驗(yàn)真實(shí)的工作場(chǎng)景，通過(guò)循序漸進(jìn)的任務(wù)開(kāi)發(fā)，鍛煉學(xué)生文章發(fā)布功能和分頁(yè)功能的實(shí)操技能和職業(yè)素養(yǎng)，保證教學(xué)過(guò)程與工作一致，教學(xué)評(píng)價(jià)與企業(yè)評(píng)價(jià)一致。教學(xué)過(guò)程中采用雙師教學(xué)、頭腦風(fēng)暴、組隊(duì)開(kāi)發(fā)、學(xué)生助教輔導(dǎo)等特色環(huán)節(jié)組織教學(xué)，充分發(fā)揮企業(yè)工程師、教師和學(xué)生的優(yōu)勢(shì)，結(jié)合利用現(xiàn)代信息技術(shù)平臺(tái)“職教云”輔助教學(xué)，激發(fā)教師授課激情、點(diǎn)燃學(xué)生學(xué)習(xí)熱情、提高課堂授課效果。2.思政教學(xué)設(shè)計(jì)本課程的思政教學(xué)設(shè)計(jì)滲透于每個(gè)任務(wù)的描述、素養(yǎng)目標(biāo)、關(guān)鍵代碼的名師解惑、課上教學(xué)設(shè)計(jì)、課下任務(wù)拓展等多個(gè)環(huán)節(jié)，從而循序漸進(jìn)、滲透式、全方位地落實(shí)思政教育“進(jìn)教材、進(jìn)課堂、進(jìn)頭腦”。借助本章的任務(wù)描述向?qū)W生傳遞“多學(xué)習(xí)新技術(shù)，讓軟件生命力更持久”的思想，讓學(xué)生養(yǎng)成“持續(xù)發(fā)展、終身學(xué)習(xí)”的習(xí)慣；通過(guò)課堂中組織組隊(duì)任務(wù)實(shí)施，培養(yǎng)學(xué)生“團(tuán)隊(duì)協(xié)作、互幫互助”的精神；通過(guò)對(duì)刪除功能關(guān)鍵代碼的實(shí)現(xiàn)，培養(yǎng)學(xué)生“滿足用戶(hù)需求，提升軟件價(jià)值”的職業(yè)素養(yǎng)；通過(guò)任務(wù)擴(kuò)展，讓學(xué)生了解圖片存儲(chǔ)的新技術(shù)、最優(yōu)解決方案的選擇，培養(yǎng)學(xué)生踐行“技術(shù)為民，服務(wù)社會(huì)”的理念。教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)第1學(xué)時(shí)情景導(dǎo)入與任務(wù)描述1(10分鐘)1.展示生活中常用的幾款移動(dòng)應(yīng)用的列表頁(yè)分頁(yè)方式。美團(tuán)外賣(mài)瀑布流分頁(yè)美團(tuán)外賣(mài)瀑布流分頁(yè)騰訊新聞下拉加載分頁(yè)騰訊新聞下拉加載分頁(yè)鐵路1鐵路12306圓點(diǎn)分頁(yè)2.引出知識(shí)儲(chǔ)備中《8.4.1常見(jiàn)的分頁(yè)方式》的內(nèi)容。3.發(fā)布課堂討論：總結(jié)常見(jiàn)移動(dòng)端的分頁(yè)方式都有哪些。1.觀察并體驗(yàn)教師演示的幾款常見(jiàn)應(yīng)用的分頁(yè)方式。2.小組討論，再分析自己熟悉的移動(dòng)應(yīng)用的常見(jiàn)分頁(yè)方式。3.總結(jié)本組討論的結(jié)果，參與課堂討論。知識(shí)儲(chǔ)備講解1(35分鐘)1.講解瀑布流分頁(yè)和常規(guī)數(shù)字分頁(yè)的實(shí)現(xiàn)原理。2.重點(diǎn)講解下拉刷新和上拉加載的實(shí)現(xiàn)過(guò)程。（1）實(shí)現(xiàn)原理講解。（2）通過(guò)流程圖或者思維導(dǎo)圖介紹實(shí)現(xiàn)邏輯，解決重難點(diǎn)問(wèn)題。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問(wèn)題單獨(dú)輔導(dǎo)，普遍問(wèn)題集中講解。1.聽(tīng)教師講解知識(shí)。2.理解實(shí)現(xiàn)邏輯。3.根據(jù)教師的講解，完成代碼的編寫(xiě)。4.遇到問(wèn)題，請(qǐng)教老師或同學(xué)。5.易錯(cuò)點(diǎn)整理筆記。第2學(xué)時(shí)情景導(dǎo)入與任務(wù)描述2(10分鐘)1.提問(wèn)：文件上傳有哪些應(yīng)用場(chǎng)景？更換微信頭像更換微信頭像發(fā)布抖音視頻發(fā)布抖音視頻2.引出知識(shí)儲(chǔ)備中《8.4.2uni.uploadFile文件上傳》的內(nèi)容。3.引發(fā)思考：文件上傳功能的實(shí)現(xiàn)，前端的開(kāi)發(fā)是什么？文件提交給后端，后端又需要執(zhí)行什么操作？1.觀察并體驗(yàn)文件上傳操作的執(zhí)行邏輯。2.思考問(wèn)題并小組討論，分析文件上傳操作時(shí)，前后端的執(zhí)行邏輯。3.總結(jié)本組討論的結(jié)果，參與課堂互動(dòng)。知識(shí)儲(chǔ)備講解2(35分鐘)1.講解uni.uploadFile方法的語(yǔ)法格式及參數(shù)說(shuō)明。2.案例式、分步驟、由淺入深講解。（1）基本文件上傳功能實(shí)現(xiàn)的邏輯講解。（2）files參數(shù)、success回調(diào)、fail回調(diào)、complete回調(diào)函數(shù)的定義。（3）關(guān)鍵代碼演示。（4）指導(dǎo)學(xué)生仿作。（5）個(gè)別問(wèn)題單獨(dú)輔導(dǎo)，普遍問(wèn)題集中講解。3.教學(xué)重點(diǎn)：回調(diào)函數(shù)的正確應(yīng)用。4.教學(xué)難點(diǎn)：使用uploadTask對(duì)象實(shí)時(shí)顯示上傳進(jìn)度。重難點(diǎn)解決辦法：教師教師演示、學(xué)生反復(fù)練習(xí)。1.聽(tīng)教師講解知識(shí)，理解實(shí)現(xiàn)邏輯。2.完成代碼的編寫(xiě)。uni.chooseImage({success:(chooseImageRes)=>{consttempFilePaths=chooseImageRes.tempFilePaths;uni.uploadFile({url:'/upload',//僅為示例，非真實(shí)的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:(uploadFileRes)=>{console.log(uploadFileRes.data);}});}});4.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。第3學(xué)時(shí)情景導(dǎo)入與任務(wù)描述3(10分鐘)1.通過(guò)設(shè)問(wèn)引導(dǎo)教學(xué)內(nèi)容：uni-app頁(yè)面間通信的包括幾種方式？2.帶領(lǐng)學(xué)生一起回顧之前學(xué)過(guò)的頁(yè)面之間的通信方式。3.引導(dǎo)學(xué)生思考文章發(fā)布后的實(shí)現(xiàn)邏輯：當(dāng)文章發(fā)布成功后，點(diǎn)擊“返回”按鈕，回到列表頁(yè)，列表頁(yè)應(yīng)該有何變化？有幾種實(shí)現(xiàn)方式？（1）重新調(diào)用列表頁(yè)接口（2）單獨(dú)調(diào)用新發(fā)布文章的數(shù)據(jù)，并將其添加到列表頁(yè)最上面。（3）從性能和用戶(hù)易用性方面分析，那種解決方案更好？4.設(shè)問(wèn)：如何在發(fā)布文章成功后，直接讓列表頁(yè)調(diào)用最新發(fā)布成功的文章信息？1.跟隨教師思考并回答問(wèn)題。2.認(rèn)真聽(tīng)教師梳理授課思路。3.在了解最優(yōu)解決方案后，思考編碼邏輯，并認(rèn)真聽(tīng)教師后面的講解。知識(shí)儲(chǔ)備講解3(35分鐘)1.講解uni.$emit、uni.$on、uni.$once、uni.$off方法的功能。2.講解利用自定義事件實(shí)現(xiàn)頁(yè)面間通信的原理。（教學(xué)重難點(diǎn)）執(zhí)行u執(zhí)行uni.$on方法綁定事件執(zhí)行uni.$emit方法觸發(fā)事件頁(yè)面A頁(yè)面頁(yè)面A頁(yè)面B解釋?zhuān)喉?yè)面A通過(guò)原生事件處理程序（如，點(diǎn)擊事件、失去焦點(diǎn)事件等）調(diào)用uni.$emit方法，從而觸發(fā)目標(biāo)頁(yè)面（頁(yè)面B）的事件監(jiān)聽(tīng)（前提是頁(yè)面B事先利用uni.$on注冊(cè)了自定義事件的監(jiān)聽(tīng)），在頁(yè)面B觸發(fā)自定義事件的處理函數(shù)中利用參數(shù)獲取到頁(yè)面A傳遞給它的數(shù)據(jù)。3.講解并演示uni.$emit、uni.$on、uni.$once、uni.$off四個(gè)方法的使用，重點(diǎn)講解前兩個(gè)。1.認(rèn)真聽(tīng)教師講解，思考并回答問(wèn)題。2.練習(xí)代碼。代碼段一：uni.$emit('update',{msg:'頁(yè)面更新'})代碼段二：uni.$on('update',function(data){ console.log('監(jiān)聽(tīng)到事件來(lái)自u(píng)pdate，攜帶參數(shù)msg為：'+data.msg);})3.調(diào)試、改bug，易錯(cuò)點(diǎn)整理筆記。4.幫助本組內(nèi)其他同學(xué)解決問(wèn)題。第4學(xué)時(shí)任務(wù)實(shí)施邏輯分析1(10分鐘)1.任務(wù)及約束分析：教師帶領(lǐng)學(xué)生一起進(jìn)行子任務(wù)的需求功能分析，理解文章發(fā)布中涉及到的每一個(gè)字段、字段的功能及其字?jǐn)?shù)和字符類(lèi)型的限制。2.思政融入：通過(guò)對(duì)功能的分析引導(dǎo)學(xué)生“維護(hù)小程序平臺(tái)的安全和健康，營(yíng)造合法合規(guī)、良好道德規(guī)范的網(wǎng)絡(luò)環(huán)境”社會(huì)責(zé)任感。3.組織學(xué)生以小組為單位閱讀教材中p223-224頁(yè)的業(yè)務(wù)實(shí)現(xiàn)邏輯分析，并理解其實(shí)現(xiàn)邏輯4.抽查1~2個(gè)小組對(duì)實(shí)現(xiàn)邏輯的理解。5.對(duì)理解錯(cuò)誤或者不完善的地方教師進(jìn)行補(bǔ)充說(shuō)。1.以小組為單位分析此部分的實(shí)現(xiàn)邏輯分析。2.總結(jié)歸納：（1）文本（標(biāo)題和正文）：重點(diǎn)，使用v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定。（2）圖片：上傳圖片個(gè)數(shù)驗(yàn)收，超出進(jìn)行提示，成功后回調(diào)函數(shù)邏輯。（3）話題：“專(zhuān)業(yè)交流”和“表白墻”切換和傳遞參數(shù)的差別。3.回答問(wèn)題，查漏補(bǔ)缺。任務(wù)實(shí)施編碼實(shí)現(xiàn)1(35分鐘)1.教師演示獲取話題列表接口的封裝過(guò)程。2.指導(dǎo)學(xué)生跟隨練習(xí)上傳圖片接口的封裝操作。3.巡回指導(dǎo)，并糾錯(cuò)。4.重點(diǎn)問(wèn)題集中講解，個(gè)別問(wèn)題單獨(dú)輔導(dǎo)。1.學(xué)生跟隨教師練習(xí)獲取話題接口的練習(xí)。importrequestfrom"@/api/index.js"http://獲取話題列表exportfunctiongetTopicListApi(){returnrequest({url:`/article-classify/topic-list`,method:'get'})}2.有問(wèn)題請(qǐng)教老師或同組同學(xué)。3.調(diào)試代碼，修改bug，整理筆記。4.幫助其他同學(xué)修改代碼。第5學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)2(30分鐘)1.在職教云發(fā)布任務(wù)：按照獲取話題列表接口的封裝原理和封裝步驟，封裝發(fā)布文章接口的方法。2.巡回指導(dǎo)，并糾錯(cuò)。3.重點(diǎn)問(wèn)題集中講解，個(gè)別問(wèn)題單獨(dú)輔導(dǎo)。4.檢查職教云提交的作業(yè)。5.點(diǎn)評(píng)作業(yè)。1.反復(fù)錘煉。2.認(rèn)真完成教師發(fā)布的任務(wù)。//發(fā)布文章exportfunctionpostArticlesApi(familyId,articleTitle,articleContent,imgpath){returnrequest({url:'/IntactArticle',method:'post',data:{"familyId":familyId,"title":articleTitle,"content":articleContent,"imageLink":imgpath}})}3.提交職教云作業(yè)。4.認(rèn)真聽(tīng)取教師對(duì)作業(yè)的點(diǎn)評(píng)。5.整理筆記，記錄易錯(cuò)點(diǎn)。任務(wù)實(shí)施邏輯分析2(15分鐘)1.講解圖片上傳組件的實(shí)現(xiàn)邏輯。（1）定義data中的頁(yè)面變量，保存上傳數(shù)據(jù)和頁(yè)面狀態(tài)數(shù)據(jù)。（2）調(diào)用uni.chooseImage選擇要上傳的圖片。（3）調(diào)用方法驗(yàn)證選擇的圖片數(shù)量和圖片大小.（4）驗(yàn)證成功后，調(diào)用本地的圖片上傳方法。（5）調(diào)用uni.uploadFile并保存上傳任務(wù)對(duì)象uploadTask。（6）為uploadTask定義onProgressUpdate事件的處理程序，隨著上傳的進(jìn)度來(lái)更新頁(yè)面顯示的上傳進(jìn)度（7）定義上傳成功和上傳失敗的回調(diào)函數(shù)。2.使用流程圖為學(xué)生梳理上述的實(shí)現(xiàn)邏輯。選擇圖片——>驗(yàn)證圖片——>上傳圖片——>進(jìn)度監(jiān)聽(tīng)——>成功或失敗的處理。3.讓學(xué)生理解上述處理，邏輯重點(diǎn)問(wèn)題集中講解，個(gè)別問(wèn)題單獨(dú)輔導(dǎo)。4.發(fā)布任務(wù)：學(xué)生以小組為單位實(shí)現(xiàn)圖片的驗(yàn)證規(guī)則。1.理解實(shí)現(xiàn)邏輯。2.分組討論實(shí)現(xiàn)過(guò)程。3.以小組為單位編寫(xiě)圖片的驗(yàn)證邏輯。4.屏幕共享，講解本小組編碼邏輯的實(shí)現(xiàn)過(guò)程。5.組間互測(cè)，檢查代碼實(shí)現(xiàn)的邏輯是否正確。6.傾聽(tīng)其他小組的編碼實(shí)現(xiàn)邏輯。7.整理筆記，記錄易錯(cuò)點(diǎn)。第6學(xué)時(shí)任務(wù)實(shí)施編碼實(shí)現(xiàn)3(30分鐘)1.講解并演示圖片上傳組件的實(shí)現(xiàn)過(guò)程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測(cè)驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問(wèn)題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡(jiǎn)短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問(wèn)題先組內(nèi)解決，組內(nèi)無(wú)法解決，可向教師提問(wèn)，或者通過(guò)職教云平臺(tái)向其他組進(jìn)行求助提問(wèn)，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施重點(diǎn)問(wèn)題講解(15分鐘)1.重點(diǎn)問(wèn)題回顧與講解（1）Promise實(shí)例的封裝（2）在Promise.then()方法中實(shí)現(xiàn)異步事件處理教學(xué)重難點(diǎn)1.聽(tīng)講和認(rèn)真理解。2.做技術(shù)筆記。第7學(xué)時(shí)任務(wù)實(shí)施邏輯分析3(10分鐘)1.分析任務(wù)。要求學(xué)生以小組為單位閱讀教材中《8.5.2獲取文章列表》部分內(nèi)容，完成以下三個(gè)部分的分析：（1）列表刷新功能分析。（2）實(shí)現(xiàn)邏輯分析。（3）后端接口分析。2.任意抽選3個(gè)不同的小組，上臺(tái)展示本組分析成果。3.點(diǎn)評(píng)各組分析結(jié)果，使學(xué)生對(duì)這三部分的理解達(dá)到共識(shí)。4.教學(xué)重難點(diǎn)根據(jù)功能和接口參數(shù)，構(gòu)建接口調(diào)用邏輯，實(shí)現(xiàn)真實(shí)數(shù)據(jù)展示使用圖示法解決教學(xué)重難點(diǎn)！1.閱讀教材資料。2.以小組為單位分析問(wèn)題。3.上臺(tái)表達(dá)本小組的成果。4.對(duì)本部分內(nèi)容達(dá)成共識(shí)。5.設(shè)計(jì)圖分析進(jìn)行接口調(diào)用邏輯構(gòu)建。任務(wù)實(shí)施編碼實(shí)現(xiàn)4(25分鐘)1.講解并演示獲取文章列表頁(yè)面接口調(diào)用的實(shí)現(xiàn)過(guò)程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測(cè)驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問(wèn)題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡(jiǎn)短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問(wèn)題先組內(nèi)解決，組內(nèi)無(wú)法解決，可向教師提問(wèn)，或者通過(guò)職教云平臺(tái)向其他組進(jìn)行求助提問(wèn)，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。任務(wù)實(shí)施編碼實(shí)現(xiàn)5(10分鐘)1.講解并演示真實(shí)數(shù)據(jù)頁(yè)面綁定的實(shí)現(xiàn)過(guò)程。2.分配小組。教師依據(jù)知識(shí)儲(chǔ)備階段的測(cè)驗(yàn)結(jié)果，及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。3.巡回指導(dǎo)。教師在組間巡回指導(dǎo)，出現(xiàn)的共性問(wèn)題，可在班級(jí)內(nèi)向同學(xué)進(jìn)行簡(jiǎn)短講解點(diǎn)撥。1.組建小組。在教師的引導(dǎo)下，結(jié)合自己意愿，組成3人一組的團(tuán)隊(duì)。2.任務(wù)實(shí)施。認(rèn)真完成本次課程的任務(wù)，遇到問(wèn)題先組內(nèi)解決，組內(nèi)無(wú)法解決，可向教師提問(wèn)，或者通過(guò)職教云平臺(tái)向其他組進(jìn)行求助提問(wèn)，也可到在線資源中觀看視頻進(jìn)行學(xué)習(xí)。第8學(xué)時(shí)任務(wù)測(cè)試(35分鐘)1.任務(wù)介紹。教師介紹本次課要進(jìn)行測(cè)試的測(cè)試任務(wù)，UI頁(yè)面測(cè)試、功能測(cè)試（頁(yè)面跳轉(zhuǎn)、修改、保存等按鈕功能）。2.知識(shí)講解。教師介紹測(cè)試的概念，并對(duì)照企業(yè)測(cè)試流程講解，測(cè)試要按照需求分析、計(jì)劃、用例、執(zhí)行、總結(jié)，五步流程進(jìn)行測(cè)試。3.情景故事。教師播放測(cè)試相關(guān)情景動(dòng)畫(huà)，指明測(cè)試工作的重要性，提高學(xué)生對(duì)測(cè)試工作的責(zé)任心。4.需求分析講解。教師講解需求分析的方法，并以部分需求說(shuō)明書(shū)為例，演示如何正確進(jìn)行需求分析，提取測(cè)試功能點(diǎn)。5.分配小組。根據(jù)任務(wù)實(shí)施同學(xué)完成情況及學(xué)生組隊(duì)意愿，3人組成一隊(duì)，盡量讓強(qiáng)弱互補(bǔ)，形成互相幫扶小組。6.制定計(jì)劃講解。教師引導(dǎo)學(xué)生小組內(nèi)，要交叉進(jìn)行測(cè)試，如A同學(xué)測(cè)試B同學(xué)的項(xiàng)目，測(cè)試之前先制定自己的測(cè)試計(jì)劃并形成文字。7.編寫(xiě)用例講解。教師講解編寫(xiě)測(cè)試用例的技巧，并以部分功能為例進(jìn)行演示。8.執(zhí)行用例講解。教師講解執(zhí)行用例注意要點(diǎn)。9.總結(jié)報(bào)告講解。教師講解編寫(xiě)總結(jié)報(bào)告要點(diǎn)。10.組間巡回指導(dǎo)。教師在組間進(jìn)行巡回指導(dǎo)，遇到共性問(wèn)題，在班級(jí)內(nèi)統(tǒng)一點(diǎn)撥。1.知曉任務(wù)。認(rèn)真聽(tīng)取教師講解本次課的測(cè)試任務(wù)。2.學(xué)習(xí)測(cè)試