鸿蒙【云端一体化】

开发云函数调用云函数

开发云函数

新建项目和应用，开通云函数服务(AGC)

开通云函数服务

使用端云一体化模板创建应用 (DevEco Studio)

新建云函数(DevEcoStudio) 】

编写云函数代码(DevEco Studio)

部署云函数(DevEco Studio)

设置和测试(AGC)

端侧调用云函数

添加依赖

初始化AGConnect

ArkTS 界面开发

ArkTS 调用云函数

云函数，要在真机大概模拟器才气用

云函数开发细节

传参问题

端侧输入姓名，云测根据传来的参数，进行处理，告诉端侧显示不同的欢迎词
端侧
云测
我们要知道端侧传过来什么，就要知道event对象里有什么
查文档

为了步伐结实，我们可以把先判定有没有body，没有怎么处理，大概捕获异常
环境变量

如果我有一些设置项，那么他们容易改变，那我不应该把它写死在步伐代码之中，而是把这些设置项呢，给他以环境变量的方式提供
如许就能保证设置项将来改动了，代码不用动
env系统提供的和我们将来可以自界说环境变量

你可以点击这个新增变量来输入变量名变量值
一定要点击保存它才气生效啊
云函数如果它重新部署的话
那么这个上次设置的环境变量会被清空
所以呢我们先去改动一下云函数的代码，把它重新部署之后，然后咱们回过头来再去设置这个环境变量好

流量管理

负载均衡

云函数的一个利益就是它是按量计费，如果你对这个原函数啊并没有使用，那它是不收费的
云函数运行之前，它会把它部署到一个虚拟机实例上
我已经有一段时间没有去调用我的hello，他就把我谁人实例销毁了这个时间是不计费的
那将来我对这个原函数一旦要产生调用，它才会动态的创建一个实例，并且把原函数部署上去，这时间才会产生费用啊
如果这个并发量比较大，那云函数这边它是如何去分配，请求到这每个实例的
这就涉及到了负载均衡

重试

云函数的调用是有可能超时的

那么如果你不希望这个函数执行一次就失败，你还想救一下它
我们可以通过流量管理中有一个器重的功能，在函数超时失败之后呢，可以重新发起一次对云函数的调用，如果这次调用能成功，那我们就不用返回失败的信息，还是可以返回成功的信息啊

重试功能呢其实它也分了三种策略
第一种重策略叫做zero
它的意思呢就是说一旦函数发现了它调用失败，那我就立刻发起器重，它中间不会等待
第二种从事策略叫做constant
当你的函数调用失败了之后，他不会说立刻去发起这个重试，他要隔断两秒之后再发起重试
第三种从策略呢叫做jittered
它其实跟我们前面第二种啊比较像,
都是在每次重试之间会有一个时间隔断,不外它的时间隔断不像我们constant,它的时间隔断是一个常量的时间值,它是一个变化的时间值
每次这个时间隔断是以指数方式增长的啊
zero

constant

jittered

熔断

就跟我们一样平常生存中的保险丝的作用有点像,保险丝呢它在大电流来了以后,保险丝是不是就烧断了
流量管理中的熔断,它的目的也是类似的,比如说我的云函数，它的调用很多次都出错了，那我继续提供原函数服务已经没有意义了
这时间呢我就接纳熔断，熔断一旦发生，那么原函数呢就暂停对外的服务了，也就是这个原函数不可用了，
但是原函数不可用是避免了更大
比如说像雪崩事故的发生好
这是熔断的目的啊

它的设置项其实就这么三项
刚开始这个开关没有开的时间，那函数呢在任意时候都可以对外提供服务
如果我们把这个熔断开关打开，那它就会在满足了某些条件之后触发熔断，一旦函数熔断发生，那么这个函数就不能对外提供服务了

认证服务

开通认证服务

使用认证组件进行认证

第一步登录页面

第二步，登录成功后

至此整个登录流程跑通了

认证流程(1) -上报认证数据

认证凭据，根据你的认证方式不同而不同
比如说呢我们之前用的是手机认证
那手机验证的话，当我点击登录按钮之后，是不是让你输入手机号和验证码，那这个手机号和验证码
就是我们手机认证方式下它的认证凭据
那如果你接纳的是邮箱认证呢
那这个认证据就是你的邮件地址和
邮件里收到的认证码

第一次使用认证服务那服务器这边是不是应该还没有这个用户信息
服务器就创建你的服务信息

认证流程(2) -获取用户信息

自行实现登录需求操纵

3. @Entry
4. @Component
5. struct MyLoginCustom {
7.   build() {
8.     Row() {
9.       Column({ space: 10 }) {
10.         Text('登录')
11.           .fontSize(40)
12.           .fontWeight(FontWeight.Bold)
13.         Divider()
14.         TextInput({ placeholder: '请输入手机号' })
15.           .width('80%')
16.           .type(InputType.Number)
18.         Row({ space: 10 }) {
19.           TextInput({ placeholder: '请输入验证码' })
20.             .width('55%')
21.             .type(InputType.Number)
22.           Button('获取验证码')
23.         }
24.         .width('80%')
25.         .justifyContent(FlexAlign.SpaceBetween)
27.         Button('登录')
29.       }
30.       .width('100%')
31.     }
32.     .height('100%')
33.   }
34. }

复制代码

自行实现登录倒计时开端实现、

3. @Entry
4. @Component
5. struct MyLoginCustom {
6.   @State countDown: number = 10
7.   intervalId: number = 0
8.   @State verifyCodeButtonText: string = '获取验证码'
10.   build() {
11.     Row() {
12.       Column({ space: 10 }) {
13.         Text('登录')
14.           .fontSize(40)
15.           .fontWeight(FontWeight.Bold)
16.         Divider()
17.         TextInput({ placeholder: '请输入手机号' })
18.           .width('80%')
19.           .type(InputType.Number)
21.         Row({ space: 10 }) {
22.           TextInput({ placeholder: '请输入验证码' })
23.             .width('55%')
24.             .type(InputType.Number)
25.           Button(this.verifyCodeButtonText)
26.             .onClick(()=> {
27.               this.intervalId = setInterval(() => {
28.                 this.verifyCodeButtonText = `${this.countDown} s`
29.                 if(this.countDown<0){
30.                   clearInterval(this.intervalId)
31.                   this.countDown = 10
32.                   this.intervalId = 0
33.                   this.verifyCodeButtonText = '获取验证码'
34.                   return
35.                 }
36.                 this.countDown--
37.               },1000)
38.             })
39.         }
40.         .width('80%')
41.         .justifyContent(FlexAlign.SpaceBetween)
43.         Button('登录')
45.       }
46.       .width('100%')
47.     }
48.     .height('100%')
49.   }
50. }

复制代码

自行实现登录倒计时细节调解

3. @Entry
4. @Component
5. struct MyLoginCustom {
6.   @State countDown: number = 10
7.   intervalId: number = 0
8.   @State verifyCodeButtonText: string = '获取验证码'
9.   @State verifyCodeButtonEnable: boolean = true
11.   build() {
12.     Row() {
13.       Column({ space: 10 }) {
14.         Text('登录')
15.           .fontSize(40)
16.           .fontWeight(FontWeight.Bold)
17.         Divider()
18.         TextInput({ placeholder: '请输入手机号' })
19.           .width('80%')
20.           .type(InputType.Number)
22.         Row({ space: 10 }) {
23.           TextInput({ placeholder: '请输入验证码' })
24.             .width('55%')
25.             .type(InputType.Number)
26.           Button(this.verifyCodeButtonText)
27.             .enabled(this.verifyCodeButtonEnable)  // 当点击了，之后按钮不可用
28.             .onClick(()=> {
29.               this.verifyCodeButtonText = `${this.countDown} s`
30.               this.countDown--
31.               this.verifyCodeButtonEnable = false
32.               this.intervalId = setInterval(() => {
33.                 this.verifyCodeButtonText = `${this
34.                 if(this.countDown<0){
35.                   clearInterval(this.intervalId)
36.                   this.countDown = 10
37.                   this.intervalId = 0
38.                   this.verifyCodeButtonText = '获取验证码'
39.                   this.verifyCodeButtonEnable = true  // 倒计时结束之后就可用了
40.                   return
41.                 }
42.                 this.countDown--
43.               },1000)
44.             })
45.         }
46.         .width('80%')
47.         .justifyContent(FlexAlign.SpaceBetween)
49.         Button('登录')
51.       }
52.       .width('100%')
53.     }
54.     .height('100%')
55.   }
56. }

复制代码

封装成函数

3. @Entry
4. @Component
5. struct MyLoginCustom {
6.   @State countDown: number = 10
7.   intervalId: number = 0
8.   @State verifyCodeButtonText: string = '获取验证码'
9.   @State verifyCodeButtonEnable: boolean = true
11.   waiting() {
12.     this.verifyCodeButtonText = `${this.countDown} s`
13.        this.countDown--
14.        this.verifyCodeButtonEnable = false
15.        this.intervalId = setInterval(() => {
16.          this.verifyCodeButtonText = `${this
17.          if(this.countDown<0){
18.            clearInterval(this.intervalId)
19.            this.countDown = 10
20.            this.intervalId = 0
21.            this.verifyCodeButtonText = '获取验证码'
22.            this.verifyCodeButtonEnable = true  // 倒计时结束之后就可用了
23.            return
24.          }
25.          this.countDown--
26.        },1000)
27.   }
29.   build() {
30.     Row() {
31.       Column({ space: 10 }) {
32.         Text('登录')
33.           .fontSize(40)
34.           .fontWeight(FontWeight.Bold)
35.         Divider()
36.         TextInput({ placeholder: '请输入手机号' })
37.           .width('80%')
38.           .type(InputType.Number)
40.         Row({ space: 10 }) {
41.           TextInput({ placeholder: '请输入验证码' })
42.             .width('55%')
43.             .type(InputType.Number)
44.           Button(this.verifyCodeButtonText)
45.             .enabled(this.verifyCodeButtonEnable)  // 当点击了，之后按钮不可用
46.             .onClick(()=> {
47.               this.waiting()
48.             })
49.         }
50.         .width('80%')
51.         .justifyContent(FlexAlign.SpaceBetween)
53.         Button('登录')
55.       }
56.       .width('100%')
57.     }
58.     .height('100%')
59.   }
60. }

复制代码

自行实现登录发送验证码

1. import cloud, { VerifyCodeAction } from '@hw-agconnect/cloud'
2. import hilog from '@ohos.hilog'
3. import router from '@ohos.router'
5. @Entry
6. @Component
7. struct MyLoginCustom {
8.   @State countDown: number = 10
9.   intervalId: number = 0
10.   @State verifyCodeButtonText: string = '获取验证码'
11.   @State verifyCodeButtonEnable: boolean = true
12.   @State phoneNumber: string = ''
14.   waiting() {
15.     this.verifyCodeButtonText = `${this.countDown} s`
16.        this.countDown--
17.        this.verifyCodeButtonEnable = false
18.        this.intervalId = setInterval(() => {
19.          this.verifyCodeButtonText = `${this
20.          if(this.countDown<0){
21.            clearInterval(this.intervalId)
22.            this.countDown = 10
23.            this.intervalId = 0
24.            this.verifyCodeButtonText = '获取验证码'
25.            this.verifyCodeButtonEnable = true  // 倒计时结束之后就可用了
26.            return
27.          }
28.          this.countDown--
29.        },1000)
30.   }
32.   build() {
33.     Row() {
34.       Column({ space: 10 }) {
35.         Text('登录')
36.           .fontSize(40)
37.           .fontWeight(FontWeight.Bold)
38.         Divider()
39.         TextInput({ placeholder: '请输入手机号' })
40.           .width('80%')
41.           .type(InputType.Number)
43.         Row({ space: 10 }) {
44.           TextInput({ placeholder: '请输入验证码' })
45.             .width('55%')
46.             .type(InputType.Number)
47.             .onChange(value => {
48.               this.phoneNumber = value
49.               })
50.           Button(this.verifyCodeButtonText)
51.             .enabled(this.verifyCodeButtonEnable)  // 当点击了，之后按钮不可用
52.             .onClick(async ()=> {
53.               this.waiting()
54.               try {
55.                  await cloud.auth().requestVerifyCode({
56.                    verifyCodeType: {
57.                      kind: 'phone',
58.                      phoneNumber: this.phoneNumber,
59.                      countryCode: '86'
60.                    },
61.                    action: VerifyCodeAction.REGISTER_LOGIN,
62.                    lang: 'zh_CN',
63.                    sendInterval: 10
64.                  })
65.                  hilog.info(0, 'VerifyCode', 'Success')
66.                } catch (e) {
67.                  // 弹窗提示错误
68.                  AlertDialog.show({ title: '错误', message: '验证码发送失败' })
70.                  hilog.error(0, 'VerifyCode', JSON.stringify(e))
71.                }
72.             })
73.         }
74.         .width('80%')
75.         .justifyContent(FlexAlign.SpaceBetween)
77.         Button('登录')
79.       }
80.       .width('100%')
81.     }
82.     .height('100%')
83.   }
84. }

复制代码

自行实现登录登录

1. import cloud, { VerifyCodeAction } from '@hw-agconnect/cloud'
2. import hilog from '@ohos.hilog'
3. import router from '@ohos.router'
5. @Entry
6. @Component
7. struct MyLoginCustom {
8.   @State countDown: number = 10
9.   intervalId: number = 0
10.   @State verifyCodeButtonText: string = '获取验证码'
11.   @State verifyCodeButtonEnable: boolean = true
12.   @State phoneNumber: string = ''
13.   @State verifyCode: string = ''
15.   waiting() {
16.     this.verifyCodeButtonText = `${this.countDown} s`
17.        this.countDown--
18.        this.verifyCodeButtonEnable = false
19.        this.intervalId = setInterval(() => {
20.          this.verifyCodeButtonText = `${this
21.          if(this.countDown<0){
22.            clearInterval(this.intervalId)
23.            this.countDown = 10
24.            this.intervalId = 0
25.            this.verifyCodeButtonText = '获取验证码'
26.            this.verifyCodeButtonEnable = true  // 倒计时结束之后就可用了
27.            return
28.          }
29.          this.countDown--
30.        },1000)
31.   }
33.   build() {
34.     Row() {
35.       Column({ space: 10 }) {
36.         Text('登录')
37.           .fontSize(40)
38.           .fontWeight(FontWeight.Bold)
39.         Divider()
40.         TextInput({ placeholder: '请输入手机号' })
41.           .width('80%')
42.           .type(InputType.Number)
44.         Row({ space: 10 }) {
45.           TextInput({ placeholder: '请输入验证码' })
46.             .width('55%')
47.             .type(InputType.Number)
48.             .onChange(value => {
49.               this.phoneNumber = value
50.               })
51.           Button(this.verifyCodeButtonText)
52.             .enabled(this.verifyCodeButtonEnable)  // 当点击了，之后按钮不可用
53.             .onClick(async ()=> {
54.               this.waiting()
55.               try {
56.                  await cloud.auth().requestVerifyCode({
57.                    verifyCodeType: {
58.                      kind: 'phone',
59.                      phoneNumber: this.phoneNumber,
60.                      countryCode: '86'
61.                    },
62.                    action: VerifyCodeAction.REGISTER_LOGIN,
63.                    lang: 'zh_CN',
64.                    sendInterval: 10
65.                  })
66.                  hilog.info(0, 'VerifyCode', 'Success')
67.                } catch (e) {
68.                  // 弹窗提示错误
69.                  AlertDialog.show({ title: '错误', message: '验证码发送失败' })
71.                  hilog.error(0, 'VerifyCode', JSON.stringify(e))
72.                }
73.             })
74.         }
75.         .width('80%')
76.         .justifyContent(FlexAlign.SpaceBetween)
78.         Button('登录')
79.          .onClick(async ()=> {
80.               try {
81.                   const result = await cloud.auth().signIn({
82.                   credentialInfo: {
83.                     kind: 'phone',
84.                     countryCode: '86',
85.                     phoneNumber: this.phoneNumber,
86.                     verifyCode: this.verifyCode
87.                   }
88.                 })
89.                 const user = result.getUser()
90.                 hilog.info(0, 'Login', 'Success')
91.                 router.replaceUrl({ url: 'pages/MyWelcome' })  // 跳转到登录页
92.                } catch (e) {
93.                  // 弹窗提示错误
94.                  AlertDialog.show({ title: '错误', message: '验证码发送失败' })
96.                  hilog.error(0, 'VerifyCode', JSON.stringify(e))
97.                }
98.             })
100.       }
101.       .width('100%')
102.     }
103.     .height('100%')
104.   }
105. }

复制代码

自行实现登录登录细节调解

检查用户输入的是否是手机号

2. import cloud, { VerifyCodeAction } from '@hw-agconnect/cloud'
3. import hilog from '@ohos.hilog'
4. import router from '@ohos.router'
5. @Entry
6. @Component
7. struct MyLoginCustom {
8.   @State countDown: number = 10
9.   intervalId: number = 0
10.   @State verifyCodeButtonText: string = '获取验证码'
11.   @State verifyCodeButtonEnable: boolean = true
12.   @State phoneNumber: string = ''
13.   @State verifyCode: string = ''
15.   waiting() {
16.     this.verifyCodeButtonText = `${this.countDown} s`
17.        this.countDown--
18.        this.verifyCodeButtonEnable = false
19.        this.intervalId = setInterval(() => {
20.          this.verifyCodeButtonText = `${this
21.          if(this.countDown<0){
22.            clearInterval(this.intervalId)
23.            this.countDown = 10
24.            this.intervalId = 0
25.            this.verifyCodeButtonText = '获取验证码'
26.            this.verifyCodeButtonEnable = true  // 倒计时结束之后就可用了
27.            return
28.          }
29.          this.countDown--
30.        },1000)
31.   }
33.     async login() {
34.     try {
35.       const result = await cloud.auth().signIn({
36.         credentialInfo: {
37.           kind: 'phone',
38.           countryCode: '86',
39.           phoneNumber: this.phoneNumber,
40.           verifyCode: this.verifyCode
41.         }
42.       })
43.       const user = result.getUser()
44.       AppStorage.SetOrCreate('user', user) // 存
45.       hilog.info(0, 'Login', 'Success')
46.       router.replaceUrl({ url: this.mainPage })
47.     } catch (e) {
48.       hilog.error(0, 'Login', JSON.stringify(e))
49.       AlertDialog.show({ title: '错误', message: `登录失败 ${JSON.stringify(e)}` })
50.     }
51.   }
53.   async sending() {
54.     try {
55.       await cloud.auth().requestVerifyCode({
56.         verifyCodeType: {
57.           kind: 'phone',
58.           phoneNumber: this.phoneNumber,
59.           countryCode: '86'
60.         },
61.         action: VerifyCodeAction.REGISTER_LOGIN,
62.         lang: 'zh_CN',
63.         sendInterval: 10
64.       })
65.       hilog.info(0, 'VerifyCode', 'Success')
66.     } catch (e) {
67.       AlertDialog.show({ title: '错误', message: '验证码发送失败' })
68.       hilog.error(0, 'VerifyCode', JSON.stringify(e))
69.     }
70.   }
72.   build() {
73.     Row() {
74.       Column({ space: 10 }) {
75.         Text('登录')
76.           .fontSize(40)
77.           .fontWeight(FontWeight.Bold)
78.         Divider()
79.         TextInput({ placeholder: '请输入手机号' })
80.           .width('80%')
81.           .type(InputType.Number)
83.         Row({ space: 10 }) {
84.           TextInput({ placeholder: '请输入验证码' })
85.             .width('55%')
86.             .type(InputType.Number)
87.             .onChange(value => {
88.               this.phoneNumber = value
89.               })
90.           Button(this.verifyCodeButtonText)
91.             .enabled(this.verifyCodeButtonEnable)  // 当点击了，之后按钮不可用
92.             .onClick(async ()=> {
93.               this.waiting()
94.               this.sending()
95.               
96.             })
97.         }
98.         .width('80%')
99.         .justifyContent(FlexAlign.SpaceBetween)
101.         Button('登录')
102.         // 判断是否是合法的手机号，验证码
103.         .enabled(this.phoneNumber.length === 11 && this.verifyCode.length === 6)
104.          .onClick(async ()=> {
105.               this.login()
106.             })
108.       }
109.       .width('100%')
110.     }
111.     .height('100%')
112.   }
113. }

复制代码

个人设置页-登出

个人设置页修改昵称和头像

不用户信息存起来

取出头像信息

云存储

上传头像

开通云存储服务

图片缓存问题

工程模式

进入工程模式

用户授权

想使用云存储必要下面三步
1、开通云存储服务
2、更新项目的一个AGC的设置文件
3、用户授权，允许读取媒体文件（前面为什么没有，授权呢？因为我们使用的是端云一体化模板，设置都写好了）
下面我们就看看，模板帮我们写了那些设置

上传进度

问题4:上传进度实现
1.上传状态变量
2…上传进度文字变量、对应的Text
3.编写进度回调

1. import cloud, { AuthUser } from '@hw-agconnect/cloud'
2. import router from '@ohos.router'
3. import hilog from '@ohos.hilog'
4. import picker from '@ohos.file.picker'
6. @Entry
7. @Component
8. struct MyIndex {
9.   @State photoUrl: string = ''
10.   @State displayName: string = ''
11.   @StorageLink('user') user: AuthUser = null
12.   @State uploading: boolean = false
13.   @State uploadingText: string = '0%'
15.   aboutToAppear() {
16.     // 1. cloud.auth().getCurrentUser()
17.     // 2. AppStorage
18.     this.displayName = this.user?.getDisplayName()
19.     this.photoUrl = this.user?.getPhotoUrl()
20.   }
22.   build() {
23.     Row() {
24.       Column({ space: 10 }) {
25.         Stack() { // 堆叠的效果
26.           Image(this.photoUrl ? this.photoUrl : $r('app.media.user_dark'))
27.             .width(70)
28.             .height(70)
29.             .borderRadius(70)
30.             .enabled(!this.uploading)
31.             .onComplete(()=>{
32.               this.uploading = false
33.             })
34.             .onClick(async () => {
35.               // this.photoUrl = 'https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png'
36.               try {
37.                 // 1. 从相簿中选照片
38.                 const options = new picker.PhotoSelectOptions()
39.                 options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
40.                 options.maxSelectNumber = 1
41.                 const result = await new picker.PhotoViewPicker().select(options)
42.                 hilog.info(0, 'Upload', `Picker Success ${result.photoUris[0]}`)
43.                 this.uploading = true
44.                 // 2. 调云存储 api 上传照片
45.                 await cloud.storage().upload({
46.                   localPath: result.photoUris[0],
47.                   cloudPath: `test/${this.user.getUid()}.jpg`,
48.                   onUploadProgress: event => {
49.                     const percent = Math.floor(100 * event.loaded / event.total)
50.                     this.uploadingText = `${percent}%`
51.                   }
52.                 })
53.                 hilog.info(0, 'Upload', 'Upload Success')
54.                 // 3. 获取上传照片的网络地址
55.                 const url = await cloud.storage().getDownloadURL(`test/${this.user.getUid()}.jpg`)
56.                 this.photoUrl = `${url}&ts=${new Date().getTime()}`
57.                 // this.uploading = false
58.                 hilog.info(0, 'Upload', `url: ${url}`)
59.               } catch (e) {
60.                 hilog.error(0, 'Upload', JSON.stringify(e))
61.               }
62.             })
63.           if (this.uploading) {
64.             // 显示上传进度
65.             Text(this.uploadingText)
66.               .width(70)
67.               .height(70)
68.               .borderRadius(70)
69.               .fontColor('white')
70.               .backgroundColor('black')
71.               .opacity(0.6)
72.               .fontSize(24)
73.               .fontWeight(FontWeight.Bolder)
74.               .textAlign(TextAlign.Center)
75.           }
76.         }
79.         TextInput({ placeholder: '请设置昵称', text: this.displayName })
80.           .width('50%')
81.           .onChange(value => {
82.             this.displayName = value
83.           })
84.         Button(`保存`)
85.           .onClick(async () => {
86.             try {
87.               await this.user.updateProfile({
88.                 displayName: this.displayName,
89.                 photoUrl: this.photoUrl
90.               })
91.               hilog.info(0, 'updateProfile', 'Success')
92.             } catch (e) {
93.               hilog.error(0, 'updateProfile', JSON.stringify(e))
94.             }
95.           })
96.         Button(`登出`)
97.           .onClick(async () => {
98.             try {
99.               await cloud.auth().signOut()
100.               hilog.info(0, 'SignOut', 'Success')
101.               router.replaceUrl({ url: 'pages/MyLoginCustom' })
102.             } catch (e) {
103.               hilog.error(0, 'SignOut', JSON.stringify(e))
104.             }
105.           })
107.       }
108.       .width('100%')
109.     }
110.     .height('100%')
111.   }
112. }

复制代码

在历程中直接竣事步伐（没有点击退出），再次点击登录，会报错

原因，我们虽然竣事了步伐，由于我们没有正常退出步伐，用户会话还在，再次登录的时间出现错误

云数据库

概念

存储区，对象类型，对象

数据类型

数据类型取值范围分析排序方式String最大长度200如果字符串长度凌驾200，建议使用Text类型。接纳 UTF-8 编码的字节次序Booleantrue/false-false < trueByte                                                  (                                  −                                               2                                     7                                              )                                  ∼                                  (                                               2                                     7                                              −                                  1                                  )                                          (-2^7)\sim(2^7-1)                           (−27)∼(27−1)-数字次序Short                                                  (                                  −                                               2                                     15                                              )                                  ∼                                  (                                               2                                     15                                              −                                  1                                  )                                          (-2^{15})\sim(2^{15}-1)                           (−215)∼(215−1)-Integer                                                  (                                  −                                               2                                     31                                              )                                  ∼                                  (                                               2                                     31                                              −                                  1                                  )                                          (-2^{31})\sim(2^{31}-1)                           (−231)∼(231−1)-Long                                                  (                                  −                                               2                                     63                                              )                                  ∼                                  (                                               2                                     63                                              −                                  1                                  )                                          (-2^{63})\sim(2^{63}-1)                           (−263)∼(263−1)由于JavaScript不支持数据类型“Long”，Web SDK通过引入第三方开源组件实现支持数据类型“Long”的能力。“Long”类型的使用方法请参考https://github.com/dcodeIO/long.js。Float-3.40E+38 ~ +3.40E+38-Double-1.79E+308 ~ +1.79E+308-ByteArray-一般用于文件类型的数据存储，如图片、文档和视频等。在端侧时，使用Android开发应用时，以byte[]表示为字节数组。接纳 UTF-8 编码的字节次序Text--Date--时间次序IntAutoIncrement                                                  1                                  ∼                                  (                                               2                                     31                                              −                                  1                                  )                                          1\sim(2^{31}-1)                           1∼(231−1)Android、HarmonyOS(Java)和iOS不支持此数据类型。数字次序LongAutoIncrement                                                  1                                  ∼                                  (                                               2                                     63                                              −                                  1                                  )                                          1\sim(2^{63}-1)                           1∼(263−1)Android、HarmonyOS(Java)和iOS不支持此数据类型。数字次序

• 假设有自增类型 id，执行 upsert （insert+update）
  
  
  
  • id 值在数据库有，更新 {id:1, name:‘李四’ , age:20}
    
  • id 值在数据库无，按自增加加 {id:5, name:‘王五’ , age:16}
    
  • id 值不给，也按自增加加 {name:‘赵六’ , age:16}
    
  
  

1. student 表
2. id         name   age
3. 1    李四    20
4. 2    王五    16
5. 3         赵六    16

复制代码

权限管理

【角色】共有四种

• World 所有人
  
• Authenticated 已认证
  
• Creator 创建者
  
• Administrator 管理员
  

【权限】共有三种：Read 查询、Upsert 新增和修改、Delete 删除
例如

1. article 表
2. id        title                                                                 
3.                                                                                         用户 111
4. 1   探索自我成长的道路：我的心路历程
5. 2   如何在忙碌的生活中保持身心健康
6. 3   分享我的旅行经历：探索世界的美
7.                                                                                         用户 222
8. 4        金融投资的新趋势：数字货币的崛起
9. 5   未来科技发展展望：人工智能对社会的影响

复制代码

• 用户111 未登录，查询所有文章 1 2 3 4 5
  
• 用户333 未登录，查询所有文章 1 2 3 4 5
  
• 用户111 未登录，添加新文章 失败
  
• 用户111 已登录，添加新文章 成功
  
• 用户111 已登录，删除文章1 成功
  
• 用户111 已登录，删除文章4 失败
  
• 用户111 已登录，修改文章4 成功
  

从上面我们可知，华为的云数据库，权限设置比较粗糙，还是必要配合业务代码，进行
它的权限设置如下：

1. "permissions": [
2.   {
3.     "rights": ["Read"],
4.     "role": "World"
5.   },
6.   {
7.     "rights": ["Read","Upsert"],
8.     "role": "Authenticated"
9.   },
10.   {
11.     "rights": ["Read","Upsert","Delete"],
12.     "role": "Creator"
13.   },
14.   {
15.     "rights": ["Read","Upsert","Delete"],
16.     "role": "Administrator"
17.   }
18. ]

复制代码

则有：

• 未认证（未登录）的用户只能查询
  
  
  
  • 这时最好不要给 Upsert 权限，否则由未认证的用户新增的数据，除了管理员都不能删除
    
  
  
• 已认证的用户可以查询、新增、修改
  
• 已认证的用户自己新增的数据，自己可以删除，别人的数据不能删除（但可以修改）
  
• 已认证用户查询时，还是能查到别的用户的数据的，因此必要自己维护 uid 来控制数据权限
  

准备云数据库

存储区

新建对象的类型，其实就是新建表

另一种方法准备云数据库

使用云端一体化模板
新建一张表

端侧调用云数据库

调用云数据库又分成了两种方式
一种叫端测调用：使用ArkTs它的API，然后直接去使用云数据库
另外一种叫云测调用： 云函数间接的使用云数据库
起首明确：云数据库必要对接华为帐号系统（与前面提到的权限相关联）
分成两种方式：
一. 直接在端侧调用数据库，优点是更直接面对数据库，而且根据文档具备缓存模式的利益
二. 通过云函数在云侧调用数据库，可能无法利用缓存模式的一些利益（未验证）。但又可以隐藏数据库细节，并具备云函数的优点
端侧调用

0）前提

• 添加依赖
  
• 下载 AGC 设置文件
  
• 初始化 AGC 连接器
  

这三步与调用云函数相同

long类型。js不支持，必要用到第三方库
每次我们做了新的设置，都要重新下载 AGC 设置文件

初始化 AGC 连接器

1）建立模子

js 代表端侧模子代码
serverSDK代表云侧模子代码

导出结果如下

1. /*
2. * Copyright (c) Huawei Technologies Co., Ltd. 2020-2020. All rights reserved.
3. * Generated by the CloudDB ObjectType compiler. DO NOT EDIT!
4. */
6. class t_user {
7.     constructor() {
8.         this.id = undefined;
9.         this.name = "";
10.         this.birthday = undefined;
11.     }
13.     setId(id) {
14.         this.id = id;
15.     }
17.     getId() {
18.         return this.id;
19.     }
21.     setName(name) {
22.         this.name = name;
23.     }
25.     getName() {
26.         return this.name;
27.     }
29.     setBirthday(birthday) {
30.         this.birthday = birthday;
31.     }
33.     getBirthday() {
34.         return this.birthday;
35.     }
36. }
38. t_user.className = 't_user';
40. export {t_user}

复制代码

2）导出 schema

导出数据库 schema 文件，例如下面是一个文件名 com.example.myapplication_21_cn.json，格式为【应用名_版本_语言.json】
3）初始化 database

改进–分页查询

改进–搜索功能

改进下滑显示搜索框
只有下滑到顶部的时间，才显示搜索框

1. // @ts-ignore
2. import schema from './com.example.myapplication_21_cn.json'
4. @Entry
5. @Component
6. struct XXX {
7.   // ...  
8.   private database: Database
10.   async aboutToAppear() {
11.     try {
12.       // 根据 schema 和 zoneName 创建数据库对象
13.       this.database = cloud.database({ objectTypeInfo: schema, zoneName: "shopping" })
14.     } catch (e) {
15.       hilog.error(0, 'User Query', 'error:' + JSON.stringify(e))
16.     }
17.   }

复制代码

4）查询

1. import cloud, { Database } from '@hw-agconnect/cloud'
3. // @ts-ignore
4. import schema from '../../resources/rawfile/schema.json'
5. import { t_student } from '../model/t_student'
6. import hilog from '@ohos.hilog'
8. @Entry
9. @Component
10. struct StudentPage {
11.   @State studentList: t_student[] = []
12.   private database: Database = null
13.   private dataOffset: number = 0
14.   @State searchAge: string = ''
15.   @State showSearch: boolean = false
16.   private startY: number = 0
17.   private startIndex: number = 0
19.   aboutToAppear() {
20.     this.database = cloud.database({
21.       zoneName: 'test',
22.       objectTypeInfo: schema
23.     })
24.     this.search('', '', '', this.dataOffset)
25.   }
27.   async search(id: string, name: string, age: string, offset: number, limit: number = 10) {
28.     try {
29.       const query = this.database.collection(t_student).query()
30.       if (id.length > 0) {
31.         // where id=?
32.         query.equalTo("id", Number(id))
33.       }
34.       if (name.length > 0) {
35.         // where name like ?
36.         query.contains("name", name)
37.       }
38.       if (age.length > 0) {
39.         // where age=?
40.         query.equalTo("age", Number(age))
41.       }
42.       query.limit(limit, offset)
43.       query.orderByAsc("id")
44.       const list: t_student[] = await query.get()
45.       this.studentList.push(...list)
46.       hilog.info(0, 'Query', `${list.map(s => s.id)}`)
47.     } catch (e) {
48.       hilog.error(0, 'Query', JSON.stringify(e))
49.     }
50.   }
52.   build() {
53.     Column({ space: 26 }) {
54.       Row() {
55.         Text(`编号`)
56.           .fontSize(18)
57.           .fontWeight(FontWeight.Bold)
58.           .fontColor('white')
59.           .textAlign(TextAlign.Center)
60.           .width('33%')
61.         Text(`姓名`)
62.           .fontSize(18)
63.           .fontWeight(FontWeight.Bold)
64.           .fontColor('white')
65.           .textAlign(TextAlign.Center)
66.           .width('34%')
67.         Text(`年龄`)
68.           .fontSize(18)
69.           .fontWeight(FontWeight.Bold)
70.           .fontColor('white')
71.           .textAlign(TextAlign.Center)
72.           .width('33%')
73.       }
74.       .width('100%')
75.       .height(36)
76.       .backgroundColor('black')
78.       if (this.showSearch) {
79.         Search()
80.           .searchButton('搜索')
81.           .onChange(value => {
82.             this.searchAge = value
83.           })
84.           .onSubmit(() => {
85.             this.studentList = []
86.             this.dataOffset = 0
87.             this.search('', '', this.searchAge, this.dataOffset)
88.             this.showSearch = false
89.           })
90.       }
92.       List({ space: 52 }) {
93.         ForEach(this.studentList, (stu: t_student) => {
94.           ListItem() {
95.             Row() {
96.               Text(`${stu.getId()}`)
97.                 .fontSize(18)
98.                 .textAlign(TextAlign.Center)
99.                 .width('33%')
100.               Text(stu.getName())
101.                 .fontSize(18)
102.                 .textAlign(TextAlign.Center)
103.                 .width('34%')
104.               Text(`${stu.getAge()}`)
105.                 .fontSize(18)
106.                 .textAlign(TextAlign.Center)
107.                 .width('33%')
108.             }
109.             .width('100%')
110.           }
111.         })
112.       }
113.       .width('100%')
114.       .height('82%')
115.       .onReachEnd(() => {
116.         this.dataOffset += 10
117.         this.search('', '', '', this.dataOffset)
118.       })
119.       .onScrollIndex((start, end) => {
120.         hilog.info(0, 'Scroll', `start: ${start} end:${end}`)
121.         this.startIndex = start
122.       })
123.       .onTouch(event => {
124.         switch (event.type) {
125.           case TouchType.Down:
126.             this.startY = event.touches[0].y
127.             break;
128.           case TouchType.Move:
129.             const endY = event.touches[0].y
130.             if (endY - this.startY >= 35 && this.startIndex === 0) {
131.               this.showSearch = true
132.             } else if (this.startY - endY >= 25) {
133.               this.showSearch = false
134.             }
135.             break;
136.         }
137.       })
139.       Divider()
140.     }
141.     .width('100%')
142.     .justifyContent(FlexAlign.Start)
143.   }
144. }

复制代码

实现左滑删除

有个难点bind
函数作为参数通报，this丢失问题
函数作为参数通报，剩余参数问问题
问题演示

问题出现

5）新增、修改、删除

1. import cloud, { Database } from '@hw-agconnect/cloud'
3. // @ts-ignore
4. import schema from '../../resources/rawfile/schema.json'
5. import { t_student } from '../model/t_student'
6. import hilog from '@ohos.hilog'
7. import { StudentInsertDialog } from './StudentInsertDialog'
8. import router from '@ohos.router'
9. import { StudentUpdateDialog } from './StudentUpdateDialog'
11. @Entry
12. @Component
13. struct StudentPage {
14.   @State studentList: t_student[] = []
15.   private database: Database = null
16.   private dataOffset: number = 0
17.   @State searchAge: string = ''
18.   @State showSearch: boolean = false
19.   private startY: number = 0
20.   private startIndex: number = 0
21.   private studentInsertDialogController: CustomDialogController = new CustomDialogController({
22.     builder: StudentInsertDialog({
23.       confirm: async (name, age) => {
24.         try {
25.           const stu = new t_student()
26.           stu.setName(name)
27.           stu.setAge(age)
28.           await this.database.collection(t_student).upsert(stu)
29.           AlertDialog.show({ message: '添加学生成功' })
30.           hilog.info(0, 'Student Insert', 'Success')
31.           this.dataOffset = 0
32.           this.studentList = []
33.           this.search('', '', '', this.dataOffset)
34.         } catch (e) {
35.           hilog.error(0, 'Student Insert', JSON.stringify(e))
36.         }
37.       }
38.     })
39.   })
40.   private studentUpdateDialogController: CustomDialogController
42.   openStudentUpdateDialog(stu: t_student) {
43.     this.studentUpdateDialogController = new CustomDialogController({
44.       builder: StudentUpdateDialog({
45.         sid: stu.id, name: stu.name, age: stu.age,
46.         confirm: async (id, name, age) => {
47.           try {
48.             const stu = new t_student()
49.             stu.setId(id)
50.             stu.setName(name)
51.             stu.setAge(age)
52.             await this.database.collection(t_student).upsert(stu)
53.             AlertDialog.show({ message: '修改学生成功' })
54.             hilog.info(0, 'Student Update', 'Success')
55.             this.dataOffset = 0
56.             this.studentList = []
57.             this.search('', '', '', this.dataOffset)
58.           } catch (e) {
59.             hilog.error(0, 'Student Update', JSON.stringify(e))
60.           }
61.         }
62.       })
63.     })
64.     this.studentUpdateDialogController.open()
65.   }
67.   openStudentDeleteDialog(stu: t_student) {
68.     AlertDialog.show({
69.       title: '请确认',
70.       message: '真的要删除该用户吗?',
71.       confirm: {
72.         value: '确定',
73.         action: async () => {
74.           try {
75.             await this.database.collection(t_student).delete(stu)
76.             AlertDialog.show({ message: '删除学生成功' })
77.             hilog.info(0, 'Student Delete', 'Success')
78.             this.dataOffset = 0
79.             this.studentList = []
80.             this.search('', '', '', this.dataOffset)
81.           } catch (e) {
82.             hilog.error(0, 'Student Delete', JSON.stringify(e))
83.           }
84.         }
85.       }
86.     })
87.   }
89.   @Builder
90.   showOperation(stu: t_student) {
91.     Row({ space: 12 }) {
92.       Image($r("app.media.ic_public_edit_filled"))
93.         .width(20)
94.         .onClick(() => {
95.           this.openStudentUpdateDialog(stu)
96.         })
97.       Image($r("app.media.ic_public_delete_filled"))
98.         .width(21)
99.         .onClick(() => {
100.           this.openStudentDeleteDialog(stu)
101.         })
102.     }
103.     .width(80)
104.     .justifyContent(FlexAlign.Start)
105.   }
107.   aboutToAppear() {
108.     this.database = cloud.database({
109.       zoneName: 'test',
110.       objectTypeInfo: schema
111.     })
112.     this.search('', '', '', this.dataOffset)
113.   }
115.   async search(id: string, name: string, age: string, offset: number, limit: number = 10) {
116.     try {
117.       const query = this.database.collection(t_student).query()
118.       if (id.length > 0) {
119.         // where id=?
120.         query.equalTo("id", Number(id))
121.       }
122.       if (name.length > 0) {
123.         // where name like ?
124.         query.contains("name", name)
125.       }
126.       if (age.length > 0) {
127.         // where age=?
128.         query.equalTo("age", Number(age))
129.       }
130.       query.limit(limit, offset)
131.       query.orderByAsc("id")
132.       const list: t_student[] = await query.get()
133.       this.studentList.push(...list)
134.       hilog.info(0, 'Student Query', `${list.map(s => s.id)}`)
135.     } catch (e) {
136.       hilog.error(0, 'Student Query', JSON.stringify(e))
137.     }
138.   }
140.   build() {
141.     Column() {
142.       Row() {
143.         Text(`编号`)
144.           .fontSize(18)
145.           .fontWeight(FontWeight.Bold)
146.           .fontColor('white')
147.           .textAlign(TextAlign.Center)
148.           .width('33%')
149.         Text(`姓名`)
150.           .fontSize(18)
151.           .fontWeight(FontWeight.Bold)
152.           .fontColor('white')
153.           .textAlign(TextAlign.Center)
154.           .width('34%')
155.         Text(`年龄`)
156.           .fontSize(18)
157.           .fontWeight(FontWeight.Bold)
158.           .fontColor('white')
159.           .textAlign(TextAlign.Center)
160.           .width('33%')
161.       }
162.       .width('100%')
163.       .height(36)
164.       .backgroundColor('black')
166.       if (this.showSearch) {
167.         Search()
168.           .searchButton('搜索')
169.           .onChange(value => {
170.             this.searchAge = value
171.           })
172.           .onSubmit(() => {
173.             this.studentList = []
174.             this.dataOffset = 0
175.             this.search('', '', this.searchAge, this.dataOffset)
176.             this.showSearch = false
177.           })
178.       }
180.       List({ space: 48 }) {
181.         ForEach(this.studentList, (stu: t_student) => {
182.           ListItem() {
183.             Row() {
184.               Text(`${stu.getId()}`)
185.                 .fontSize(18)
186.                 .textAlign(TextAlign.Center)
187.                 .width('33%')
188.               Text(stu.getName())
189.                 .fontSize(18)
190.                 .textAlign(TextAlign.Center)
191.                 .width('34%')
192.               Text(`${stu.getAge()}`)
193.                 .fontSize(18)
194.                 .textAlign(TextAlign.Center)
195.                 .width('33%')
196.             }
197.             .width('100%')
198.           }
199.           .swipeAction({ end: this.showOperation.bind(this, stu) })
200.         })
201.       }
202.       .width('100%')
203.       .height('78%')
204.       .margin({ top: 24, bottom: 24 })
205.       .onReachEnd(() => {
206.         this.dataOffset += 10
207.         this.search('', '', '', this.dataOffset)
208.       })
209.       .onScrollIndex((start, end) => {
210.         hilog.info(0, 'Scroll', `start: ${start} end:${end}`)
211.         this.startIndex = start
212.       })
213.       .onTouch(event => {
214.         switch (event.type) {
215.           case TouchType.Down:
216.             this.startY = event.touches[0].y
217.             break;
218.           case TouchType.Move:
219.             const endY = event.touches[0].y
220.             if (endY - this.startY >= 25 && this.startIndex === 0) {
221.               this.showSearch = true
222.             } else if (this.startY - endY >= 5 || this.startIndex === 0) {
223.               this.showSearch = false
224.             }
225.             break;
226.         }
227.       })
229.       Button('新增', { type: ButtonType.Normal })
230.         .width('100%')
231.         .margin({ bottom: 6 })
232.         .onClick(async () => {
233.           this.studentInsertDialogController.open()
234.         })
236.       Button('登出', { type: ButtonType.Normal })
237.         .width('100%')
238.         .backgroundColor(0xcccccc)
239.         .margin({ bottom: 6 })
240.         .onClick(async () => {
241.           try {
242.             await cloud.auth().signOut()
243.             hilog.info(0, 'SignOut', 'Success')
244.             router.replaceUrl({ url: 'pages/MyLoginCustom' })
245.           } catch (e) {
246.             hilog.error(0, 'SignOut', JSON.stringify(e))
247.           }
248.         })
249.       Divider()
250.     }
251.     .width('100%')
252.     .justifyContent(FlexAlign.Start)
253.   }
254. }

复制代码

1. @CustomDialog
2. export struct StudentInsertDialog {
3.   private name: string = ''
4.   private age: number = 18
5.   controller: CustomDialogController
6.   confirm: (name: string, age: number) => void
7.   private static range = (start, stop, step = 1) => Array.from({
8.     length: (stop - start - 1) / step + 1
9.   }, (_, i) => start + (i * step))
10.   static AgeRange: string[] = StudentInsertDialog.range(16, 60).map(i => String(i))
12.   build() {
13.     Column({ space: 15 }) {
14.       Row() {
15.         Text('姓名')
16.           .width('20%')
17.         TextInput({ text: this.name })
18.           .width('80%')
19.           .onChange(value => {
20.             this.name = value
21.           })
22.       }
23.       .width('80%')
24.       .justifyContent(FlexAlign.SpaceAround)
26.       Row() {
27.         Text('年龄')
28.           .width('20%')
29.         TextPicker({ range: StudentInsertDialog.AgeRange, selected: 2 })
30.           .width('80%')
31.           .onChange(value => {
32.             this.age = Number(value)
33.           })
34.       }
35.       .width('80%')
37.       Row() {
38.         Button('取消')
39.           .onClick(() => {
40.             this.controller.close()
41.           })
42.           .backgroundColor(0xcccccc)
43.         Button('确定')
44.           .onClick(() => {
45.             this.confirm(this.name, this.age)
46.             this.controller.close()
47.           })
48.       }
49.       .width('80%')
50.       .justifyContent(FlexAlign.SpaceAround)
51.     }
52.     .justifyContent(FlexAlign.SpaceAround)
53.     .width('80%')
54.     .height('55%')
55.     .margin({ top: 15 })
56.   }
57. }

复制代码

1. import { StudentInsertDialog } from './StudentInsertDialog'
2. @CustomDialog
3. export struct StudentUpdateDialog {
4.   private sid: number
5.   private name: string
6.   private age: number
7.   controller: CustomDialogController
8.   confirm: (id: number, name: string, age: number) => void
10.   build() {
11.     Column({ space: 15 }) {
12.       Text(`${this.sid}`)
14.       Row() {
15.         Text('姓名')
16.           .width('20%')
17.         TextInput({ text: this.name })
18.           .width('80%')
19.           .onChange(value => {
20.             this.name = value
21.           })
22.       }
23.       .width('80%')
24.       .justifyContent(FlexAlign.SpaceAround)
26.       Row() {
27.         Text('年龄')
28.           .width('20%')
29.         TextPicker({ range: StudentInsertDialog.AgeRange, selected: 2 })
30.           .width('80%')
31.           .onChange(value => {
32.             this.age = Number(value)
33.           })
34.       }
35.       .width('80%')
37.       Row() {
38.         Button('取消')
39.           .onClick(() => {
40.             this.controller.close()
41.           })
42.           .backgroundColor(0xcccccc)
43.         Button('确定')
44.           .onClick(() => {
45.             this.confirm(this.sid, this.name, this.age)
46.             this.controller.close()
47.           })
48.       }
49.       .width('80%')
50.       .justifyContent(FlexAlign.SpaceAround)
51.     }
52.     .justifyContent(FlexAlign.SpaceAround)
53.     .width('80%')
54.     .height('65%')
55.     .margin({ top: 15 })
56.   }
57. }

复制代码

云侧调用

这部分代码可以自动天生，不作为重点解说

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。