uniCloud查询数据库
江流宛转绕芳甸，月照花林皆似霰。——张若虚
首先先右键项目中的database目录，没有的话自己手动创建一个，选择新建DB Schema
image-20211005195538604
输入表名，点击创建
image-20211005195701070
将read改为true
image-20211005195734860
点击上传DB Schema
image-20211005195846958
点击是
image-20211005195916185
image-20211005195928505
我们刷新云控制台可以看到成功上传
image-20211005200006372
我们添加两条记录
image-20211005194259977
{
"name": "ruben",
"phone": "13888888888"
}点击确定
image-20211005194442966
image-20211005194603640
新建一个list页面
image-20211005194642706
写入代码：
<template>
<view>
<unicloud-db v-slot:default="{ data, loading, error, options }" collection="contacts">
<view v-if="error">{{ error.message }}</view>
<view v-else>{{ data }}</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
<style></style>运行后发现我们已经成功查询出来了数据库中的数据
image-20211005200158220
我们将json改为列表渲染
引入uni-ui
https://ext.dcloud.net.cn/plugin?id=55
image-20211005200915014
image-20211005200926542
编写代码：
<template>
<view>
<unicloud-db v-slot:default="{ data, loading, error, options }" collection="contacts">
<view v-if="error">{{ error.message }}</view>
<view v-else>
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
<style></style>最终效果：
image-20211005201004114
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-10-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读