目录
1. 前言
上帖子使用云函数端云一体化开发计算十二生肖,此贴使用云数据库端云一体化开发计算十二生肖,在DevEco Studio可以完成端侧代码开发和云侧代码开发,一键部署云数据库,效果与之前使用云函数一样,计算获取方式不同。
2. 真机效果

3. 讲解
创建端云一体化项目,这里就不介绍的,创建、部署云数据库官方详细教程 开发云数据库 端云一体化项目结构和之前不一样,多了CloudProgram模块, 下面介绍项目开发,先从云侧开发开始,再到端侧开发。
4. 云侧开发
4.1 介绍云数据库目录结构
展开CloudProgram模块,展开clouddb目录,dataentry目录是存储数据条目文件,objecttype目录是存储对象类型文件,db-config.json自动生成,内容包含云数据库配置,目录结构如下图:

4.2 定义对象类型
右击objecttype目录,创建对象类型


4.3 定义数据条目
右击dataentry目录,创建数据条目


4.4 部署云数据库
部署云侧代码到AGC上,右击clouddb目录,选择Deploy Cloud DB, 自动部署到AGC上,如果提示没有登录,登录成功后,再操作一次部署。

4.5 导出文件格式
4.5.1 登录到AGC->云数据库,进入当前项目的云数据库服务菜单,可分别在“对象类型”、“存储区”与“数据”页签查看到您刚刚部署的云数据库资源。

4.5.2 导出json格式文件

4.5.3 导出js格式文件

4.5.3 导出json文件和js文件,端侧使用到。
5. 端侧开发
5.1 端侧模块结构
先看一下端侧模块结构:

5.2 common目录
common目录放一些公共的封装类,比如Log类; components目录放自定义组件;entryability是自动生成的,里面有一个EntryAbility类,包含生命周期;pages目录放UI布局页面;services目录放业务逻辑类,比如调用云侧接口。
5.3 services目录
这里只介绍services目录的工作,先介绍如何和AGC连接上的,这里使用一个单独的文件来处理:
5.3.1 services目录下AgcConfig.ts
5.3.2 在services目录下创建app-schema.json文件,复制上面在AGC下载的json格式文件内容到app-schema.json里
5.3.3 在services目录下创建ZodiacObject.js文件,复制上面在AGC下载的js格式文件内容到ZodiacObject.js里
5.3.4 services目录下创建CloudDB.ts
5.4 pages目录
pages目录 Index.ts 这里是页面布局,上面看到的效果,就是这里实现的。
import { CloudDBService } from '../services/CloudDB';
@Entry
@Component
struct Index {
@State year: number = 2022
@State born: string = "?"
@State flag: boolean = false
getBorn() {
this.flag = true;
console.info('xx Page year: ' + this.year)
let params = {
"year": this.year
}
CloudDBService.query(getContext(this), this.year).then((res) => {
console.info('xx cloud db result: ' + JSON.stringify(res));
this.flag = false;
this.born = res.zodiacName;
}).catch((err) => {
this.flag = false;
console.error('xx error: ', err && err.message);
});
}
build() {
Stack() {
if (!this.flag) {
Column({space: 20}) {
Text('请选择年份')
.fontSize(20)
.fontWeight(FontWeight.Bold)
Column() {
Text(this.year + '')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.padding(10)
.width(100)
.border({ width: 1, radius: 8 })
}
.bindMenu([
{ value: '2006', action: () => {this.year = 2006; this.born = '?'} },
{ value: '2007', action: () => {this.year = 2007; this.born = '?'} },
{ value: '2008', action: () => {this.year = 2008; this.born = '?'} },
{ value: '2009', action: () => {this.year = 2009; this.born = '?'} },
{ value: '2010', action: () => {this.year = 2010; this.born = '?'} },
{ value: '2011', action: () => {this.year = 2011; this.born = '?'} },
{ value: '2012', action: () => {this.year = 2012; this.born = '?'} },
{ value: '2013', action: () => {this.year = 2013; this.born = '?'} },
{ value: '2014', action: () => {this.year = 2014; this.born = '?'} },
{ value: '2015', action: () => {this.year = 2015; this.born = '?'} },
{ value: '2016', action: () => {this.year = 2016; this.born = '?'} },
{ value: '2017', action: () => {this.year = 2017; this.born = '?'} },
{ value: '2018', action: () => {this.year = 2018; this.born = '?'} },
{ value: '2019', action: () => {this.year = 2019; this.born = '?'} },
{ value: '2020', action: () => {this.year = 2020; this.born = '?'} },
{ value: '2021', action: () => {this.year = 2021; this.born = '?'} },
{ value: '2022', action: () => {this.year = 2022; this.born = '?'} },
{ value: '2023', action: () => {this.year = 2023; this.born = '?'} },
{ value: '2024', action: () => {this.year = 2024; this.born = '?'} },
{ value: '2025', action: () => {this.year = 2025; this.born = '?'} }
])
Button('计算', {type: ButtonType.Normal, stateEffect: true})
.fontSize(18)
.borderRadius(8)
.width(100)
.margin({bottom: 20})
.onClick(() => {
this.getBorn()
})
Text(`${this.year} 年生肖是 ${this.born}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('100%')
.padding({top: '33%'})
} else {
LoadingProgress().color(Color.Blue)
.backgroundColor(Color.Transparent)
}
}
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
6. 总结
由于调用云侧云数据库是异步的,不能马上返回结果,这里添加LoadingProgress组件,让用户知道在运行中,效果看得不是很明显,可能录制时,网速很快,LoadingProgress组件闪一下就不见了,如果遇到网络慢时,LoadingProgress就会一直转,直到云数据库返回响应时,再消失LoadingProgress。
感觉云数据库比云函数更复杂了一些
操作步骤是多了一些,要建表结构,索引,创建数据,写增,删,改,查逻辑。本实例只写了一个查询
应用很简单,更有价值的是这个实现的思路和方法!
谢谢浩哥的点评🙏