鸿蒙项目二—— 注册和登录

此部分和上篇文章是连续剧 ，如果需要，请查看

一、注册

import http from '@ohos.net.http';
@Entry
@Component
struct Reg {// 定义数据：@State username: string = "";@State userpass: string = "";@State userpass2: string = "";@State usernameColor: number = 0x000000;@State userpassColor: number = 0x000000;@State userpass2Color: number = 0x000000;// 表单验证是否成功：formIsSuccess() {return this.username.trim() !== "" && this.userpass.trim() !== "" && this.userpass2.trim() !== "" && this.userpass === this.userpass2}regSave() {//   1、非空验证if (this.username.trim() == "") {console.log("用户名不能为空")this.usernameColor = 0xff0000;return;}if (this.userpass.trim() == "") {console.log("密码不能为空")this.userpassColor = 0xff0000;return;}if (this.userpass2.trim() == "") {console.log("确认密码不能为空")this.userpass2Color = 0xff0000;return;}//   2、密码是否一致//   3、发送请求，进行注册const httpRequest = http.createHttp();httpRequest.request("http://localhost:3000/vips", {method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET// 开发者根据自身业务需要添加header字段header: {'Content-Type': 'application/json'},// 当使用POST请求时此字段用于传递内容extraData: {username:this.username,userpass:this.userpass},connectTimeout: 60000, // 可选，默认为60sreadTimeout: 60000, // 可选，默认为60s},(err,data)=>{if(!err){console.log("data.result",data.result)console.log("data.responseCode",data.responseCode)if(data.responseCode==201){console.log("注册成功")}}})}build() {Column() {Row() {Image($r("app.media.back")).width(50).height(30).margin(20)}.width("100%").height(60)Blank().height(50)Row() {Text("欢迎您的注册").fontSize(40).fontWeight(FontWeight.Bold)}Row() {Text("用户名：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入用户名", text: this.username }).width(260).height(40).placeholderColor(this.usernameColor).onChange((val: string) => {this.username = val;})}.width("100%").height(60).margin({top: 20})Row() {Text("密    码：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入密码", text: this.userpass }).type(InputType.Password).width(260).height(40).placeholderColor(this.userpassColor).onChange((val: string) => {this.userpass = val;})}.width("100%").height(60).margin({top: 10})Row() {Text("确认密码：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入确认密码", text: this.userpass2 }).type(InputType.Password).width(260).height(40).placeholderColor(this.userpass2Color).onChange((val: string) => {this.userpass2 = val;})}.width("100%").height(60).margin({top: 10})Row() {if (this.userpass !== this.userpass2) {Text("两次密码不一致").fontSize(20).fontColor(Color.Red);}}Button("注册").width("90%").height(60).margin({top: 10}).fontSize(30).fontWeight(600).enabled(this.formIsSuccess()).onClick(() => {this.regSave();})Blank().height(100)Row() {Text("--第三方账号登录--")}.margin({bottom: 20})Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {Image($r("app.media.qq")).width(40).height(40)Image($r("app.media.weixin")).width(40).height(40)Image($r("app.media.weibo")).width(40).height(40)}.width("100%").height(60)}.width('100%')}
}

二、登录

本地存储用户信息的文件：

`utils/globaldata.ts`

export const storage:LocalStorage = new LocalStorage();


页面代码：


import http from '@ohos.net.http';
import router from '@ohos.router';
import {storage} from '../utils/globaldata';interface IParams{from:string,data:string
}@Entry
@Component
struct Login {// 定义数据：@State username: string = "";@State userpass: string = "";@State phone:string="";@State usernameColor: number = 0x000000;@State userpassColor: number = 0x000000;// 表单验证是否成功：formIsSuccess() {return this.username.trim() !== "" && this.userpass.trim() !== "";}loginCheck() {//   1、非空验证if (this.username.trim() == "") {console.log("用户名不能为空")this.usernameColor = 0xff0000;return;}if (this.userpass.trim() == "") {console.log("密码不能为空")this.userpassColor = 0xff0000;return;}//3、发送请求，进行登录const httpRequest = http.createHttp();// get请求，给后端传递数据的方式一：// 请求地址?属性名1=属性值1&属性名2=属性值2httpRequest.request(`http://localhost:3000/vips?username=${this.username}&userpass=${this.userpass}`,(err,data)=>{// !err 只是表示请求响应没有问题，不代表是否获取到了数据if(!err){console.log("data.result",data.result)const arr = JSON.parse(data.result as string)if(arr.length===1){console.log("登录成功");// 保存登录的相关信息（如：用户名，电话号码）storage.setOrCreate("username",this.username);storage.setOrCreate("phone",this.phone);console.log("from",(router.getParams() as IParams).from)// 跳转到我的页面。// router.back();router.pushUrl({url:(router.getParams() as IParams).from,params:{data:(router.getParams() as IParams).data}})}else{console.log("登录失败，用户名或密码不正确")}}else{console.log("网络出错")}})}build() {Column() {Row() {Image($r("app.media.back")).width(50).height(30).margin(20).onClick(()=>{router.back();})}.width("100%").height(60)Blank().height(50)Row() {Text("亲，请登录").fontSize(40).fontWeight(FontWeight.Bold)}Row() {Text("用户名：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入用户名", text: this.username }).width(260).height(40).placeholderColor(this.usernameColor).onChange((val: string) => {this.username = val;})}.width("100%").height(60).margin({top: 20})Row() {Text("手机号码：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入手机号", text: this.phone }).width(260).height(40).placeholderColor(this.usernameColor).onChange((val: string) => {this.phone = val;})}.width("100%").height(60).margin({top: 20})Row() {Text("密    码：").fontSize(20).fontWeight(400)TextInput({ placeholder: "请输入密码", text: this.userpass }).type(InputType.Password).width(260).height(40).placeholderColor(this.userpassColor).onChange((val: string) => {this.userpass = val;})}.width("100%").height(60).margin({top: 10})Button("登录").width("90%").height(60).margin({top: 10}).fontSize(30).fontWeight(600).enabled(this.formIsSuccess()).onClick(() => {this.loginCheck();})Blank().height(100)Row() {Text("--第三方账号登录--")}.margin({bottom: 20})Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {Image($r("app.media.qq")).width(40).height(40)Image($r("app.media.weixin")).width(40).height(40)Image($r("app.media.weibo")).width(40).height(40)}.width("100%").height(60)}.width('100%')}
}

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

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

相关文章

ChatGPT如何在地学、GIS、气象、农业、生态、环境等领域中完美应用

ChatGPT如何在地学、GIS、气象、农业、生态、环境等领域中完美应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮，可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…
阅读更多...
全球供应链解析：电商企业如何实现极速发展

全球供应链解析：电商企业如何实现极速发展

随着数字时代的来临，电商行业正成为全球商业发展的引擎之一。实现供应链的高效运作对于电商企业来说至关重要，尤其是在追求极速发展的过程中。本文将深入解析全球供应链，探讨电商企业如何通过优化供应链实现极速发展，并揭示这一发…
阅读更多...
《软件需求分析报告》

《软件需求分析报告》

第1章 序言 第2章 引言 2.1 项目概述 2.2 编写目的 2.3 文档约定 2.4 预期读者及阅读建议 第3章 技术要求 3.1 软件开发要求 第4章 项目建设内容 第5章 系统安全需求 5.1 物理设计安全 5.2 系统安全设计 5.3 网络安全设计 5.4 应用安全设计 5.5 对用户安全管理 …
阅读更多...
什么是动态IP？静态IP和动态IP有什么区别？

什么是动态IP？静态IP和动态IP有什么区别？

动态IP(Dynamic IP)和静态IP(Static IP)它是指在计算机网络中分配给设备的两种不同类型的IP地址。 动态IP是指每次设备连接到网络时，网络服务提供商(ISP)IP地址的动态分配。当设备重新连接到网络时，它可能会被分配到不同的IP地址。动态IP适用于传统的家…
阅读更多...
DRF从入门到精通五（路由组件、认证组件）

DRF从入门到精通五（路由组件、认证组件）

文章目录 一、路由组件REST framework提供了两个routeraction装饰器 二、认证组件 一、路由组件 对于视图集ViewSetMixin，我们除了可以自己手动指明请求方式与动作action之间的对应关系外，还可以使用Routers来帮助我们快速实现路由信息。 REST framework…
阅读更多...
万界星空科技生产管理MES系统中的工时管理

万界星空科技生产管理MES系统中的工时管理

工时管理的重大意义 1.提高生产效率 通过工时管理，企业可以更加精确地掌握研发人员的工时情况，及时调整项目进度和人力安排，提高生产效率。 2.降低人力成本 通过工时管理，企业可以更加精确地核算研发人员的工时费用&#xff0c…
阅读更多...
玩客云 青龙面板

玩客云 青龙面板

一、刷机 需要的工具，镊子，双公头USB（可以自己做），U盘 青龙面板全教程 | Anubis的小窝 powersee教程 玩客云导航固件使用说明 安装教程 玩客云乱七八糟的坑 静态IP配置 玩客云第二版固件说明 docker 下载器 …
阅读更多...
VScode跑通Remix.js官方的contact程序开发过程

VScode跑通Remix.js官方的contact程序开发过程

目录 1 引言 2 安装并跑起来 3 设置根路由 4 用links来添加风格资源 ​5 联系人路由的UI 6 添加联系人的UI组件 7 嵌套路由和出口 8 类型推理 9 Loader里的URL参数 10 验证参数并抛出响应 书接上回，我们已经跑通了remix的quick start项目，接下…
阅读更多...
【计算机毕业设计】SSM超市订单管理系统

【计算机毕业设计】SSM超市订单管理系统

项目介绍 超市订单管理系统。主要功能包括订单管理、供应商管理、用户管理等功能 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐ID…
阅读更多...
MSPM0L1306例程学习-ADC部分(5)

MSPM0L1306例程学习-ADC部分(5)

MSPM0L1306例程学习系列 使用的TI的官方例程，即SDK里边包含的例程代码。 可以到TI官网下载并且安装SDK: https://www.ti.com.cn/tool/cn/download/MSPM0-SDK/ MCU使用的是MSPM0L1306, 对于ADC部分，有10个例程： 今天接着讲2个例程&#xff0…
阅读更多...
w16php系列之基础数组

w16php系列之基础数组

一、索引数组 概念 索引数组 是指键名为整数的数组。默认情况下&#xff0c;索引数组的键名是从0开始&#xff0c;并依次递增。它主要适用于利用位置&#xff08;0、1、2……&#xff09;来标识数组元素的情况。另外&#xff0c;索引数组的键名也可以自己指定 示例代码 <…
阅读更多...
系列十六（面试）、RocketMQ中如何解决消息堆积问题？

系列十六（面试）、RocketMQ中如何解决消息堆积问题？

一、RocketMQ中解决消息堆积问题 1.1、概述 消息堆积是RocketMQ中很常见的一个问题&#xff0c;也是面试官很喜欢问的一个问题&#xff0c;那么什么是消息堆积呢&#xff1f;消息堆积&#xff0c;顾名思义是指某个时间段队列里面堆积了大量来不及消费的消息&#xff0c;一般认…
阅读更多...
8_js_dom编程入门2

8_js_dom编程入门2

Objective&#xff08;本课目标&#xff09; 掌握基本课堂案例掌握节点的关系操作 1. 按钮选中案例 课堂案例&#xff1a;1.显示按钮的选中效果.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta nam…
阅读更多...
1.解决父组件传数据给子组件太慢，导致子组件获取不到合适数据渲染出错问题2.vue中props传递异步数据，子组件用watch监听

1.解决父组件传数据给子组件太慢，导致子组件获取不到合适数据渲染出错问题2.vue中props传递异步数据，子组件用watch监听

vue中props传递异步数据&#xff0c;子组件用watch监听
阅读更多...
Upload上传图片，回显图片，编辑图片，限制图片，不显示上传图标，图片放大功能

Upload上传图片，回显图片，编辑图片，限制图片，不显示上传图标，图片放大功能

效果图&#xff1a; 新增、编辑时&#xff1a;限制上传四张&#xff0c;当超过四张隐藏上传图标 图片放大 &#xff1a;效果图 详情&#xff1a;回显时不显示上传图标 页面&#xff1a;template 部分 图片在前端存储&#xff0c;提交时一并给后端 :file-list"repairPlan…
阅读更多...
什么是骨传导蓝牙耳机？骨传导耳机原理分析！

什么是骨传导蓝牙耳机？骨传导耳机原理分析！

骨传导耳机&#xff0c;顾名思义是利用骨传导技术制造而成的一种耳机&#xff0c;也被称之为骨导耳机、骨感耳机、骨传感耳机。 骨传导耳机的传声原理跟传统耳机有所不同&#xff0c;传统耳机通过空气振动将声音传入耳膜&#xff0c;而骨传导耳机是通过人体骨骼将声音直接传递…
阅读更多...
c4d怎么建模沙发?

c4d怎么建模沙发?

c4d怎么建模沙发&#xff1f;c4d中想要制作一组沙发&#xff0c;该怎么制作三维立体的沙发模型呢&#xff1f;c4d中想要制作一组沙发&#xff0c;该怎么建模沙发呢&#xff1f;下面我们就来看看c4d创建沙发模型的教程。 1、打开软件&#xff0c;点击立方体&#xff1b; 2、修改…
阅读更多...
vue2、vue3状态管理之vuex、pinia

vue2、vue3状态管理之vuex、pinia

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、状态管理之vuex1.1 State调用&#xff1a;1.2 Mutation在vuex中定义&#xff1a;在组件中使用&#xff1a; 1.3 Action在vuex中定义&#xff1a;将上面的减…
阅读更多...
FPGA-AMBA协议、APB协议、AHB规范、AXI４协议规范概述及它们之间的关系

FPGA-AMBA协议、APB协议、AHB规范、AXI４协议规范概述及它们之间的关系

FPGA-AMBA协议、APB协议、AHB协议、AXI&#xff14;协议规范概述 笔记记录&#xff0c;AMBA协议、APB协议、AHB规范、AXI&#xff14;协议规范概述&#xff0c;只是概述描述&#xff0c;具体详细的协议地址传输、数据传输等内容将在下一章节详细说明。 文章目录 FPGA-AMBA协议…
阅读更多...
【目标跟踪】解决多目标跟踪遮挡问题

【目标跟踪】解决多目标跟踪遮挡问题

文章目录 前言一、判定遮挡目标二、扩展目标框三、结论 前言 目标跟踪在发生遮挡时&#xff0c;极其容易发生Id Switch。网上许多算法忽视跟踪遮挡问题,同时网上相关资料也很少。博主为了解决跟踪遮挡&#xff0c;翻阅大量论文。分享其中一篇论文。论文链接&#xff1a;https:…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023