【HarmonyOS 5.0】从0到1开发购物应用App(二):登录页对接口

【HarmonyOS Arkts笔记】http网络请求封装
【HarmonyOS Arkts笔记】@ohos.data.preferences用户首选项实现存储信息

登录页

点击登录按钮调用login()方法

import { promptAction, router } from '@kit.ArkUI';
import loginApi from "../../api/login"
import PreferenceUtil from '../../utils/preferencesUtils';@Entry
@Component
struct Login {@State account: string = '';@State password: string = '';@State loading: boolean = false;@State isCheck: boolean = false;login() {if (this.account == '') {promptAction.showToast({message: '请输入账号'})return}if (this.password == '') {promptAction.showToast({message: '请输入密码'})return}if (!this.isCheck) {promptAction.showToast({message: '请同意协议'})return}interface DataFace {token: string}interface ResFace {code: number,data: DataFace,msg: string}/*调用接口*/this.loading = trueloginApi.login({account: this.account,password: this.password,client: 6}).then((res: ResFace) => {if (res.code == 1) {let token: string = res.data.token/*存储用户token*/PreferenceUtil.putPreference('token', token)promptAction.showToast({message: '登录成功'})setTimeout(() => {router.pushUrl({url: 'pages/Index'})}, 2000)}this.loading = false;})}build() {Column() {Image($r('app.media.logo')).width(80).height(80).borderRadius(10).margin({ top: 50 })Text('登录').margin({ top: 15 })Text('登录账号以使用更多服务').fontSize(12).margin({ top: 5 })TextInput({ text: this.account, placeholder: '请输入账号' }).margin({ top: 20 }).onChange((val) => {this.account = val})TextInput({ text: this.password, placeholder: '请输入密码' }).type(InputType.Password).margin({ top: 10 }).onChange((val) => {this.password = val})Row() {Text('忘记密码').fontSize(12).fontColor($r('app.color.color_info'))Text('注册账号').fontSize(12).fontColor($r('app.color.color_primary'))}.justifyContent(FlexAlign.SpaceBetween).margin({ top: 10 }).width('100%')Button() {if (this.loading) {Row() {LoadingProgress().width(30).height(30).margin({ left: 12 }).color(0xFFFFFF)Text('登录中~').fontColor('#fff')}} else {Text('登录').fontColor('#fff')}}.width('100%').height(30).margin({ top: 100 }).backgroundColor($r('app.color.color_primary')).onClick(() => {this.login()})Row() {/*是否同意协议*/if (this.isCheck) {Image($r('app.media.ic_public_todo_filled')).width(15).height(15).onClick(() => {this.isCheck = !this.isCheck})} else {Image($r('app.media.ic_screenshot_circle')).width(15).height(15).onClick(() => {this.isCheck = !this.isCheck})}Text('我已阅读并同意').fontColor($r('app.color.color_info')).fontSize(12).margin({ left: 5 })Text('《用户协议》').fontColor($r('app.color.color_primary')).fontSize(12)Text('和').fontColor($r('app.color.color_info')).fontSize(12)Text('《隐私政策》').fontColor($r('app.color.color_primary')).fontSize(12)}.margin({ top: 20 })}.justifyContent(FlexAlign.Center).width('100%').padding({ left: 30, right: 30 })}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩转大语言模型——ollama导入huggingface下载的模型

ollama导入huggingface模型 前言gguf模型查找相关模型下载模型 导入Ollama配置参数文件导入模型查看导入情况 safetensfors模型下载模型下载llama.cpp配置环境并转换 前言 ollama在大语言模型的应用中十分的方便,但是也存在一定的问题,比如不能使用自己…

DFS之迭代加深、双向DFS、IDA*

迭代加深 迭代加深&#xff1a; 170. 加成序列 满足如下条件的序列 X X X&#xff08;序列中元素被标号为 1 、 2 、 3 … m 1、2、3…m 1、2、3…m&#xff09;被称为“加成序列”&#xff1a; X [ 1 ] 1 X[1]1 X[1]1 X [ m ] n X[m]n X[m]n X [ 1 ] < X [ 2 ] < …

Ansible之批量管理服务器

文章目录 背景第一步、安装第二步、配置免密登录2.1 生成密钥2.2 分发公钥2.3 测试无密连接 背景 Ansible是Python强大的服务器批量管理 第一步、安装 首先要拉取epel数据源&#xff0c;执行以下命令 yum -y install epel-release安装完毕如下所示。 使用 yum 命令安装 an…

调和级数不为整数的证明

文章目录 1. 问题引入2. 证明2.1 引理12.2 引理22.3 引理3&#xff1a;2.4 核心证明&#xff1a; 3. 参考 1. 问题引入 s ( n ) 1 1 2 1 3 ⋯ 1 n , n ∈ N ∗ , n ≥ 2 s(n) 1\frac{1}{2}\frac{1}{3}\cdots\frac{1}{n}, \quad \\n \in N^*, n \ge2 s(n)121​31​⋯n1​,…

【Linux网络编程】第二十二弹---深入理解 I/O 多路转接之 epoll:系统调用、工作原理、代码演示及应用场景

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、I/O 多路转接之 epoll 1.1、epoll 初识 1.2、epoll 的相关系统调用 1.2.1、epoll_create 1.2.2、epol…

pytest 常用插件

pytest 提供了许多功能强大的插件来增强测试体验和执行能力。以下是一些常用的 pytest 插件介绍&#xff0c;并结合 pytest.main() 进行使用的示例。 1. pytest-xdist pytest-xdist 插件用于并行化测试的执行&#xff0c;可以将测试分配到多个 CPU 核心并行运行&#xff0c;从…

openwrt 常见编译问题及编译提速

目录 friendlywrt介绍官方编译流程编译问题git clone errorbusybox和其他包冲突GCC编译错误ERROR: package/feeds/packages/gcc failed to build.手动编译编译提速ccache修改makefile去掉一些不必要的依赖固件定制:增加已经编译好的应用rootfs生成过程REF本文以friendlywrt22-…

Angular结合C#

在 Angular 2 及以上版本与 C#结合使用 REST API 的示例中&#xff0c;我们将分别展示前端 Angular 服务和后端 C# Web API 的实现。 一、前端&#xff1a;Angular 服务 生成 Angular 服务 使用 Angular CLI 生成一个新的服务&#xff0c;例如user.service.ts&#xff1a; ng…

双向列表的实现(C++)

一.实现思路 主要是一个空间存储一个数值&#xff0c;然后为了索引后面的数据单元和前面的数据单元&#xff0c;所以在每个空间里面还要存储前面和后面数据单元的指针&#xff0c;就形成了每个数据单元 后面就是要管理的是双向列表的头结点和尾节点&#xff0c;方便实现后面的头…

国产信创实践(国能磐石服务器操作系统CEOS +东方通TongHttpServer)

替换介绍&#xff1a; 国能磐石服务器操作系统CEOS 对标 Linux 服务器操作系统&#xff08;Ubuntu, CentOS&#xff09; 东方通TongHttpServer 对标 Nginx 负载均衡Web服务器 第一步&#xff1a; 服务器安装CEOS映像文件&#xff0c;可直接安装&#xff0c;本文采用使用VMware …

Linux——修改USB网卡设备节点名称

修改驱动&#xff1a; 测试&#xff1a; 参考资料&#xff1a; https://blog.csdn.net/ablexu2018/article/details/144868950

上手体验微软全新整合的王炸平台Fabric

体验确实不错&#xff0c;微软强大的生态能力。 把可视化&#xff0c;数仓&#xff0c;数据胡&#xff0c;数据工厂&#xff0c;机器学习&#xff0c;数据监控等技术都整合到一个平台了。所有数据全都存储在统一的one lake数据中心&#xff0c;消除数据孤岛问题。而且不同角色可…

浅析PCIe链路均衡技术原理与演进

在现代计算机硬件体系的持续演进中&#xff0c;PCIe技术始终扮演着核心角色&#xff0c;其作为连接 CPU 与各类周边设备的关键高速通信链路&#xff0c;不断推动着计算机性能边界的拓展。而 PCIe Link Equalization均衡技术&#xff0c;作为保障数据在高速传输过程中准确性与稳…

东京大学联合Adobe提出基于指令的图像编辑模型InstructMove,可通过观察视频中的动作来实现基于指令的图像编辑。

东京大学联合Adobe提出的InstructMove是一种基于指令的图像编辑模型&#xff0c;使用多模态 LLM 生成的指令对视频中的帧对进行训练。该模型擅长非刚性编辑&#xff0c;例如调整主体姿势、表情和改变视点&#xff0c;同时保持内容一致性。此外&#xff0c;该方法通过集成蒙版、…

Scala语言的软件工程

Scala语言的软件工程 引言 在当今软件开发领域&#xff0c;编程语言的选择对于项目的成功与否至关重要。Scala&#xff0c;作为一种具有函数式编程和面向对象编程特性的强大语言&#xff0c;近年来在开发者社区中获得了越来越高的认可。Scala的灵活性和表达能力使其成为大规模…

Linux Elasticsearch kibana ik分词器 安装部署和快照恢复

Elasticsearch安装部署 1.下载安装包 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.0-linux-x86_64.tar.gz 2.解压到opt目录下 tar -zxvf elasticsearch-7.8.0-linux-x86_64.tar.gz -C /opt/ 3.重命名 mv elasticsearch-7.8.0 es 4.添…

Wireshark 学习笔记1

1.wireshark是什么 wireshark是一个可以进行数据包的捕获和分析的软件 2.基本使用过程 &#xff08;1&#xff09;选择合适的网卡 &#xff08;2&#xff09;开始捕获数据包 &#xff08;3&#xff09;过滤掉无用的数据包 &#xff08;4&#xff09;将捕获到的数据包保存为文件…

学习threejs,导入babylon格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.BabylonLoader babyl…

Redis缓存穿透、缓存击穿、缓存雪崩

缓存穿透 定义&#xff1a; 查询一个不存在的数据&#xff0c;mysql查询不到数据也不会直接写入缓存&#xff0c;就会导致每次请求都查数据库 例子&#xff1a; 一个get请求&#xff1a;api/news/getById/-1 解决方案 方案一&#xff1a;缓存空数据 缓存空数据&#xff0c;查…

Lua语言的语法

Lua语言的探索与应用 引言 Lua是一种轻量级、高性能的脚本语言&#xff0c;广泛应用于游戏开发、嵌入式系统和很多应用程序中。它的灵活性和高效性使得Lua成为软件开发中不可或缺的一部分。本文将从Lua的历史、语法、特色、使用案例及其在实际开发中的应用进行深入探讨。 Lu…