详见官方文档:https://uniapp.dcloud.io/uniCloud/unicloud-db
组件是一个数据库查询组件,它是对clientDB的js库的再封装。
前端通过组件方式直接获取uniCloud的云端数据库中的数据,并绑定在界面上进行渲染。
在传统开发中,开发者需要在前端定义data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。
有了 组件,上述工作只需要1行代码!写组件,设组件的属性,在属性中指定要查什么表、哪些字段、以及查询条件,就OK了!
HBuilderX中敲下udb代码块,得到如下代码,然后通过collection属性指定要查询表“table1”,通过field属性指定要查询字段“field1”,并且在where属性中指定查询id为1的数据。查询结果data就可以直接渲染在界面上。

  1. <unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
  2. <view>
  3. {{ data}}
  4. </view>
  5. </unicloud-db>

组件不仅支持查询。还自带了add、remove、update方法,见下文方法章节

属性

属性 类型 描述
v-slot:default 查询状态(失败、联网中)及结果(data)
ref string vue组件引用标记
spaceInfo Object 服务空间信息,新增于HBuilderX 3.2.11。同uniCloud.init参数,参考:uniCloud.init
collection string 表名。支持输入多个表名,用 , 分割,自HBuilderX 3.2.6起也支持传入tempCollection组成的数组
field string 指定要查询的字段,多个字段用 , 分割。不写本属性,即表示查询所有字段。支持用 oldname as newname方式对返回字段重命名
where string 查询条件,对记录进行过滤。见下
orderby string 排序字段及正序倒序设置
foreign-key String 手动指定使用的关联关系,HBuilderX 3.1.10+ 详情
page-data String 分页策略选择。值为 add 代表下一页的数据追加到之前的数据中,常用于滚动到底加载下一页;值为 replace 时则替换当前data数据,常用于PC式交互,列表底部有页码分页按钮,默认值为add
page-current Number 当前页
page-size Number 每页数据数量
getcount Boolean 是否查询总数据条数,默认 false,需要分页模式时指定为 true
getone Boolean 指定查询结果是否仅返回数组第一条数据,默认 false。在false情况下返回的是数组,即便只有一条结果,也需要[0]的方式获取。在值为 true 时,直接返回结果数据,少一层数组,一般用于非列表页,比如详情页
action string 云端执行数据库查询的前或后,触发某个action函数操作,进行预处理或后处理,详情
。场景:前端无权操作的数据,比如阅读数+1
manual Boolean 已过时,使用 loadtime 替代 是否手动加载数据,默认为 false,页面onready时自动联网加载数据。如果设为 true,则需要自行指定时机通过方法this.$refs.udb.loadData()来触发联网,其中的udb指组件的ref值。一般onLoad因时机太早取不到this.$refs.udb,在onReady里可以取到
gettree Boolean 是否查询树状结构数据,HBuilderX 3.0.5+ 详情
startwith String gettree的第一层级条件,此初始条件可以省略,不传startWith时默认从最顶级开始查询,HBuilderX 3.0.5+
limitlevel Number gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级,最大15,最小1,HBuilderX 3.0.5+
groupby String 对数据进行分组,HBuilderX 3.1.0+
group-field String 对数据进行分组统计
distinct Boolean 是否对数据查询结果中重复的记录进行去重,默认值false,HBuilderX 3.1.0+
loadtime String 加载数据时机,默认auto,可选值 auto|onready|manual,详情
HBuilderX3.1.10+
@load EventHandle 成功回调。联网返回结果后,若希望先修改下数据再渲染界面,则在本方法里对data进行修改
@error EventHandle 失败回调

TODO:暂不支持in子查询功能。后续会补充
注意:page-current/page-size 改变不重置数据(page-data=”replace”) 和 (loadtime=”manual”) 除外,collection/action/field/getcount/orderby/where 改变后清空已有数据

示例
比如云数据库有个user的表,里面有字段id、name,查询id=1的数据,那么写法如下:
注意下面示例使用了getone会返回一条对象形式的data,如不使用getone,data将会是数组形式,即多一层

  1. <template>
  2. <view>
  3. <unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
  4. <view>
  5. {{ data.name}}
  6. </view>
  7. </unicloud-db>
  8. </view>
  9. </template>

注意:除非使用admin账户登录操作,否则需要在 uniCloud 控制台对要查询的表增加 Schema 权限配置。至少配置读取权限,否则无权在前端查询