uniCloud 入门前端数据库

diangedan

已于 2022-09-19 11:43:34 修改

阅读量1.6k

点赞数

分类专栏： uniapp 文章标签：服务器运维

于 2022-08-19 18:15:20 首次发布

本文链接：https://blog.csdn.net/diangedan/article/details/126427391

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1创建项目并关联云服务器

2 创建通讯录表

3 read改成true

4 添加一条记录

5 切换连接云函数,获取数据库数据

<template>
	<view>
		<!-- collection  数据表名称 -->
		<!-- data 获得的数据 -->
		<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 {
				
			};
		}
	}
</script>

<style lang="scss">

</style>

6 前端操作数据库

unicloud-db组件简介 | uni-app官网

在列表页面，如果想删除一个item，原本要做很多事：

弹出删除确认框
弹出loading
调用clientDB的js api删除云端数据
接收云端删除结果，如果成功则关闭loading
进一步删除列表的data中对应的item，自动刷新页面

为减少重复开发，unicloud-db组件提供了remove方法，在列表渲染时绑定好index，直接调用remove方法即可一行代码完成上述5步。

从数据库删除数据

<template>
	<view>
		<!-- collection  数据表名称 -->
		<!-- data 获得的数据 -->
		<unicloud-db ref="udb" 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 in data" :key="item._id" 
					:title="item.name" 
					:note="item.phone"
					link
					@longpress.native="rmItem(item._id)"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		methods:{
            // 删除
			rmItem(id){
				this.$refs.udb.remove(id)
			}
		}
	}
</script>

打开数据表删除权限, 上传DB到服务器, 删除成功

往数据库增加数据(将数据表增删改查权限打开)

<template>
	<view>
		<uni-easyinput  v-model="item.name" placeholder="" />
		<uni-easyinput  v-model="item.phone" placeholder="" />
		<button type="default" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					"name":"",
					"phone":""
				}
			}
		},
		methods: {
			submit(){
				const db = uniCloud.database()
				db.collection('contacts').add(this.item).then(e=>{
					console.log('e')
				})
			}
		}
	}
</script>

[本地调试]"VALIDATION_ERROR: 数据库验证失败：提交的字段[\"name\",\"phone\"]在本地数据表的schema文件中不存在"

完善表结构字段

[本地调试]"[clientDB请求]表名：contacts，返回数据：" {"code":0,"errCode":0,"message":"","errMsg":"","systemInfo":Array(0)}

更新数据库

<template>
	<view>
		<uni-easyinput  v-model="item.phone" placeholder="" />
		<button type="default" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					"_id":"",
					"name":"",
					"phone":""
				}
			}
		},
		onLoad(item) {
			this.item = JSON.parse(item)
		},
		methods: {
			submit(){
				const db = uniCloud.database()
				let item = {...this.item}
				delete item._id
				db.collection('contacts').doc(this.item._id).update(this.item).then(e=>{
					console.log('e')
				})
			}
		}
	}
</script>