XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次27課題登錄頁面班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握登錄頁面UI布局實(shí)現(xiàn)方法。2.理解網(wǎng)絡(luò)請(qǐng)求權(quán)限配置機(jī)制。3.掌握HTTP請(qǐng)求工具封裝技巧。能力目標(biāo)：1.能夠完成登錄表單UI開發(fā)。2.能夠配置網(wǎng)絡(luò)請(qǐng)求權(quán)限。3.能獨(dú)立封裝HTTP請(qǐng)求工具。素質(zhì)目標(biāo)：1.培養(yǎng)數(shù)據(jù)安全意識(shí)。2.強(qiáng)化代碼規(guī)范意識(shí)。3.培養(yǎng)模塊化開發(fā)思維。教學(xué)重點(diǎn)1.TextInput組件使用。2.網(wǎng)絡(luò)權(quán)限配置。3.HttpUtil工具類封裝。教學(xué)難點(diǎn)1.MD5加密處理。2.異步請(qǐng)求處理。3.響應(yīng)數(shù)據(jù)解析。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、案例導(dǎo)入二、UI實(shí)現(xiàn)三、權(quán)限配置四、網(wǎng)絡(luò)封裝五、功能實(shí)現(xiàn)1.展示七彩天氣登錄頁效果圖（圖7.32）。2.分析頁面組成要素。（案例展示法）1.創(chuàng)建LoginPage.ets文件。2.實(shí)現(xiàn)Column布局容器。3.添加Image頭像組件。4.配置TextInput輸入框：-用戶名輸入框showCounter屬性-密碼輸入框type屬性設(shè)置5.添加登錄按鈕陰影效果。（代碼演示法：教師演示，學(xué)生跟練）1.講解rcp模塊權(quán)限要求。2.修改module.json5文件：-添加INTERNET權(quán)限-添加GET_NETWORK_INFO權(quán)限3.演示權(quán)限驗(yàn)證方法。（對(duì)比分析法）1.創(chuàng)建BaseResult響應(yīng)模型。2.實(shí)現(xiàn)toObject/toArray方法。3.封裝HttpUtil工具類：-演示post方法實(shí)現(xiàn)-講解URL_PREFIX配置4.添加Urls常量類。（任務(wù)驅(qū)動(dòng)法：分組完成工具類）1.添加@State狀態(tài)變量。2.實(shí)現(xiàn)onChange事件綁定。3.完成login異步方法：-非空校驗(yàn)-MD5加密處理-loading狀態(tài)管理4.測(cè)試接口調(diào)用流程。（錯(cuò)誤示范法：故意遺漏加密步驟）8'20'12'20’20’課程思政教學(xué)設(shè)計(jì)1.網(wǎng)絡(luò)安全意識(shí)：通過MD5加密強(qiáng)調(diào)密碼保護(hù)重要性。2.工匠精神：在HttpUtil封裝中體現(xiàn)代碼規(guī)范性。3.創(chuàng)新意識(shí)：對(duì)比傳統(tǒng)表單與鴻蒙組件開發(fā)差異。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.提升作業(yè)：研究NetworkKit實(shí)現(xiàn)登錄接口調(diào)用?？偨Y(jié)分析通過本課程的系統(tǒng)學(xué)習(xí)，學(xué)生將掌握登錄功能的完整實(shí)現(xiàn)流程。能夠獨(dú)立開發(fā)包含表單驗(yàn)證、網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)加密等核心功能的登錄頁面，并規(guī)范完成HTTP工具類封裝。課程通過理實(shí)結(jié)合的教學(xué)方式，使學(xué)生深入理解rcp網(wǎng)絡(luò)模塊的使用規(guī)范，培養(yǎng)安全編碼意識(shí)和模塊化開發(fā)能力。最終，學(xué)生將具備開發(fā)企業(yè)級(jí)登錄模塊的能力，為后續(xù)實(shí)現(xiàn)用戶中心、權(quán)限管理等復(fù)雜功能奠定堅(jiān)實(shí)基礎(chǔ)，同時(shí)建立起規(guī)范的網(wǎng)絡(luò)請(qǐng)求開發(fā)思維。教學(xué)詳案（附頁）一、案例導(dǎo)入（8分鐘）1.教師活動(dòng)（1）展示七彩天氣App登錄頁面效果圖（書本圖7.32）。（2）分析頁面組成要素：頭像區(qū)域（Image）用戶名/密碼輸入框（TextInput）登錄按鈕（Button）注冊(cè)/忘記密碼鏈接（3）演示未登錄攔截效果（書本圖7.31）。2.學(xué)生活動(dòng)觀察UI組件布局，思考各功能實(shí)現(xiàn)方式。二、UI實(shí)現(xiàn)（20分鐘）1.創(chuàng)建基礎(chǔ)框架//LoginPage.ets@Entry@ComponentstructLoginPage{build(){Column({space:20}){//后續(xù)組件添加位置}.margin({left:20,right:20})}}2.添加核心組件//頭像組件Image($r('app.media.startIcon')).width(80).margin({bottom:50})//用戶名輸入框（重點(diǎn)講解）TextInput({placeholder:$r('app.string.tip_username')}).showCounter(true)//顯示字符計(jì)數(shù)器.maxLength(16)//限制最大長(zhǎng)度//密碼輸入框（特殊屬性）TextInput({placeholder:$r('app.string.tip_password')}).type(InputType.Password)//密碼類型//登錄按鈕（視覺效果）Button($r('app.string.btn_sign_in')).shadow({radius:20,offsetX:10,offsetY:10})3.教學(xué)法教師演示→學(xué)生跟練→錯(cuò)誤糾正三、權(quán)限配置（12分鐘）1.關(guān)鍵代碼//module.json5{"requestPermissions":[{"name":"ohos.permission.INTERNET"},{"name":"ohos.permission.GET_NETWORK_INFO"}]}2.原理講解INTERNET：基礎(chǔ)網(wǎng)絡(luò)權(quán)限（所有應(yīng)用開放）。GET_NETWORK_INFO：網(wǎng)絡(luò)狀態(tài)查詢（MDM應(yīng)用專用）。四、網(wǎng)絡(luò)封裝（20分鐘）??步驟1：創(chuàng)建BaseResult模型exportclassBaseResult{code:number=201success:boolean=false//添加JSON轉(zhuǎn)換方法toObject<T>():T{returnJSONObject.parseObject<T>(this.data)}}步驟2：封裝HttpUtil工具類//使用rcp模塊（書本7.5.2節(jié)）import{rcp}from"@kit.RemoteCommunicationKit"staticasyncpost(url:string,body:object):Promise<BaseResult>{letsession=rcp.createSession()letresp=awaitsession.post(HttpUtil.URL_PREFIX+url,body)returnnewBaseResult(resp.code,resp.msg,resp.data)}五、功能實(shí)現(xiàn)（20分鐘）//狀態(tài)管理@Stateusername:string=""@Stateloading:boolean=false//登錄邏輯privateasynclogin(){//非空校驗(yàn)if(!this.username){promptAction.showToast({message:"用戶名不能為空"})return}//MD5加密（書本7.5.4節(jié)）letparams={username:this.username,password:MD5.digest(this.password,"hex")}//網(wǎng)絡(luò)