devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS Next 实现登录注册页面(ARKTS) 并使用Springboot作为后端提供接口_arkts登录注册界面

作者：花生_TL007 | 2024-04-20 14:24:20

赞

踩

arkts登录注册界面

1. HarmonyOS next

ArkTS

ArkTS围绕应用开发在 TypeScript （简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集

ArkTS在TS的基础上扩展了struct和很多的装饰器以达到描述UI和状态管理的目的

以下代码是一个基于 HarmonyOS 的登录页面组件的示例代码，主要实现了用户登录功能以及一些数据存储和页面跳转的操作。下面我会逐步解释每个部分并添加注释：

2. 实例

3. 功能分区

1.1. HTTP获取后台接口数据，以下是示例

  1.   async jwt(jwt: string) {
  2.     try {
  3.       const res = await this.httpUtil.request(`192.168.xxx.xxx/readers/userinfo`, {
  4.         method: http.RequestMethod.GET,
  5.         extraData: { no: jwt },
  6.       });
  7.       let data = JSON.parse(res.result.toString());
  8.       return data;
  9.     } catch (error) {
  10.       throw error;
  11.     }
  12.   }

1.2 接口数据（作为测试，可以直接使用json）：

2.生命周期函数的使用--AboutToAppear AboutToDisappear

  1.   aboutToAppear() {
  2.     let httpRequest = http.createHttp()
  3.     this.httpUtil = httpRequest
  4.     // todo 初始化上一次访问时间
  5.     this.getPreTime()
  6.     // todo 初始化当前时间
  7.     this.getLocalTimeToPreference()
  8.     // todo 初始化本地数据库的密码和用户名
  9.     this.getUserInfo()
  10.   }

3.APPStorage进程作为缓存，只能在应用运行时使用

4.DATAPreference 数据持久化，存于用户本机

4. 分层结构

4.代码演示

1. 导入模块：
 

  1. import router from '@ohos.router' // 导入路由模块
  2. import storage from '@ohos.data.storage' // 导入数据存储模块
  3. import App from '@system.app' // 导入应用模块
  4. import Prompt from '@system.prompt' // 导入提示模块
  5. import http from '@ohos.net.http' // 导入网络请求模块
  6. import { RouterInfo } from '../../Pojo/RouterInfo' // 导入自定义的 RouterInfo 类
  7. import common from '@ohos.app.ability.common' // 导入通用模块
  8. import dataPreference from '@ohos.data.preferences' // 导入数据首选项模块

2. 定义 `Login` 结构体：
 

  1. @Entry
  2. @Component
  3. struct Login {
  4.   // 定义状态变量
  5.   @State username: string = ""
  6.   @State pwd: string = ""
  7.   @State allow: boolean = false
  8.   @State upload: boolean = true
  9.   @State uploadTag: boolean = false
  10.   @State lastLocalTime: string = ""
  11.   
  12.   // 其他属性和方法...
  13. }

3. 实例化 `RouterInfo` 对象和初始化方法：

RouterInfo是一个自定义的类

  1. export class RouterInfo{
  2.   name:string
  3.   url:string
  4.   message:string
  5.  
  6.   constructor(name,url,message) {
  7.     this.name=name
  8.     this.url=url
  9.     this.message=message
  10.   }
  11. }
  1. Router = new RouterInfo("进入主页", "pages/Books/Main", "主页面")
  2.  
  3. aboutToAppear() {
  4.   // 初始化操作，包括创建 HTTP 请求对象、获取上次访问时间、初始化本地时间等
  5. }

4. 页面跳转方法 `goTo()`：

  1. goTo(Router: RouterInfo) {
  2.   // 调用路由模块进行页面跳转
  3. }

5. 异步获取用户信息的方法 `jwt()`：
 

  1. async jwt(jwt: string) {
  2.   // 发起网络请求获取用户信息
  3. }

6. 存储当前时间到用户首选项方法 `getLocalTimeToPreference()`：
 

  1. // 获取当前时间并存入用户首选项
  2.   getLocalTimeToPreference(){
  3.     const currentDate: Date = new Date();
  4.     const currentYear: number = currentDate.getFullYear();
  5.     const currentMonth: number = currentDate.getMonth() + 1; // 注意：月份从 0 开始，需要加 1
  6.     const currentDay: number = currentDate.getDate();
  7.     const currentHour: number = currentDate.getHours();
  8.     const currentMinute: number = currentDate.getMinutes();
  9.     const currentSecond: number = currentDate.getSeconds();
  10.  
  11.     const curTime = `北京时间：${currentYear}-${currentMonth}-${currentDay} ${currentHour}:${currentMinute}:${currentSecond}`;
  12.  
  13.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  14.       preferences.put("curTime", curTime).then(_ => {
  15.         preferences.flush();
  16.       });
  17.     }).catch((err: Error) => {
  18.       console.error(err.message);
  19.     });
  20.   }

7. 获取上一次访问时间方法 `getPreTime()` 和关闭应用更新时间方法

  1.  // 获取上一次的时间--lastTime
  2.   getPreTime(){
  3.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  4.       if (!preferences.has("lastTime")) {
  5.         console.log("数据并未能保存");
  6.       } else {
  7.         preferences.get("lastTime", 'null').then((value) => {
  8.           this.last=value.toLocaleString()
  9.           // AlertDialog.show({message:`上一次访问时间：${this.last}`})
  10.           console.log("数据为:" + value);
  11.         }).catch(_ => {
  12.           console.log("读取失败");
  13.         });
  14.       }
  15.     });
  16.   }
  17.  
  18.   // 关闭应用时将lastTime置换为curTime，并将curTime替换为空值
  19.   closeAppAndUpdateTime(){
  20.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  21.       preferences.get("curTime", '').then((curTime) => {
  22.         preferences.put("lastTime", curTime);
  23.         preferences.put("curTime", '');
  24.         preferences.flush();
  25.         console.log("上一次时间已更新，当前时间已清空");
  26.       }).catch((err: Error) => {
  27.         console.error(err.message)
  28.       });
  29.     }).catch((err: Error) => {
  30.       console.error(err.message);
  31.     });
  32.   }

8. 用户登录方法 `login()` 和相关辅助方法：

  1. login() {
  2.   // 用户登录逻辑，包括密码验证、令牌解析、存储用户信息等操作
  3. }
  4.  
  5. uploadUserInfo() {
  6.   // 将用户信息上传到本地存储
  7. }
  8.  
  9. getUserInfo() {
  10.   // 获取本地存储的用户信息
  11. }

9. 构建页面布局的方法 `build()`：

  1. build() {
  2.   // 构建页面布局，包括输入框、按钮、复选框等组件
  3. }

这段代码实现了一个简单的登录页面，涵盖了用户输入、网络请求、数据存储等功能，并且使用 HarmonyOS 的一些模块来实现这些功能。

5.全代码

  1. import router from '@ohos.router'
  2. import storage from '@ohos.data.storage'
  3. import App from '@system.app'
  4. import Prompt from '@system.prompt'
  5. import http from '@ohos.net.http'
  6. import { RouterInfo } from '../../Pojo/RouterInfo'
  7. import common from '@ohos.app.ability.common'
  8. import dataPreference from '@ohos.data.preferences'
  9. @Entry
  10. @Component
  11. struct Login {
  12.   // todo 定义域
  13.   @State username:string=""
  14.   @State pwd:string=""
  15.   @State allow:boolean = false
  16.   @State upload:boolean = true
  17.   @State uploadTag:boolean = false
  18.   @State lastLocalTime:string=""
  19.   httpUtil: http.HttpRequest
  20.   context = getContext(this) as common.UIAbilityContext
  21.   @State last:string=''
  22.   Router = new RouterInfo("进入主页","pages/Books/Main","主页面")
  23.  
  24.   aboutToAppear() {
  25.     let httpRequest = http.createHttp()
  26.     this.httpUtil = httpRequest
  27.     // todo 初始化上一次访问时间
  28.     this.getPreTime()
  29.     // todo 初始化当前时间
  30.     this.getLocalTimeToPreference()
  31.     // todo 初始化本地数据库的密码和用户名
  32.     this.getUserInfo()
  33.   }
  34.  
  35.   aboutToDisappear(){
  36.     // todo 保存当前时间作为上一次的时间
  37.     this.closeAppAndUpdateTime()
  38.   }
  39.  
  40.  
  41.  
  42.   goTo(Router:RouterInfo){
  43.     router.pushUrl({
  44.       url: Router.url,
  45.       params:{
  46.         title:Router.message
  47.       }
  48.     },
  49.       router.RouterMode.Single,
  50.       err=> {
  51.         if (err) {
  52.           console.log("路由失败"+err.code+':'+err.message)
  53.         }
  54.       })
  55.   }
  56.  
  57.  
  58.   async jwt(jwt: string) {
  59.     try {
  60.       const res = await this.httpUtil.request(`192.168.137.1/readers/userinfo`, {
  61.         method: http.RequestMethod.GET,
  62.         extraData: { no: jwt },
  63.       });
  64.       let data = JSON.parse(res.result.toString());
  65.       return data;
  66.     } catch (error) {
  67.       throw error;
  68.     }
  69.   }
  70.  
  71.   // 获取当前时间并存入用户首选项
  72.   getLocalTimeToPreference(){
  73.     const currentDate: Date = new Date();
  74.     const currentYear: number = currentDate.getFullYear();
  75.     const currentMonth: number = currentDate.getMonth() + 1; // 注意：月份从 0 开始，需要加 1
  76.     const currentDay: number = currentDate.getDate();
  77.     const currentHour: number = currentDate.getHours();
  78.     const currentMinute: number = currentDate.getMinutes();
  79.     const currentSecond: number = currentDate.getSeconds();
  80.  
  81.     const curTime = `北京时间：${currentYear}-${currentMonth}-${currentDay} ${currentHour}:${currentMinute}:${currentSecond}`;
  82.  
  83.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  84.       preferences.put("curTime", curTime).then(_ => {
  85.         preferences.flush();
  86.       });
  87.     }).catch((err: Error) => {
  88.       console.error(err.message);
  89.     });
  90.   }
  91.  
  92.   // 获取上一次的时间--lastTime
  93.   getPreTime(){
  94.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  95.       if (!preferences.has("lastTime")) {
  96.         console.log("数据并未能保存");
  97.       } else {
  98.         preferences.get("lastTime", 'null').then((value) => {
  99.           this.last=value.toLocaleString()
  100.           // AlertDialog.show({message:`上一次访问时间：${this.last}`})
  101.           console.log("数据为:" + value);
  102.         }).catch(_ => {
  103.           console.log("读取失败");
  104.         });
  105.       }
  106.     });
  107.   }
  108.  
  109.   // 关闭应用时将lastTime置换为curTime，并将curTime替换为空值
  110.   closeAppAndUpdateTime(){
  111.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  112.       preferences.get("curTime", '').then((curTime) => {
  113.         preferences.put("lastTime", curTime);
  114.         preferences.put("curTime", '');
  115.         preferences.flush();
  116.         console.log("上一次时间已更新，当前时间已清空");
  117.       }).catch((err: Error) => {
  118.         console.error(err.message)
  119.       });
  120.     }).catch((err: Error) => {
  121.       console.error(err.message);
  122.     });
  123.   }
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130.   // todo 函数定义域
  131.   async login() {
  132.     if (this.username && this.pwd && this.allow) {
  133.       try {
  134.         const res = await this.httpUtil.request(`192.168.137.1/readers/login`, {
  135.           method: http.RequestMethod.GET,
  136.           extraData: { no: this.username, pwd: this.pwd },
  137.         });
  138.         let jsonResult = res.result.toString();
  139.         let responseObject = JSON.parse(jsonResult);
  140.         if (responseObject['code'] === 200) {
  141.           // todo 解析令牌
  142.           const data = await this.jwt(responseObject['data']);
  143.  
  144.           // todo 上下文 -- 存储令牌
  145.           AppStorage.SetOrCreate("info",data['data']['readerno'])
  146.  
  147.           // todo 是否将密码存储至本地
  148.           if (this.upload===true) {
  149.             this.uploadUserInfo()
  150.           }
  151.  
  152.           // todo 跳转
  153.           this.goTo(this.Router)
  154.  
  155.         }
  156.       } catch (error) {
  157.         console.error(error);
  158.         Prompt.showDialog({
  159.           message: "登录失败",
  160.         });
  161.       }
  162.     } else {
  163.       if (!this.username || !this.pwd) {
  164.         Prompt.showDialog({
  165.           message: "请输入用户名和密码",
  166.         });
  167.       } else if (!this.allow) {
  168.         Prompt.showDialog({
  169.           message: "请勾选允许登录选项",
  170.         });
  171.       }
  172.     }
  173.   }
  174.  
  175.  
  176.   uploadUserInfo(){
  177.     // 用户存储信息到本地，使用用户首选项
  178.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  179.       let user:{}={'username':this.username,'pwd':this.pwd}
  180.       preferences.put("userInfo",JSON.stringify(user)).then(_ => {
  181.         preferences.flush();
  182.       });
  183.     }).catch((err: Error) => {
  184.       console.error(err.message);
  185.     });
  186.   }
  187.  
  188.   getUserInfo(){
  189.     dataPreference.getPreferences(this.context, "myBookStore").then(preferences => {
  190.       preferences.get("userInfo", '').then((userInfo) => {
  191.         let user = JSON.parse(userInfo.toLocaleString())
  192.         if (user) {
  193.           this.uploadTag=true
  194.           this.username = user['username']
  195.           this.pwd = user['pwd']
  196.         }
  197.       }).catch((err: Error) => {
  198.         console.error(err.message)
  199.       });
  200.     }).catch((err: Error) => {
  201.       console.error(err.message);
  202.     });
  203.   }
  204.  
  205.  
  206.  
  207.  
  208.  
  209.   build() {
  210.       Column(){
  211.         Column() {
  212.  
  213.             Text("掌上书店")
  214.               .fontColor('#096789')
  215.               .fontSize(70)
  216.           this.displayLast("上一次访问时间："+this.last)
  217.           if (this.uploadTag===true){
  218.             this.displayLast("本地已经存储密码")
  219.           }
  220.         }.margin({ bottom: 100 })
  221.         .height('50%')
  222.         .justifyContent(FlexAlign.Center)
  223.  
  224.         Column()
  225.         {
  226.           Row()
  227.           {
  228.             // 用户名输入框
  229.             TextInput({ placeholder: this.username===''? "请输入您的用户名":this.username })
  230.               .type(InputType.Normal)
  231.               .width('80%')
  232.               .height(50)
  233.               .placeholderColor(Color.Black)
  234.               .backgroundColor('#ffd3d7d3')
  235.               .borderRadius(10)
  236.               .margin({ bottom: 10})
  237.               .onChange(val=>{
  238.                 this.username=val
  239.                 console.log(val)
  240.               })
  241.  
  242.           }
  243.  
  244.           Row()
  245.           {
  246.             // 密码输入框
  247.             TextInput({ placeholder: this.pwd===''?"请输入您的密码":this.pwd })
  248.               .type(InputType.Password)
  249.               .width('80%')
  250.               .height(50)
  251.               .placeholderColor(Color.Black)
  252.               .backgroundColor('#ffd3d7d3')
  253.               .borderRadius(10)
  254.               .onChange(val=>{
  255.                 this.pwd=val
  256.                 console.log(val)
  257.               })
  258.           }
  259.           Row(){
  260.             Row(){
  261.               Checkbox().onChange((val:boolean)=>{
  262.                 this.upload=val
  263.                 console.log('Checkbox2 change is'+val)
  264.               })
  265.               Text("将密码存储到本地")
  266.             }.width('98%')
  267.             .padding({left:30})
  268.             .height('40')
  269.           }.margin({ bottom: 40 })
  270.  
  271.           Row()
  272.           {
  273.             //登录按钮
  274.             Button("登录")
  275.               .width(120)
  276.               .height(40)
  277.               .fontColor(Color.White)
  278.               .onClick(() => {
  279.                 this.login()
  280.  
  281.               })
  282.               .backgroundColor('#ff5eb35b')
  283.               .margin({right:40})
  284.               .borderStyle(BorderStyle.Dotted)
  285.  
  286.             //  注册按钮
  287.             Button("注册")
  288.               .width(120)
  289.               .height(40)
  290.               .fontColor(Color.White)
  291.               .onClick(() => {
  292.                 router.pushUrl({
  293.                   url: "pages/Second"
  294.                 })
  295.               })
  296.               .backgroundColor('#ff5eb35b')
  297.           }
  298.           .justifyContent(FlexAlign.SpaceEvenly)
  299.         }
  300.         .width("100%")
  301.         .height("30%")
  302.  
  303.         Row(){
  304.           Checkbox().onChange((val:boolean)=>{
  305.             this.allow=val
  306.             console.log('Checkbox2 change is'+val)
  307.           })
  308.           Text("点击代表同意相关使用条例与请求")
  309.         }.width('90%')
  310.         .padding({left:30})
  311.         .height('40')
  312.  
  313.       }
  314.       .height('100%')
  315.         .width('100%')
  316.         .margin({bottom:20})
  317.         .linearGradient({
  318.           direction:GradientDirection.RightBottom,
  319.           colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
  320.         })
  321.  
  322.   }
  323.  
  324.  
  325.   @Builder displayLast(message) {
  326.     Row(){
  327.       Text(message)
  328.         .fontColor("b#ffe7eae7")
  329.     }.width("70%").
  330.     height("40")
  331.     .backgroundColor("#ffe7eae7")
  332.     .borderRadius(20)
  333.     .padding({left:10})
  334.     .margin({bottom:5})
  335.   }
  336. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/457722
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号