鸿蒙项目云捐助第十六讲云捐助使用云数据库实现登录注册

ops/2024/12/23 10:24:46/

鸿蒙项目云捐助第十六讲云捐助使用云数据库实现登录注册

前面介绍了云函数云数据库的基本使用方法,这里结合鸿蒙云捐助之前的页面实现进行云数据库的登录注册逻辑实现。

如果之前创建的不是端云一体化的项目,这里需要进行单机项目向端云一体化项目进行移植。

一、单机项目复制到端云一体化项目中

鸿蒙项目中,单机项目只有一个项目的文件夹,端云一体化项目有前端文件夹Application和后端文件夹CloudProgram。这里首先需要把单机项目中resources资源目录下media文件夹中的图片资源复制到端云一体化项目中,遇到资源冲突时选择overrite覆盖即可,如下图所示的资源冲突界面。

除了图片资源以外,还有一些中文字符资源存放在resources目录下的zh-CN的文件夹中string.json文件中,这里也把文件中一些特殊的文本资源拷贝到端云一体化项目中,如下图所示。

对于页面来说,这里先拷贝start.ets,login.ets和register.ets页面到端云一体化项目中,实现登录和注册的基本逻辑。如下图所示。

拷贝后,修改端云一体化项目中的main_pages.json文件,保证页面的显示。如下图所示。

然后再修改端云一体化项中的Entry_ability.ets文件,设置应用在模拟器中启动的第一个页面。如下图所示。

把测试云函数和云数据库的组件MyComponent中的头文件拷贝到login.ets的登录界面中,如下图所示。

再把MyComponent测试组件中关于云数据库操作的部分拷入到login.ets组件的“登录”按钮onClick方法中,如下图所示。

这里执行后将会查询华为云数据库中的所有数据,执行结果如下图所示。

这里把collection(myuser).query()方法后面加上条件equalTo方法,这里既比较用户名,也比较密码,如果能够有返回结果就进行首页的跳转,代码如下图所示。

这里通过把查询方法做一下修改,在database.collection(myuser)的query()方法后跟上equalTo("username",this.username)来比较用户输入的用户名与数据库中的用户名做比对,再通过equalTo("password",this.password)来比较用户输入的密码与数据库中的密码做比对,最后通过get()方法取出结果。如果获取的结果result其长度length()>0就表示有数据结果,这时证明数据库中有相关的记录。这时就进行页面的跳转,如果没有记录,这里通过AlertDialog.show鸿蒙的信息对话框显示错误信息。

这样就使用云数据库实现登陆功能的实现。

再回到register.ets中进行注册功能的实现,注册功能也是调用database.collection(myuser)的方法,这里调用的是upsert()方法用于向华为云数据库表增加数据。代码如下。

代码中配置数据库连接后,实现化一个myuser对象,并且对这个对象通过setUsername进行用户名赋值,通过sePassword进行密码赋值,通过setSex进行性别的赋值。赋值后通过database.colletion(myuser).upsert方法进行数据添加,把实例化的myuser对象做为参数传递。

这样也实现了注册的功能,但是这个功能有个bug,就是upsert方法既可以做更新数据,也可以做添加数据。这样之前创建一个admin的用户,原始密码是123456,通过注册功能,密码可能变成其他的值,如下图所示。

这里可以在注册之前,先通过数据库查询是否有这个用户,如果有就得提示用户“用户名重复,不能注册”,只有在用户表中没有这个用户名的才可以进行注册。查询用户有无的方法也可以在query()方法后面加上 equalTo的方法。代码如下图所示。

这时通过在database.collection(myuser)的query()方法后跟上equalTo("username",this.username)来比较用户输入的用户名与数据库中的用户名做比对,然后再get出现来这个数据,如果查询结果用户存在,取出的数据打印结果如下图所示。

这里就会显示数据库中此用户的输出结果。如果没有这个用户,取出数据的打印结果如下图所示。

这里没有数据返回的结果为空数组。通过判断返回数据的数组长度即可得到当前用户是否存在于数据库中的事实。代码如下图所示。

这里把数据库查询结果的result值的长度进行判断,如果为0则数据库中没有这个用户名,这里就可以执行upsert()方法添加用户数据,然后再跳转到login.ets的页面,如果数据库查询结果的result值的长度不等于0,那么数据库中一定有当前用户的记录,使用鸿蒙消息框AlertDialog显示“用户名重复,请重新输入用户名”的错误信息。

这里还存在一个小bug, 但存在用户名时可以把当前用户名输入框的内容清空,当前密码框的输入内容也清空,这里可以通过TextInput输入框的value值来控制。

使用this.username清空用户名输入框的值代码如下图所示。

使用this.password清空用户名输入框的值代码如下图所示。

华为云数据库myuser表中,不光有用户名username和密码password,还有性别sex,这里还需要性别sex单选钮的状态恢复,当没有选择性别时,这里性别男没有被选择,性别女也不需要被选择,因此需要两个boolean变量控制两个单选框男和女的选择,这里先定义两个变量mycheck1和mycheck2,如下图所示。

设置变量后,在两个radio组件的checked属性上进行控制,由这两个变量分别控制,代码如下。

这里第一个radio的单选框checked属性由this.mycheck1控制,点击时变成true,表示选中状态,第二个radio单选框checked属性由this.mycheck2控制,点击时变成true,表示第二个选中状态,在数据库中如果存在用户名时,则把mycheck1,mycheck2还有username和password都初始化成最初的状态。代码如下图所示。

这里把mycheck1,mycheck2还有username和password都初始化成最初的状态都放在用户名重复的错误信息提示框的“确定”按钮的点击事件action动作中。

这样就实现了使用华为云数据库进行鸿蒙云捐助项目登录和注册的功能。后续会继续使用华为云技术处理云捐助项目中其他模块的功能,欢迎关注。


http://www.ppmy.cn/ops/144284.html

相关文章

Vue3之Vite介绍

一、Vite概述 Vite是一个由Vue.js的作者尤雨溪开发的新一代前端构建工具。它的主要特点包括极快的开发和构建速度、按需加载、即时热模块替换(HMR)、丰富的插件生态系统等。Vite旨在通过利用现代浏览器对ES Modules的原生支持,提供比传统打包…

Kibana8.17.0在mac上的安装

1、Kibana是什么 Kibana是与elasticsearch配套使用的数据分析与可视化工具,通过Kibana可以轻松与es中存储的数据进行高效的交互,包括数据写入、检索、删除等操作,并可以通过编写部分代码将数据做成各种报表,从而进行非常直观的统…

探索 CI/CD 工具的力量

CI/CD 工具是什么? CI/CD 工具是开发者的“生产力加速器”。它通过自动化代码构建、测试、部署等流程,消除了繁琐的手动操作,确保开发和运维的无缝衔接。借助这些工具,开发者不仅能够更快地发布产品,还能更早发现问题…

CMakeLists.txt 常用语法详解

CMake 是一个跨平台的开源构建系统,广泛应用于C项目中。CMake通过CMakeLists.txt文件来配置项目的构建过程。本文将介绍CMakeLists.txt的常用语法,帮助你快速上手并优化你的项目构建流程。 简介 CMakeLists.txt 是CMake的配置文件,用于定义…

如何在 Mechanical LS-DYNA 中设置自适应实体到 SPH 模型

总结 在这篇博文中,介绍了 LS-DYNA 功能的“Adaptive Solid to SPH”在 Ansys Mechanical 中的使用。解释了 SPH 公式与经典实体元素相结合的使用,并通过一个简单的示例开发了设置及其主要参数。 什么是 SPH? 平滑粒子流体动力学 &#xff…

【快速上手Docker 简单配置方法】

Docker 是一种容器化平台,它能够将应用程序和其依赖的环境打包在一个容器中,实现应用程序在不同环境中的移植性和可重复性。 Docker 的基本概念包括以下几个部分: 镜像(Image):镜像是一个只读的文件系统&a…

shiny数字输入框

在 Shiny 应用中,可以使用 numericInput 函数来创建一个数字输入框。numericInput 函数允许用户输入一个数值,并提供了多种选项来定制输入框的外观和行为。 在 Shiny 应用中使用 numericInput? 创建一个新的 Shiny 应用文件夹,并…

Unity中通过代码设置材质HDR颜色的方法参考

在Unity中,如果一个材质的颜色是HDR的颜色,此时要使用代码来设置HDR颜色的效果,应该使用Material.SetVector,而不是Material.SetColor,因为使用Material.Color设置颜色时,rgb的值无法突破1,但是…