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

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

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

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

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

在鸿蒙项目中，单机项目只有一个项目的文件夹，端云一体化项目有前端文件夹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动作中。

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