<unicloud-db>
组件是一个数据库查询组件,它是对clientDB
的js库的再封装。
前端通过组件方式直接获取uniCloud的云端数据库中的数据,并绑定在界面上进行渲染。
在传统开发中,开发者需要在前端定义data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。
有了<unicloud-db>
组件,上述工作只需要1行代码!写组件,设组件的属性,在属性中指定要查什么表、哪些字段、以及查询条件,就OK了!
HBuilderX中敲下udb
代码块,得到如下代码,然后通过collection属性指定要查询表“table1”,通过field属性指定要查询字段“field1”,并且在where属性中指定查询id为1的数据。查询结果data就可以直接渲染在界面上。
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
<view>
{{ data}}
</view>
</unicloud-db>
<unicloud-db>
组件尤其适用于列表、详情等展示类页面。开发效率可以大幅度的提升。
<unicloud-db>
组件的查询语法是jql
,这是一种比sql语句和nosql语法更简洁、更符合js开发者习惯的查询语法。没学过sql或nosql的前端,也可以轻松掌握。
<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+ |
ssr-key | String | 详情 HBuilderX 3.4.11+ |
@load | EventHandle | 成功回调。联网返回结果后,若希望先修改下数据再渲染界面,则在本方法里对data进行修改 |
@error | EventHandle | 失败回调 |
如何进行分页,需要加入pagination。
v-slot:default
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
复制代码
属性 | 类型 | 描述 |
---|---|---|
data | Array|Object | 查询结果,默认值为Array , 当 getone 指定为 true 时,值为数组中第一条数据,类型为 Object ,减少了一层 |
pagination | Object | 分页属性 |
loading | Boolean | 查询中的状态。可根据此状态,在template中通过v-if显示等待内容,如<view v-if="loading">加载中...</view> |
hasMore | Boolean | 是否有更多数据。可根据此状态,在template中通过v-if显示没有更多数据了,如<uni-load-more v-if="!hasMore" status="noMore"></uni-load-more> , <uni-load-more> 详情 uni-load-more 加载更多 - DCloud 插件市场 |
error | Object | 查询错误。可根据此状态,在template中通过v-if显示等待内容,如<view v-if="error">加载错误</view> |
options | Object | 在小程序中,插槽不能访问外面的数据,需通过此参数传递, 不支持传递函数 |
提示:如果不指定分页模式, data
为多次查询的集合
<view v-if="searchValue==''">请输入要查询题目中的汉字或者拼音首字母(o゚▽゚)o</view>
<view v-else>
<unicloud-db ref="udb" v-slot:default="{data, loading, pagination, hasMore, error, options}" collection="questionlib" page-data="add" :page-size="10" :getcount="true"
field="type,question,xxa,xxb,xxc,xxd,xxe,xxf,xxg,answer" :where="where">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">玩命加载中...</view>
<view v-else>
<view v-if="data.length==0">没有查询到该数据,我也无能为力o(︶︿︶)o</view>
<view v-else>
<view class="resultcount">
<u-icon name="search" size="23" color="#0199fe"></u-icon>
<text class="resultcount-text">共查询到{{ pagination.count }}条数据</text>
</view>
<view class="question" v-for="(item,index) in data" :key="index">
<view class="question-type">
<u--text type="primary" :text="item.type" size="35rpx" margin="10rpx"></u--text>
</view>
<view class="question-content">
<u--text size="35rpx" :text="item.question"></u--text>
<u-parse :content="highLightKey(item.question,searchValue)"></u-parse>
</view>
<view class="question-option">
<u--text v-if="item.xxa" :type="indexof(item.answer,'A') ?'success':''" size="35rpx"
:text="'A:'+item.xxa"></u--text>
<u--text v-if="item.xxb" :type="indexof(item.answer,'B') ?'success':''" size="35rpx"
:text="'B:'+item.xxb"></u--text>
<u--text v-if="item.xxc" :type="indexof(item.answer,'C') ?'success':''" size="35rpx"
:text="'C:'+item.xxc"></u--text>
<u--text v-if="item.xxd" :type="indexof(item.answer,'D') ?'success':''" size="35rpx"
:text="'D:'+item.xxd"></u--text>
<u--text v-if="item.xxe" :type="indexof(item.answer,'E') ?'success':''" size="35rpx"
:text="'E:'+item.xxe"></u--text>
<u--text v-if="item.xxf" :type="indexof(item.answer,'F') ?'success':''" size="35rpx"
:text="'F:'+item.xxf"></u--text>
<u--text v-if="item.xxg" :type="indexof(item.answer,'G') ?'success':''" size="35rpx"
:text="'G:'+item.xxg"></u--text>
</view>
<view class="question-answer">
<u--text type="success" size="35rpx" align="right" :text="'答案:'+item.answer">
</u--text>
</view>
</view>
<uni-load-more v-if="!hasMore" status="noMore"></uni-load-more>
</view>
</view>
</unicloud-db>
</view>
运行效果
微信小程序“法务手册”“智慧助手”,欢迎大家品鉴。