HarmonyOS云端开发(二)

news2024/11/23 7:25:08

文章目录

  • 登录认证服务以及云数据库使用
  • 一创建登录注册页面
  • 二、开启认证服务
  • 二、创建数据表
    • 1.导出数据表
    • 2.使用表 进行增删改查
    • 3.查看云数据库


登录认证服务以及云数据库使用

云端开发不需要存储token,由提供的API统一验证,假设未登录则跳转登录页,已登录 跳转首页。


一创建登录注册页面

根据上一章节写过的测试云端可使用,并且判断未登录则跳转登录页,已登录则跳转首页的逻辑,在pages目录下创建login.ets、register.ets、index.ets
在这里插入图片描述

二、开启认证服务

在这里插入图片描述

二、创建数据表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.导出数据表

导出一个json格式,一个js格式
在这里插入图片描述
在这里插入图片描述
将导出的表 放到ets/db目录下
在这里插入图片描述

2.使用表 进行增删改查

以下为注册页面 会详细注释 看代码

// @ts-nocheck
//引入router路由跳转
import router from '@ohos.router';
//VerifyCodeAction 为集成的验证码函数
import cloud,{VerifyCodeAction} from "@hw-agconnect/cloud"
//配置数据库相关文件 将导出的数据表 引入  以下是页面的布局可以不用看 往下看
import appJSON from '../bd/app.json';
import {coupon} from '../bd/coupon'
import  {userInfo} from '../bd/userInfo'
@Entry
@Component
struct Register {
  @State message:string = '注册';
  tel:string ='';
  code:string = '';
  @State flag:boolean = true;
  @State num:number = 60;
  @State timer:any = ''; //定时器
  start(){
    this.timer = setInterval(()=>{
      this.num--;
      if(this.num==0){
        clearInterval(this.timer);
        this.flag =true;
        this.num=60;
      }
    },1000)
  }
  
  build() {
    Row() {
      Column({space:20}) {
        Image($rawfile("icon.png"))
          .width(150)
          .height(150)
          .margin({top:100,bottom:50})
        TextInput({placeholder:'手机号'})
        .onChange(val=>{
          this.tel=val;
        })
        Row({space:5}){
          TextInput({placeholder:'验证码'})
            .onChange(val=>{
              this.code=val;
            })
            .width(120)
            .height(40)
          Button(this.flag?"获取验证码":(this.num>=10?this.num:"0"+this.num)+"s后获取")
            .height(40)
            .onClick( async()=>{
              //验证手机号
              if(!(/^1[3-9]\d{9}$/.test(this.tel))){
              AlertDialog.show({
                title:"提示",
                message:"手机号格式错误",
              })
                return
              }
              //调用方法  -------------看这里
              //使用requestVerifyCode函数 看送验证码
              await cloud.auth().requestVerifyCode({
                action:VerifyCodeAction.REGISTER_LOGIN,
                lang:'zh_ch',
                sendInterval:60,
                verifyCodeType:{
                  phoneNumber:this.tel,
                  countryCode:"86",
                  kind:'phone'
                }
              })
              AlertDialog.show({
                title:"提示",
                message:"验证码发送成功,请注意查收"
              })
              //按钮设置禁用状态 开始倒计时
            this.flag = false;
              this.start()

            })
              // @ts-ignore
            .enabled(this.flag)
        }
        .width('100%')
        .width('100%')
        Button("注册")
          .width('100%')
          .height(40)
          .onClick(async()=>{
            //验证手机号和验证码
            if(!(/^1[3-9]\d{9}$/.test(this.tel))){
              AlertDialog.show({
                title:"提示",
                message:"手机号格式不对"
              })
              return false;
            }
            if(!(/^\d{6}$/.test(this.code))){
              AlertDialog.show({
                title:"提示",
                message:"验证码格式不对"
              })
              return false;
            }
            //看这里 -----------点击注册按钮 使用 createUser函数进行注册,
            //如果已经注册过了那么会返回对应的错误码,如果想重新测试在认证服务那把注册手机号删掉即可
            let result = await cloud.auth().createUser({
              kind: 'phone',
              countryCode: '86',
              phoneNumber: this.tel,
              verifyCode: this.code
            })
            //获取用户对象 此时 对于云端开发而言 已经是注册成功了 并且是可以直接登录的
            let user = result.getUser();
            let id = user.getUid();
            console.log("用户id",id);
          //关联数据库
          //用户信息余额
          //重点来了--------------------使用表来进行新增或者修改
            await cloud.database({objectTypeInfo:appJSON,zoneName:'charging'})
               //选择的userInfo表
              .collection(userInfo)
              //如果id(主键一致那么就是修改,主键不一致就是添加)
              //给新用户 添加一些余额
              .upsert({
                id,
                money:'200'
              })
          //优惠券
          //给新用户添加一些优惠券 可以是一个或者多个
            await cloud.database({objectTypeInfo:appJSON,zoneName:"charging"})
            //选择coupon表
              .collection(coupon)
              .upsert([
                {
                  id:Date.now()+'1',
                  userId:id,
                  num:'1',
                  date:Date.now().toString()
                },
               {
                  id:Date.now()+'2',
                  userId:id,
                  num:'2',
                  date:Date.now().toString()
                }
              ])
          // 跳转到应用首页
            router.replaceUrl({
              url:'pages/Index'
            })
          })
        Text('已有账号,去登录')
          .fontColor('#999999')
          .decoration({type:TextDecorationType.Underline})
          .onClick(()=>{
            router.replaceUrl({
              url:'pages/login'
            })
          })
      }
      .width('100%')
    }
    .margin(10)
  }
}

3.查看云数据库

在这里插入图片描述

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

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

相关文章

uniapp,vite整合windicss

官方文档:https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx 安装: npm i -D tailwindcss postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss initnpm i -D weapp-tailwindcss# 假如 tailwindcss 在 weap…

nginx 新建一个 PC web 站点

注意:进行实例之前必须完成nginx的源码编译。(阅读往期文章完成步骤) 1.编辑nginx的配置文件,修改内容 [rootlocalhost ~]# vim /usr/local/nginx/conf/nginx.conf 2.创建新目录/usr/local/nginx/conf.d/,编辑新文件…

JavaScript (输出,语句,语法)

目录 JavaScript 输出 使用window.alert() 写入警示框 使用document.write() 写入HTMl输入 使用 innerHTML 写入html元素 使用console.log()写入 浏览器控制台 JavaScript 语句 实例 语句组成 分号 关键字 JavaScript 语法 JavaScript 标识符 …

【Hadoop|MapReduce篇】MapReduce概述

1. MapReduce定义 MapReduce是一个分布式运算程序的编程框架,是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序,并发运行在一个Hadoop集群上。 2. Map…

项目——负载均衡OJ

项目要实现的一个整体的功能: 编写一个在线OJ网络服务器,只实现类似 leetcode 的题目列表在线编程功能 项目宏观结构: Oj服务器在收到提交的代码时,把代码负载均衡的选择发送给其他几个编译与运行服务器去编译运行代码,判断代码的编译运行结…

springboot+vue+mybatis计算机毕业设计气象数据分析与可视化系统+PPT+论文+讲解+售后

随着互联网技术不断地发展,网络与大数据成为了人们生活的一部分,而气象数据分析与可视化系统 作为网上应用的一个全新的体现,由于其特有的便捷性,已经被人们所接受。目前主流的气象数据分析与可视化系统 服务不仅不明确并且管理…

滑动窗口系列(同向双指针)/9.7

新的解题思路 一、三数之和的多种可能 给定一个整数数组 arr &#xff0c;以及一个整数 target 作为目标值&#xff0c;返回满足 i < j < k 且 arr[i] arr[j] arr[k] target 的元组 i, j, k 的数量。 由于结果会非常大&#xff0c;请返回 109 7 的模。 输入&…

AMEYA360:村田量产用于汽车市场的高可靠性0603M铜电极负温度系数NTC热敏电阻

株式会社村田制作所开发了0603M尺寸(0.60.30.3mm)铜电极负温度系数(NTC)热敏电阻&#xff0c;型号分别是“NCU03XH103F6SRL”和“NCU03XH103F60RL”&#xff0c;该新品扩充了NCU系列的产品尺寸阵容&#xff0c;满足了汽车市场应用中电路板的高密度化和小型化、以及对电子部件的…

AF路由模式组网部署

实验拓扑 防火墙基本配置 接口配置 eth1 eth2 eth3 路由配置 地址转换配置 放通策略 1. 出口申请了主电信、备联通两条外网线路&#xff08;均为 50M 带宽&#xff09;。 2. 内网有 web 服务器linux 172.16.3.100运行 http 服务&#xff0c;内外网用户通过 出口路由器…

Kubernetes 1.25 containerd 环境部署 SuperMap iManager

超图官网目提供的Kubernetes 版本为 1.20 版本&#xff0c;容器运行时为 docker 本次部署使用已有的 Kubernetes 1.25 版本集群&#xff0c;容器运行时为 containerd Kubernetes &#xff0c;containerd 部署请自行了解&#xff0c;本次不做介绍&#xff0c;下面介绍在此环境上…

MATLAB绘图基础5:MATLAB数据导入

参考书&#xff1a;《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 5.MATLAB数据导入 5.1 从CSV文件读取数据 C S V {\rm CSV} CSV文件是一种纯文本文件&#xff0c;文件中的数据以逗号为分隔符进行字段分隔&#xff0c;每一行数据代表一条记录&#xff0c;每…

通信工程学习:什么是AB地址总线、DB数据总线、CD控制总线

AB地址总线、DB数据总线、CD控制总线 在计算机体系结构中&#xff0c;总线&#xff08;Bus&#xff09;是一种用于在计算机内部各个组件之间传输信息的物理通道。其中&#xff0c;AB地址总线、DB数据总线和CD控制总线是计算机总线系统中非常重要的三个组成部分&#xff0c;它们…

机器学习-神经网络:循环神经网络(RNN)详解

引言 在当今人工智能(AI)和深度学习(DL)领域,循环神经网络(RNN)作为一种专门处理序列数据的模型,具有不可忽视的重要性。RNN 的设计目标是模拟和处理序列中的时间依赖关系,使其成为许多应用场景的理想选择,如自然语言处理(NLP)、时间序列预测和语音识别等。它不仅…

乐凡北斗车载终端 | 车载终端功能是什么?

北斗车载终端即北斗卫星监控系统主机&#xff0c;主要是通过北斗卫星实现定位和导航&#xff1b;并通过传输网络与监控中心通信&#xff0c;由前端设备、传输网络、监控中心构成北斗卫星定位监控系统&#xff0c;实现定位跟踪及智能功能, 终端还可内置8Mbit的Flash储存器&#…

分享一个基于uniapp科技馆服务微信小程序 博物馆管理小程序(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

Java stream使用与执行原理

stream简介 Stream: A sequence of elements supporting sequential and parallel aggregate operations stream为sequential即单线程串行操作&#xff0c;parallelStream支持并行操作&#xff0c;本文只讨论sequential的stream。 stream常用操作 Datastatic class Course {pr…

【软件工程】第二讲软件过程

【软件工程】第二讲软件过程 文章目录 【软件工程】第二讲软件过程1. 软件过程概述1.1 软件工程的金三角1.2 软件过程的定义1.3 软件过程的组成 2. 软件生命周期模型2.1 瀑布模型2.2 增量模型2.3 演化模型 3. 统一软件过程RUP3.1 RUP最佳实践3.2 统一软件过程RUP 4. 敏捷过程4.…

Qt-常用控件(2)-按钮类和显示类

​ 1. QPushButton 使用 QPushButton 表示一个按钮.这也是当前我们最熟悉的一个控件了 QPushButton 继承自 QAbstractButton.这个类是一个抽象类.是其他按钮的父类 在 Qt Designer中也能够看到这⾥的继承关系 QAbstractButton 中,和 QPushButton 相关性较⼤的属性 属性说明t…

触想全新Z系列工控机扩展IIoT应用潜能

8月31日&#xff0c;触想重磅推出全新Z系列高性能、扩展型工控机——TPC05/06/07-WIPC&#xff0c;提供标准版/双卡槽/四卡槽3款机型选择。 作为边缘计算、机器视觉、AI智能和工业应用的理想机型&#xff0c;Z系列工控机支持Intel第12/13/14代Core™ i3/i5/i7/i9处理器&#xf…

git如何灵活切换本地账号对应远程github的两个账号

git如何灵活切换本地账号对应远程github的两个账号 问题&#xff1a; 有时候我们会同时维护两个github的账号里面的仓库内容&#xff0c;这时候本地git需要频繁的切换ssh&#xff0c;以方便灵活的与两个账号的仓库可以通信。这篇日记将阐述我是怎么解决这个问题的。1. 第一个账…