更新时间:2022-06-17 16:05:59浏览次数:80+次
使用的工具是DevEco Studio,开发鸿蒙应用之基于eTS的登录程序的实现,具体操作步骤如下。
实现的步骤
1、在config.json中配置权限:
"reqPermissions":[
{"name": "ohos.permission.INTERNET"}
],
2、在apipost中:
(1)Body中添加参数
username 为 admin
password 为 123456
(2)编写Mock服务
{
"loginSuccess": function() {
let body = _req.body;
return body.username === 'admin' && body.password === '123456';
}
}
(3)得到的实时响应为 { "loginSuccess": true }
3、index.ets代码如下:
import http from '@ohos.net.http';
import RequestMethod from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import prompt from '@system.prompt';
@Entry @Component struct Index {
username :String ="";
password :String ="";
loginSuccess :boolean=false;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Row({space: 5}) {
Text('用户:')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({
placeholder: "请输入用户名"
})
.width('150')
.onChange((value) => {
this.username = value;
})
}
.width('100%')
.height(30)
.margin('bottom:50')
Row({space: 5}) {
Text('密码:')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({
placeholder: "请输入密码"
})
.width('150')
.onChange((value) => {
this.password = value;
})
}
.width('100%')
.height(30)
.margin({top:20})
Row(){
Button('登录').width('150')
.onClick(() => {
this.httplogin();
})
}.margin({right:120,top:50})
}
.width('100%')
.height('100%')
.margin({left:80})
}
private httplogin() {
let httpRequest = http.createHttp();
httpRequest.request(
"https://console-mock.apipost.cn/app/mock/project/c2f3021b-fa84-4ba5-e39a-78ab02ba5d53/login",
{
method: RequestMethod.RequestMethod.POST,
header: {
'Content-Type': 'application/json; charset=utf-8'
},
readTimeout: 15000,
connectTimeout: 15000,
extraData: { "username":this.username,"password":this.password }
},
(error, data) => {
if(error) {
console.log("error code: " + error.code + ", msg: " + error.message)
} else {
let code = data.responseCode
if(ResponseCode.ResponseCode.OK == code) {
//data.result为{ "loginSuccess": true }或{ "loginSuccess": false }
this.loginSuccess = JSON.parse(data.result).loginSuccess
if(this.loginSuccess){
prompt.showToast({
message: "登录成功!", // 显示文本
duration: 3000, // 显示时长
bottom: 100 // 距离底部的距离
})
}else{
prompt.showToast({
message: "登录失败!", // 显示文本
duration: 3000, // 显示时长
bottom: 100 // 距离底部的距离
})
}
} else {
console.log("response code: " + code);
}
}
}
);
}
}
4、运行结果如下截图:
说明
如果可以,不建议把后端逻辑(Controller)和界面(View)写在一起。
相关资讯