uniCloud 入门前端数据库

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，原本要做很多事：

1. 弹出删除确认框
2. 弹出loading
3. 调用clientDB的js api删除云端数据
4. 接收云端删除结果，如果成功则关闭loading
5. 进一步删除列表的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>