使用http或axios实现登录案例
在entry/src/main/ets/pages路径下新建Page9.ets文件:
import http from '@ohos.net.http' import router from '@ohos.router' @Entry @Component struct Page9 {@State message: string = 'Hello World'@State username: string = ''@State password: string = ''build() {Row() {Column() {TextInput({placeholder:"请输入用户名"}).onChange(value=>{this.username=value})TextInput({placeholder:"请输入密码"}).onChange(value=>{this.password=value})Button('登录').onClick(()=>{//创建http请求对象let httpRequest=http.createHttp()//发送请求httpRequest.request(//接口'https://2abe08c9-2ea0-46d7-927e-05885b0eea12.mock.pstmn.io/abcd',{method:http.RequestMethod.GET}).then((resp:http.HttpResponse)=>{if (JSON.parse(resp.result.toString()).username==this.username && JSON.parse(resp.result.toString()).pwd==this.password) {router.pushUrl({url:'page/Page10'})}})})}.width('100%')}.height('100%')} }
修改entry/src/main/module.json5文件:
{"module": {"name": "entry","requestPermissions": [{"name": "ohos.permission.INTERNET",}],"type": "entry","description": "$string:module_desc","mainElement": "EntryAbility","deviceTypes": ["phone","tablet"],"deliveryWithInstall": true,"installationFree": false,"pages": "$profile:main_pages","abilities": [{"name": "EntryAbility","srcEntry": "./ets/entryability/EntryAbility.ts","description": "$string:EntryAbility_desc","icon": "$media:icon","label": "$string:EntryAbility_label","startWindowIcon": "$media:icon","startWindowBackground": "$color:start_window_background","exported": true,"skills": [{"entities": ["entity.system.home"],"actions": ["action.system.home"]}]}]} }
在entry/src/main/ets/pages路径下新建Page10.ets文件,作为登录成功后的页面:
@Entry @Component struct Page10 {@State message: string = '跳转成功'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')} }
实际效果: