当前位置： 首页 > ds >正文

【项目】基于ArkTS的网吧会员应用开发（2）

ds 2025/5/6 7:59:55

一、效果图展示

  

二、界面功能讲解

以上效果图分别为登录页面，注册页面，找回密码等功能页面效果图。其中包含手机号和密码登录，用户名，密码，收假后，年龄，性别和验证码的注册信息，通过手机号和新密码以及获取验证码来找回密码。

三、代码演示

登录界面代码如下：

import promptAction from '@ohos.promptAction';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
import PreferencesUtil from '../utils/PreferencesUtil';
import MemberInfo from '../entity/MemberInfo';
@Entry
@Component
struct Test {private mit:MemberInfoTable=new MemberInfoTable();@State phone:string="";@State psd:string="";private pu:PreferencesUtil=new PreferencesUtil();private mi:MemberInfo;build() {Column() {Column(){Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)}.width("100%").height("30%").backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)Row(){Image($r("app.media.lr_ico_phone")).width(40).height(40).margin(10)TextInput({placeholder:"手机号"}).layoutWeight(1).height(40).type(InputType.Number).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({size:20}).onChange((value)=>{this.phone=value;})}.width("95%").height(60).borderWidth(5).borderColor(Color.Orange)
.borderRadius(20).margin(20)Row(){Image($r("app.media.lr_ico_pass")).width(40).height(40).margin(10)TextInput({placeholder:"账号密码"}).layoutWeight(1).height(40).type(InputType.Password).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({size:20}).onChange((value)=>{this.psd=value;})}.width("95%").height(60).borderWidth(5).borderColor(Color.Orange)
.borderRadius(20).margin(20)Button("登录").width("90%").height(60).backgroundColor(Color.Orange).fontSize(22).margin({top:20}).onClick(()=>{//获得用户输入的内容，查询数据库该用户是否存在promptAction.showToast({message:this.phone+"--"+this.psd});this.mit.getRdbStore(()=>{this.mit.loginQuery(this.phone,this.psd,async (result)=>{if (String(JSON.stringify(result))=="[]") {promptAction.showToast({message:"账号或密码错误，请重新输输入！"});this.phone="";this.psd="";}else {this.mi=result[0];await this.pu.getPreferencesFromStorage();//对象数据转json字符串this.pu.putPreference("member",JSON.stringify(this.mi));//将用户信息保存至轻量级存储router.replaceUrl({url:"pages/Home"})}})})})Blank()Row(){Text("册").fontSize(20).layoutWeight(1).textAlign(TextAlign.Start).padding(10).fontColor(Color.Orange).onClick(()=>{router.pushUrl({url:"pages/Register"})})Text("找回码").fontSize(20).layoutWeight(1).textAlign(TextAlign.End).padding(10).fontColor(Color.Orange).onClick(()=>{router.pushUrl({url:"pages/FindPsd"})})}.width("100%")}.width('100%').height('100%')}
}

注册页面代码：

import promptAction from '@ohos.promptAction';
import MemberInfo from '../entity/MemberInfo';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
@Entry
@Component
struct Register {@State random_num: string = String(Math.round(Math.random() * 9000 + 1000));@State ti_name:string="";@State ti_psd:string="";@State ti_phone:string="";@State ti_age:string="";@State ti_sex:string="";@State ti_random:string="";private mit:MemberInfoTable=new MemberInfoTable();build() {Scroll() {Column() {Column() {Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)}.width("100%").height(180).backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)Column() {TextInput({ placeholder: "用户名" }).width("100%").height(60).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_name=value;})TextInput({ placeholder: "账号密码" }).width("100%").height(60).type(InputType.Password).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_psd=value;})TextInput({ placeholder: "手机号" }).width("100%").height(60).type(InputType.PhoneNumber).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_phone=value;})TextInput({ placeholder: "年龄" }).width("100%").height(60).type(InputType.Number).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_age=value;})TextInput({ placeholder: "性别" }).width("100%").height(60).type(InputType.Normal).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_sex=value;})Row() {TextInput({ placeholder: "验证码" }).width("70%").height(60).type(InputType.Normal).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).onChange((value) => {this.ti_random=value;})Divider().vertical(true).strokeWidth(5).color(Color.Orange)Text(this.random_num).width("25%").height(50).fontSize(24).fontColor(Color.Orange).fontWeight(FontWeight.Bold).letterSpacing(3).textAlign(TextAlign.Center).margin(5).onClick(() => {this.random_num = String(Math.round(Math.random() * 9000 + 1000));})}.width("95%").height(60).borderWidth(3).borderColor(Color.Orange).margin(10).borderRadius(20)Button("注册").fontColor(Color.White).fontWeight(FontWeight.Bold).fontSize(20).width("90%").margin(10).height(60).type(ButtonType.Normal).borderRadius(20).backgroundColor(Color.Orange).onClick(()=>{if (this.ti_name=="") {promptAction.showToast({message:"用户名不能为空"})}else if (this.ti_psd==""){promptAction.showToast({message:"密码不能为空"})}else if (this.ti_phone==""){promptAction.showToast({message:"手机号不能为空"})}else if (this.ti_age==""){promptAction.showToast({message:"密码不能为空"})}else if (this.ti_sex==""){promptAction.showToast({message:"性别不能为空"})}else if (this.ti_random==""){promptAction.showToast({message:"验证码不能为空"})}else if (this.ti_random!=this.random_num){promptAction.showToast({message:"验证码输入错误"})this.random_num=String(Math.round(Math.random() * 9000 + 1000));}else {this.mit.getRdbStore(()=>{let m:MemberInfo={hy_id:0,name:this.ti_name,psd:this.ti_psd,phone:this.ti_phone,age:Number(this.ti_age),sex:this.ti_sex}this.mit.insertData(m,()=>{promptAction.showToast({message:"注册成功"})//返回登录页面router.back()})})}})}.borderWidth(5).borderColor(Color.Orange).width("90%").margin(10).borderRadius(20)}}.width('100%')}
}

找回密码界面代码：

import promptAction from '@ohos.promptAction';
import MemberInfo from '../entity/MemberInfo';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
@Entry
@Component
struct Register {@State random_num: string = String(Math.round(Math.random() * 9000 + 1000));@State ti_name:string="";@State ti_psd:string="";@State ti_phone:string="";@State ti_age:string="";@State ti_sex:string="";@State ti_random:string="";private mit:MemberInfoTable=new MemberInfoTable();build() {Scroll() {Column() {Column() {Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)}.width("100%").height(180).backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)Column() {TextInput({ placeholder: "用户名" }).width("100%").height(60).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_name=value;})TextInput({ placeholder: "账号密码" }).width("100%").height(60).type(InputType.Password).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_psd=value;})TextInput({ placeholder: "手机号" }).width("100%").height(60).type(InputType.PhoneNumber).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_phone=value;})TextInput({ placeholder: "年龄" }).width("100%").height(60).type(InputType.Number).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_age=value;})TextInput({ placeholder: "性别" }).width("100%").height(60).type(InputType.Normal).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).borderWidth(3).margin(10).borderColor(Color.Orange).onChange((value) => {this.ti_sex=value;})Row() {TextInput({ placeholder: "验证码" }).width("70%").height(60).type(InputType.Normal).backgroundColor(Color.Transparent).fontSize(20).placeholderFont({ size: 20 }).onChange((value) => {this.ti_random=value;})Divider().vertical(true).strokeWidth(5).color(Color.Orange)Text(this.random_num).width("25%").height(50).fontSize(24).fontColor(Color.Orange).fontWeight(FontWeight.Bold).letterSpacing(3).textAlign(TextAlign.Center).margin(5).onClick(() => {this.random_num = String(Math.round(Math.random() * 9000 + 1000));})}.width("95%").height(60).borderWidth(3).borderColor(Color.Orange).margin(10).borderRadius(20)Button("注册").fontColor(Color.White).fontWeight(FontWeight.Bold).fontSize(20).width("90%").margin(10).height(60).type(ButtonType.Normal).borderRadius(20).backgroundColor(Color.Orange).onClick(()=>{if (this.ti_name=="") {promptAction.showToast({message:"用户名不能为空"})}else if (this.ti_psd==""){promptAction.showToast({message:"密码不能为空"})}else if (this.ti_phone==""){promptAction.showToast({message:"手机号不能为空"})}else if (this.ti_age==""){promptAction.showToast({message:"密码不能为空"})}else if (this.ti_sex==""){promptAction.showToast({message:"性别不能为空"})}else if (this.ti_random==""){promptAction.showToast({message:"验证码不能为空"})}else if (this.ti_random!=this.random_num){promptAction.showToast({message:"验证码输入错误"})this.random_num=String(Math.round(Math.random() * 9000 + 1000));}else {this.mit.getRdbStore(()=>{let m:MemberInfo={hy_id:0,name:this.ti_name,psd:this.ti_psd,phone:this.ti_phone,age:Number(this.ti_age),sex:this.ti_sex}this.mit.insertData(m,()=>{promptAction.showToast({message:"注册成功"})//返回登录页面router.back()})})}})}.borderWidth(5).borderColor(Color.Orange).width("90%").margin(10).borderRadius(20)}}.width('100%')}
}

http://www.xdnf.cn/news/4206.html

相关文章：

  • Qt天气预报系统更新UI界面
  • ansible基础-优化
  • 代码随想录算法训练营day9:字符串part02
  • 英伟达开源英语自动语音识别模型：nvidia/parakeet-tdt-0.6b-v2
  • android zxing QrCode 库集成转竖屏适配问题
  • 餐具瓷器品牌十大排名
  • Linux安装RTL8215网卡驱动
  • FreeRTOS系统CPU使用率统计
  • AutoGPT
  • GESP2024年3月认证C++八级( 第二部分判断题（6-10））
  • 柯西乘积定理（Cauchy Product Theorem）
  • C# 反射
  • [特殊字符] 大模型（LLMs）RAG 版面分析——文本分块面
  • 农经权二轮延包软件—摸底申请表生成
  • 数据库的并发控制
  • nats v2.11.3全新上线！MQTT支持增强、JetStream性能优化、关键BUG修复，构建高效可信消息中间件新时代
  • NV287NV291美光固态闪存NV293NV294
  • Deepseek基础-api key申请及应用(java)、硅基流动api key申请及应用(dify)
  • ThreadLocal源码深度剖析：内存管理与哈希机制
  • Lora原理介绍并用Macbook air超快实现本地微调小模型
  • AI日报 · 2025年5月05日｜雅诗兰黛与微软合作成立 AI 创新实验室，加速美妆产品研发与营销
  • 【言语理解】片段阅读之下文推断(6)
  • 设计模式每日硬核训练 Day 18：备忘录模式（Memento Pattern）完整讲解与实战应用
  • 全球化电商平台AWS云架构设计
  • 矩阵置零（中等）
  • 设计模式-基础概念学习总结（继承、多态、虚方法、方法重写）
  • 深入理解块级格式化上下文（BFC）
  • 文本三剑客
  • 字符串匹配 之 拓展 KMP算法(Z算法)
  • 数据集-目标检测系列- 印度人脸 检测数据集 indian face ＞＞ DataBall