1. HttpRequest 模拟登录简介
在本系列的第 9 篇文章《鸿蒙网络编程系列 9-使用 HttpRequest 模拟登录示例》中，我们基于 ArkTS 语言在 API 9 的环境下使用 HttpRequest 发起 HTTP 请求，模拟了对目标网站的登录，本文将使用仓颉语言在 API 12 的环境中实现类似的功能。
鸿蒙封装的 HTTP 操作类位于模块 http 中，使用如下的方式导入：
http 模块包括多个 http 请求相关函数，就本文而言，重点需要掌握的是如下两个：
//创建一个HTTP请求，每一个HttpRequest对象对应一个HTTP请求,如需发起多个HTTP请求，须为每个请求创建对应对象。1. public func createHttp(): HttpRequest
//根据URL地址，发起HTTP网络请求，在callback回调函数中返回响应。2. public func request(url: String, callback: (?BusinessException, ?HttpResponse) -> Unit, options!: ?HttpRequestOptions = None): Unit
复制代码
2. HttpRequest 模拟登录演示
为演示 HTTP 模拟登录，假设我们有这样一个网站，访问该网站时如果没有登录，会被重定向到登录页面，如图所示：
输入用户名和密码，单击“登录”按钮即可完成登录，返回首页，如图所示：
我们要实现的示例就是模拟这个登录过程，从而可以得到首页登录后的内容。
本示例运行后的页面如图所示：
输入要登录的网址和用户名、密码，然后单击“登录”按钮进行登录，应用会发起 HTTP 请求并返回响应内容，如图所示：
可以看到已经成功登录了。
3. HttpRequest 模拟登录示例编写
下面详细介绍创建该示例的步骤（确保 DevEco Studio 已安装仓颉插件）。
步骤 1：创建[Cangjie]Empty Ability 项目。
步骤 2：在 module.json5 配置文件加上对权限的声明：
"requestPermissions": [ { "name": "ohos.permission.INTERNET" } ]
复制代码
这里添加了访问互联网的权限。
步骤 3：在 build-profile.json5 配置文件加上仓颉编译架构：
"cangjieOptions": { "path": "./src/main/cangjie/cjpm.toml", "abiFilters": ["arm64-v8a", "x86_64"] }
复制代码
步骤 4：在 index.cj 文件里添加如下的代码：
package ohos_app_cangjie_entry
internal import ohos.base.LengthPropinternal import ohos.component.Columninternal import ohos.component.Rowinternal import ohos.component.Buttoninternal import ohos.component.Textinternal import ohos.component.CustomViewinternal import ohos.component.CJEntryinternal import ohos.component.loadNativeViewimport ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*import std.collection.HashMapimport ohos.net.http.*
@Entry@Componentclass EntryView { //连接、通讯历史记录 @State var msgHistory: String = '' //登录地址 @State var loginUrl: String = "http://*.*.*.*:8081/auth" //用户名 @State var loginName: String = "zhanglei" //密码 @State var passwd: String = "HarmonyOS" let scroller: Scroller = Scroller()
func build() { Row { Column { Text("模拟登录示例").fontSize(14).fontWeight(FontWeight.Bold).width(100.percent).textAlign( TextAlign.Center).padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) { Text("用户名：").fontSize(14)
TextInput(text: loginName).onChange({ value => loginName = value }).width(100).fontSize(11).flexGrow(1)
Text("密码：").fontSize(14)
TextInput(text: passwd).onChange({ value => passwd = value }).width(100).fontSize(11).setType(InputType.Password).flexGrow(1) }.width(100.percent).padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) { Text("登录地址：").fontSize(14).width(80)
TextInput(text: loginUrl).onChange({ value => loginUrl = value }).width(100).fontSize(11).flexGrow(1)
Button("登录").onClick { evt => login() }.width(70).fontSize(14).flexGrow(0) }.width(100.percent).padding(10)
Scroll(scroller) { Text(msgHistory).textAlign(TextAlign.Start).padding(10).width(100.percent).backgroundColor(0xeeeeee) }.align(Alignment.Top).backgroundColor(0xeeeeee).height(300).flexGrow(1).scrollable( ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarWidth(20) }.width(100.percent).height(100.percent) }.height(100.percent) }
//登录 func login() { //http请求对象 let httpRequest = createHttp(); //请求的登录名和密码参数 let params = "username=" + loginName + "&password=" + passwd
let header = HashMap<String, String>(("Content-Type", "application/x-www-form-urlencoded")); let opt = HttpRequestOptions( method: RequestMethod.POST, extraData: HttpData.STRING_DATA(params), header: header, expectDataType: HttpDataType.STRING )
httpRequest.request(loginUrl, dealWithResponse, options: opt) }
//发起http请求后的回调函数 func dealWithResponse(err: ?BusinessException, response: ?HttpResponse) { if (let Some(e) <- err) { msgHistory += "请求失败：" + e.message + "\r\n" }
if (let Some(resp) <- response) { msgHistory += "响应码：${resp.responseCode.getValue()}\r\n" msgHistory += resp.result.toString() + "\r\n" } else { msgHistory += "响应为空\r\n" } }}
复制代码
步骤 5：编译运行，可以使用模拟器或者真机。
步骤 6：按照本节第 2 部分“HttpRequest 模拟登录演示”操作即可。
4. 代码分析
本示例比较简单，关键点在于构造 HTTP 请求的参数以及请求响应后的处理，这里通过 HttpRequestOptions 类型封装了请求参数，包括请求体以及 header 部分的内容：
let params = "username=" + loginName + "&password=" + passwd
let header = HashMap<String, String>(("Content-Type", "application/x-www-form-urlencoded")); let opt = HttpRequestOptions( method: RequestMethod.POST, extraData: HttpData.STRING_DATA(params), header: header, expectDataType: HttpDataType.STRING )
复制代码
另外需要注意的是，仓颉语言对类似 Null 值的处理是通过 Some 语法来判断的，这一点和 ArkTS 以及其他语言有较大的区别。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/HttpSimulateLogin4Cj
本系列源码地址：
https://gitee.com/zl3624/harmonyos_network_samples
评论