使用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%')
}
}
实际效果: