HarmonyOS APP应用开发项目- MCA助手（Day04持续更新中~）

news2024/9/9 8:13:48

简言：

gitee地址：https://gitee.com/whltaoin_admin/money-controller-app.git
端云一体化开发在线文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/agc-harmonyos-clouddev-view-0000001700053733-V5
注：此App参照此教程进行二次修改：https://www.bilibili.com/video/BV1q5411v7o7

一、解决问题-DevEco不显示CloudProgram解决方法

重现问题

image.png

解决问题

// 打开目录：Application/.idea/modules.xml
// 添加
   <module fileurl="file://$PROJECT_DIR$/../CloudProgram/.idea/CloudProgram.iml" filepath="$PROJECT_DIR$/../CloudProgram/.idea/CloudProgram.iml" />
// 重启项目

image.png

正常效果

image.png

二、建立云数据库

创建存储区

进入到我的项目后，点击左侧的云数据库，选择存储区后点击新增
输入存储区名称后(mca)，点击确认

image.png

创建数据类型

选择上方导航中的对象类型后，点击新增，
输入对象类型名称、所需字段、索引、用户权限后点击确定

image.png

创建云函数

TODO：该步骤可省略，暂无无调用

cloudFunctions目录中创建一个名为mca-user的云函数后
创建resources目录

AGC网页下载认证凭据文件放入resources目录中
下载位置：

image.png

集成云数据库SDK

TODO：该步骤可省略，暂无无调用

地址：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-clouddb-sdk-integration-server-nodejs-0000001775071093

步骤一：
找到定制Demo包后并直接下载demo
地址：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/query-clouddb-modify-demo-0000001549461562

image.png

三、初始化云数据库及注册业务修改

TODO：注册业务：将在用户注册时将用户数据存储到云数据库中，从而关联个人信息页信息。

初始化

步骤一：建立数据库对象模型

image.png
image.png

步骤二：导出schema

image.png
image.png

注册业务实现

import InputComponent from '../components/InputComponent';
import TitleComponent from '../components/TitleComponent';
import router from '@ohos.router';
import cloud, { Database } from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
import { addMcaUser } from '../service/mcaUserService';
import { JSON } from '@kit.ArkTS';
import { mca_user } from '../model/mca_user';

import  mcaInfo  from '../../resources/rawfile/mca_1_cn.json';
import { Logger } from '@hw-agconnect/hmcore/src/main/ets/base/log/Logger';
import { TAG } from '@ohos/hypium/src/main/Constant';


@Entry
@Component
struct Login {
  // 页面未加载时调用:
  aboutToAppear(): void {

    // 登录页加载时初始化云数据库：
    this.database= cloud.database({
      zoneName:'mca',
      objectTypeInfo:mcaInfo
    })
    // 通过获取认证对象判断用户是否已经登录
    cloud.auth().getCurrentUser().then(user=>{
      if(user){
        //业务逻辑
        AppStorage.setOrCreate("user",user)
        router.replaceUrl({url:"pages/MainPage/MainPage"})
      }
    });
  }
   database:Database |null= null
  // 接收数据集
  @State mcaUser :mca_user|null = null
  @State message: string = 'Login';
  @State eMail:string = ''
  @State EMailPassword :string = '' // 邮箱密码
  @State vCode:string = "" // 验证码
  // 倒计时
  @State countDown :number = 60
  timer :number=0
  @State isRegister:boolean= false
  // 发送验证码
   sendCode(){
    // 倒计时
    this.startCountDown()
    // 生成验证码
     cloud.auth().requestVerifyCode({
       action: VerifyCodeAction.REGISTER_LOGIN,
       lang: 'zh_CN',
       sendInterval: 60,
       verifyCodeType: {
         email: this.eMail,
         kind: "email",
       }
     }).then(verifyCodeResult => {
       //验证码申请成功
       console.log(JSON.stringify(verifyCodeResult))
       // this.data = JSON.stringify(verifyCodeResult)
       AlertDialog.show({
         title: "提示",
         message: "获取验证码成功",
       })
     }).catch((error: Promise<Result>) => {
       AlertDialog.show({
         title: "提示",
         message: "获取验证码失败",
       })
       //验证码申请失败
     });
  }
  //邮箱用户登录
  loginEMail(){
    cloud.auth().signIn({
      autoCreateUser: true,
      credentialInfo: {
        kind: 'email',
        password: this.EMailPassword,
        email: this.eMail
      }
    }).then(user => {
      //登录成功
      AppStorage.setOrCreate("user",user)
      router.replaceUrl({url:"pages/MainPage/MainPage"})
    }).catch((error:Promise<Result>) => {

      //登录失败
      AlertDialog.show({
        title: "提示",
        message: "用户登录失败，请重试",
      })
    });

  }
  // 注册用户
   registerUser(){
      try{
      cloud.auth().createUser({
          "kind": "email",
          "email": this.eMail,
          "password": this.EMailPassword,
          "verifyCode": this.vCode
        }).then(async result => {


       //创建帐号成功后，默认已登录
       AlertDialog.show({
         title: "提示",
         message: "用户注册成功",
       })
        const user = result.getUser()
        // 存数据库

        const mcaUser :mca_user = new mca_user();
       mcaUser.setUuid(user.getUid())
        mcaUser.setEmail(user.getEmail())
        mcaUser.setPassword(this.EMailPassword)
        mcaUser.setAge(18)
        mcaUser.setSex(1)
        Logger.info(TAG, "upsert mca_userInfo  = " + JSON.stringify(mcaUser));
        try {
          const record = await this.database?.collection(mca_user).upsert(mcaUser);
          Logger.info(TAG, "upsert mca_user success, record  = " + record);
        } catch (err) {
          Logger.error(TAG, "upsert mca_user err------------" + JSON.stringify(err));
        }


        // 页面跳转
        AppStorage.setOrCreate("user",user)
        router.replaceUrl({url:"pages/MainPage/MainPage"})
        })


      }catch(e){
        AlertDialog.show({
          title: "提示",
          message: "用户注册失败，请重试",
        })
      }


  }

  // 开始倒计时
  startCountDown(){
  this.timer =   setInterval(()=>{
      this.countDown--
      if(this.countDown===0){
        this.countDown=60
        clearInterval(this.timer)
      }
    },1000)
  }


  build() {
      Column(){
        // title
        TitleComponent({title:"登录"})
        // login_content
        Stack({alignContent:Alignment.Top}){
          Image($r("app.media.Login_icon")).width(88).height(88).offset({y:-44}).zIndex(999)

       Column({space:10}){
            // email
          InputComponent({title:"电子邮箱",inputIcon:$r("app.media.mail_icon"),placeholder:"请输入邮箱信息",
            change:(value:string)=>{
                this.eMail=value
          }})
            // pwd
          InputComponent({title:"密码",inputIcon:$r("app.media.pwd_icon"),placeholder:"请输入密码",inputType:InputType.Password,
          change:(value:string) =>{
            this.EMailPassword = value
          }
          })
            // VCode
          if(this.isRegister){
            Column(){
              Text("验证码").width("100%").textAlign(TextAlign.Start).fontWeight(500)
                .fontSize(16).fontColor(Color.Black).margin({bottom:14})
              Row(){
                TextInput({placeholder:"请输入验证码"})


                  .layoutWeight(1)
                  .backgroundColor(Color.Transparent)
                  .border({
                    width:1,
                    color:"#ff9b9b9b"

                  }).borderRadius(10)
                  .onChange((value)=>{
                    this.vCode = value
                  })
                Button(this.countDown==60?"点击获取验证码":`${this.countDown}s`).fontSize("10").margin({left:10}).width(100).padding(0).onClick((event: ClickEvent) => {
                  if(this.countDown===60){
                    this.sendCode()
                  }else{
                    AlertDialog.show({
                      message:"正在获取验证码，请等待..."
                    })
                  }


                })

              }.width("100%").height(50)

            }
          }
            // login_btn
            Button(this.isRegister?"注册":"登录").width(228).backgroundColor("#ff09b19d").margin({top:50})
              .onClick(()=>{
                // 登录方法
                if(this.isRegister){
                  // 注册用户
                  this.registerUser()
                }else{
                  // 登录用户
                   this.loginEMail()
                }
              })
         
            // re_btn
         Row(){
           Text(this.isRegister?"去登录":"去注册").fontSize(12).onClick(()=>{
             this.isRegister= !this.isRegister
           })
           Text("|").padding({left:10,right:10})
           Text("忘记密码").fontSize(12)
         }.width("100%").layoutWeight(1).justifyContent(FlexAlign.Center)

       }.width("100%").height("100%").padding({left:14,right:14}).margin({top:44})

        }.width("90%").backgroundColor(Color.White).margin({top:44}).layoutWeight(1)
        .borderRadius(20)
      }.width("100%").height("100%").backgroundColor($r("app.color.page_Color"))
  }
}

image.png
image.png
image.png

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

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

相关文章

Educational Codeforces Round 168 (Rated for Div. 2)（A~D题题解）

Educational Codeforces Round 168 (Rated for Div. 2)（A~D题题解）

A. Strong Password 思路&#xff1a;想要最长的时间&#xff0c;那么肯定就是如果存在前后相同的字母的时候&#xff0c;在中间插入一个不同的字符 &#xff0c;如果不存在前后相同的字符&#xff0c;直接在最后插入一个和原字符串最后一个字符不同的字符 #include <bits/…
阅读更多...
等保学习干货|等保测评2.0技术中间件自查阶段，零基础入门到精通，收藏这一篇就够了

等保学习干货|等保测评2.0技术中间件自查阶段，零基础入门到精通，收藏这一篇就够了

0x01 前言 以下是根据我国网络安全体系制订的一系列保护流程进行的等级保护测评。该测评针对已有和将上线的业务服务的基础设施&#xff08;系统、数据库、中间件等&#xff09;&#xff0c;执行一系列检查以确保安全合规。本次先行分享学习等保中的技术自查阶段知识&#xff…
阅读更多...
ubuntu24.04 LTS安装BackupPC备份软件

ubuntu24.04 LTS安装BackupPC备份软件

一、安装BackupPC 默认情况下&#xff0c;BackupPC 在 ubuntu24.04 LTS 默认存储库中可用。您只需运行以下命令即可安装它&#xff1a; apt-get install backuppc -y在安装过程中&#xff0c;您将被要求选择邮件配置的类型&#xff0c;如下所示&#xff1a; 选择仅限本地&…
阅读更多...
在 VueJS 中使用 Keep-Alive 处理窗口调整事件（在使用keep-alive缓存组件时，处理多个vue页面的resize事件）

在 VueJS 中使用 Keep-Alive 处理窗口调整事件（在使用keep-alive缓存组件时，处理多个vue页面的resize事件）

前言 我们在使用 VueJS 开发复杂的单页应用程序时&#xff0c;我们经常需要管理组件的生命周期事件&#xff0c;以确保它们在特定的条件下正常工作。例如&#xff0c;当窗口大小调整时&#xff0c;我们可能需要重新绘制某些组件。这里我们详细介绍一下&#xff0c;如何在使用 …
阅读更多...
安装docker-东方通tongRDS

安装docker-东方通tongRDS

首先&#xff0c;确保你的系统已经安装了Docker。你可以在终端中运行以下命令来检查Docker是否已经安装&#xff1a; docker --version接下来&#xff0c;你需要从Docker hub上拉取东方通tongRDS的镜像。在终端中运行以下命令&#xff1a; docker pull dongfangtongrds/tongr…
阅读更多...
Unity Camera

Unity Camera

课程目标 1. 了解摄像机&#xff08;camera&#xff09;不同视角的设计与实现&#xff1b;2. 感受在不同摄像机视角下观察虚拟场景。 喜欢玩游戏或者看3D动漫的朋友可以回忆在虚拟场景中摄像头的运动变化带来的视觉感受&#xff0c;例如&#xff1a;摄像头给场景中的主角来个…
阅读更多...
创客项目秀｜基于XIAO SAMD21的多功能笔筒

创客项目秀｜基于XIAO SAMD21的多功能笔筒

作者&#xff1a;Arnov Sharma 来自&#xff1a;MIT 发表日期&#xff1a; 2024年6月17日 这个多功能笔筒项目是使用3D打印零件进行搭建的&#xff0c;在笔筒的前端添加了XIAO扩展板&#xff0c;给这个笔筒添加一个显示器&#xff0c;可以在显示器上显示许多内容&#xff0c…
阅读更多...
【Devops】CertD 完全免费、自动申请、自动部署SSL证书一站式管理工具 | 自动化HTTPS | 3个月SSL自动轮换

【Devops】CertD 完全免费、自动申请、自动部署SSL证书一站式管理工具 | 自动化HTTPS | 3个月SSL自动轮换

CertD CertD 是一个免费全自动申请和自动部署更新SSL证书的工具。 后缀D取自linux守护进程的命名风格&#xff0c;意为证书守护进程。 关键字&#xff1a;证书自动申请、证书自动更新、证书自动续期、证书自动续签 一、特性 本项目不仅支持证书申请过程自动化&#xff0c;还…
阅读更多...
P2048 [NOI2010] 超级钢琴（纪念紫题）

P2048 [NOI2010] 超级钢琴（纪念紫题）

原题 题面 具体实现讲解 首先想到用 s u m sum sum记录 a a a数组的前缀和&#xff0c;把每种和弦都试一遍&#xff0c;很明显会超时。 定义 c a l ( s , l , r ) cal(s,l,r) cal(s,l,r)代表以 s s s为左端点&#xff0c;右端点在 l l l到 r r r的范围内&#xff0c;能得到的…
阅读更多...
css:grid的使用（部分）

css:grid的使用（部分）

一&#xff1a;grid的使用&#xff08; 平分宽度 &#xff09; <template><view class""><view class"main"><view class"main-item">1</view><view class"main-item">2</view><view cl…
阅读更多...
Can ‘t connect to local MySQL server through socket ‘/tmp/mysql.sock ‘(2) “；

Can ‘t connect to local MySQL server through socket ‘/tmp/mysql.sock ‘(2) “；

Can t connect to local MySQL server through socket /tmp/mysql.sock (2) "; 目录 Can t connect to local MySQL server through socket /tmp/mysql.sock (2) "; 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到…
阅读更多...
Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 [ 项目介绍 ] [ 获取数据 ] [ 创建测试集 ]| 1/3（含分析过程）

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 [ 项目介绍 ] [ 获取数据 ] [ 创建测试集 ]| 1/3（含分析过程）

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 [ 项目介绍 ] [ 获取数据 ] [ 创建测试集 ]| 1/3&#xff08;含分析过程&#xff09; 目录 Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 [ 项目介绍 ] [ 获取数据 ] [ 创建测试集 ]| 1/3&#x…
阅读更多...
118页|2023大模型落地应用案例集

118页|2023大模型落地应用案例集

大语言模型开放平台旨在为大语言模型技术的研究和应用提供一个开放、可扩展、可协作的环境。该平台不仅为开发者提供大型语言模型、大规模数据集、模型微调工具以及大型语言模型应用开发工具等资源&#xff0c;还加速了大型语言模型的训练过程&#xff0c;促进了大型语言模型在…
阅读更多...
论文复现丨带时间窗和服务顺序的多车辆路径问题:联合优化遗传算法

论文复现丨带时间窗和服务顺序的多车辆路径问题:联合优化遗传算法

路径优化系列文章&#xff1a; 1、路径优化历史文章2、路径优化丨带时间窗和载重约束的CVRPTW问题-改进遗传算法&#xff1a;算例RC1083、路径优化丨带时间窗和载重约束的CVRPTW问题-改进和声搜索算法&#xff1a;算例RC1084、路径优化丨复现论文-网约拼车出行的乘客车辆匹配及…
阅读更多...
Linux命令行 复制模式/扩展模式 调用系统功能切换

Linux命令行 复制模式/扩展模式 调用系统功能切换

问题背景 公司软件需要从window 适配国产操作系统&#xff0c;目前使用wine方案。在我们软件有个切换屏幕模式的功能&#xff0c;需要支持用户在我们软件内&#xff0c;切换复制模式/扩展模式。 在linux 下 uos/deepin 等系统。如果要从复制模式设置为扩展模式使用命令行时&a…
阅读更多...
零基础入门转录组数据分析——机器学习算法之SVM-RFE（筛选特征基因）

零基础入门转录组数据分析——机器学习算法之SVM-RFE（筛选特征基因）

零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09; 目录 零基础入门转录组数据分析——机器学习算法之SVM-RFE&#xff08;筛选特征基因&#xff09;1. SVM-RFE基础知识2. SVM-RFE&#xff08;Rstudio&#xff09;——代码实操2. 1 数据…
阅读更多...
从零到一：用Go语言构建你的第一个Web服务

从零到一：用Go语言构建你的第一个Web服务

使用Go语言从零开始搭建一个Web服务&#xff0c;包括环境搭建、路由处理、中间件使用、JSON和表单数据处理等关键步骤&#xff0c;提供丰富的代码示例。 关注TechLead&#xff0c;复旦博士&#xff0c;分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、…
阅读更多...
【Git-驯化】一文搞懂git中rm命令的使用技巧

【Git-驯化】一文搞懂git中rm命令的使用技巧

【Git-驯化】一文搞懂git中rm命令的使用技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档关注&#xff1a;微信公…
阅读更多...
Day12--Servlet实现前后端交互（案例：学生信息管理系统登录页面）

Day12--Servlet实现前后端交互（案例：学生信息管理系统登录页面）

&#xff08;在一个完整的项目架构中&#xff0c;servlet的角色和位置&#xff09; Servlet、GenericServlet和HttpServlet三者之间的关系是Java Web开发中的一个重要概念&#xff0c;它们共同构成了基于Java的服务器端程序的基础。以下是具体分析&#xff1a; 1. Servlet接口…
阅读更多...
Windows下nmap命令及Zenmap工具的使用方法

Windows下nmap命令及Zenmap工具的使用方法

一、Nmap简介 nmap是一个网络连接端扫描软件&#xff0c;用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端&#xff0c;并且推断计算机运行哪个操作系统&#xff08;这是亦称 fingerprinting&#xff09;。它是网络管理员必用的软件之一&#xff0c;以及用以评…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023