unicloud-db

Component Type：UniCloudDBElement

是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。

Attributes

name	type	default	description
v-slot:default	string	-	{data, loading, hasMore, pagination, error} v-slot:default
collection	any(string.DBCollectionString)	-	表名
field	string(string.DBFieldString)	-	查询字段，多个字段用 , 分割
where	any(string.JQLString)	-	查询条件
orderby	string	-	排序字段及正序倒叙设置
groupby	string	-	对数据进行分组
group-field	string	-	对数据进行分组统计
distinct	boolean	-	是否对数据查询结果中重复的记录进行去重 distinct
page-data	string	-	add 多次查询的集合, replace 当前查询的集合 page-data
page-current	number	-	当前页
page-size	number	-	每页数据数量
getcount	boolean	-	是否查询总数量
gettree	boolean	-	是否查询树状结构数据
startwith	string	-	gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询
limitlevel	number	-	gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1
manual	boolean	-	是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据
loadtime	string	-	加载数据时机，默认auto，可选值 auto|onready|manual loadtime
@load	(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) => void	-	成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改
@error	(event: Event) => void	-	失败回调

v-slot:default

name	description
data	查询结果，类型为Array<UTSJSONObject>
loading	查询中的状态。可根据此状态，在template中通过v-if显示等待内容
hasMore	是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了
error	查询错误。可根据此状态，在template中通过v-if显示等待内容
pagination	分页属性 pagination

pagination

name	description
current	当前页号
size	分页大小
count	数据库的总数据量, 设置 :getcount=true 时有效

distinct

name	description
true	去重
false	不去重

page-data

name	description
add	多次查询的集合
replace	当前查询的集合

loadtime

name	description
auto	页面就绪后或属性变化后加载数据，默认为auto
onready	页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时
manual	手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据

Example

hello uni-app x

<template>
 <view class="content">
   <unicloud-db ref="udb" class="unicloud-db" v-slot:default="{data, pagination, loading, error}"
     :collection="collection" :getcount="true" loadtime="manual">
     <list-view v-if="data.length>0" ref="listView" class="list" :scroll-y="true" @scrolltolower="loadMore()">
       <list-item class="list-item" v-for="(item, _) in data">
         <view class="list-item-fill">
           <text>{{item}}</text>
         </view>
         <view>
           <text class="list-item-remove" @click="remove(item.getString('_id')!)">❌</text>
         </view>
       </list-item>
     </list-view>
     <text class="loading" v-if="loading">Loading...</text>
     <view class="error" v-if="error!=null">{{error.errMsg}}</view>
     <view class="pagination" v-if="data.length>0">
       <text class="pagination-item">{{data.length}} / {{pagination.count}}</text>
     </view>
   </unicloud-db>
   <view class="btn-group">
     <button class="btn btn-add" @click="add()">Add</button>
     <button class="btn btn-get" @click="get()">Get</button>
   </view>
 </view>
</template>

<script>
 const db = uniCloud.databaseForJQL()

 export default {
   data() {
     return {
       collection: 'unicloud-db-test',
       collectionList: [
         db.collection('book').where('name == "水浒传"').getTemp(),
       ] as UTSJSONObject[],
       $uniCloudElement: null as UniCloudDBElement | null,
       $isTesting: false,
       $addResult: {},
       $updateResult: {},
       $removeResult: {}
     }
   },
   onReady() {
     this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
     this.get();
   },
   onPullDownRefresh() {
     this.$uniCloudElement!.loadData({
       clear: true,
       success: (_ : UniCloudDBGetResult) => {
         uni.stopPullDownRefresh()
       }
     })
   },
   methods: {
     loadMore() {
       this.$uniCloudElement!.loadMore()
     },
     get() {
       this.$uniCloudElement!.loadData({
         clear: true
       })
     },
     add() {
       const value = {
         title: "title-" + Date.now(),
         comment: "comment" + Date.now()
       };
       this.$uniCloudElement!.add(value, {
         showToast: false,
         success: (res : UniCloudDBAddResult) => {
           this.$addResult = {
             id: res.id
           };
           this.get();
         },
         fail: (err : any | null) => {
           this.showError(err)
         }
       })
     },
     update(id : string) {
       const value = {
         title: "title-" + Date.now(),
         comment: "comment" + Date.now()
       };
       this.$uniCloudElement!.update(id, value, {
         showToast: false,
         needLoading: true,
         needConfirm: false,
         loadingTitle: "正在更新...",
         success: (res : UniCloudDBUpdateResult) => {
           this.$updateResult = {
             updated: res.updated
           }
         },
         fail: (err : any | null) => {
           this.showError(err)
         }
       })
     },
     remove(id : string) {
       this.$uniCloudElement!.remove(id, {
         showToast: false,
         needConfirm: false,
         needLoading: false,
         success: (res : UniCloudDBRemoveResult) => {
           this.$removeResult = {
             deleted: res.deleted
           }
         },
         fail: (err : any | null) => {
           this.showError(err)
         }
       })
     },
     onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {
       console.log(data, ended, pagination);
     },
     showError(err : any | null) {
       const error = err as UniCloudError
       uni.showModal({
         content: error.errMsg,
         showCancel: false
       })
     }
   }
 }
</script>

<style>
 .content {
   flex: 1;
   flex-direction: column;
 }

 .list {
   flex: 1;
   flex-direction: column;
 }

 .list-item {
   flex-direction: row;
   padding: 10px;
 }

 .list-item-fill {
   flex: 1;
 }

 .list-item-remove {
   padding: 10px;
 }

 .loading {
   padding: 10px;
   text-align: center;
 }

 .pagination {
   flex-direction: row;
   background-color: #f2f2f2;
 }

 .pagination-item {
   margin: auto;
   padding: 5px 10px;
 }

 .btn-group {
   flex-direction: row;
 }

 .btn {
   flex: 1;
   margin: 10px;
 }
</style>

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
unicloud-db	5.0	√	3.93+	9.0	√	x
v-slot:default	5.0	√	3.93+	9.0	√	x
collection	5.0	√	3.93+	9.0	√	x
field	5.0	√	3.93+	9.0	√	x
where	5.0	√	3.93+	9.0	√	x
orderby	5.0	√	3.93+	9.0	√	x
groupby	5.0	√	3.93+	9.0	√	x
group-field	5.0	√	3.93+	9.0	√	x
distinct	5.0	√	3.93+	9.0	√	x
page-data	5.0	√	3.93+	9.0	√	x
page-current	5.0	√	3.93+	9.0	√	x
page-size	5.0	√	3.93+	9.0	√	x
getcount	5.0	√	3.93+	9.0	√	x
gettree	5.0	√	3.93+	9.0	√	x
startwith	5.0	√	3.93+	9.0	√	x
limitlevel	5.0	√	3.93+	9.0	√	x
manual	5.0	√	3.93+	9.0	√	x
loadtime	5.0	3.1.10+	3.93+	9.0	3.1.10+	x
@load	5.0	√	3.93+	9.0	√	x
@error	5.0	√	3.93+	9.0	√	x

See also

• Related Bug