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