uni-app을 사용하여 uniCloud 클라우드 데이터베이스 시작하기: 간단한 추가, 삭제, 수정 및 쿼리 구현

공식 클라우드 데이터베이스 문서

사전 단계: uni-app을 사용하여 새로운 uniCloud 프로젝트를 생성합니다

[외부 링크 이미지 전송 실패, 소스 사이트에 도난 방지 공식 클라우드 데이터베이스 문서가 있을 수 있습니다]!링크 메커니즘은 () https://uniapp을 권장합니다. dcloud.net.cn/uniCloud /hellodb.html)]

새 테이블 만들기

여기에 몇 가지 테스트 필드인 createTime, Remark, Money를 추가했습니다.

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
    
    
	"bsonType": "object",
	"required": [],
	"permission": {
    
    
		"read": true,
		"create": true,
		"update": true,
		"delete": true
	},
	"properties": {
    
    
		"_id": {
    
    
			"description": "ID，系统自动生成"
		},
		"createTime":{
    
    
			"bosnType":"string"
		},
		"remark":{
    
    
			"bosnType":"string"
		},
		"money":{
    
    
			"bosnType":"number"
		}
	}
}

효과

완전한 코드

<template>
	<view>
		<input v-model="form.remark" placeholder="备注" type="text">
		<input v-model="form.money" type="number" placeholder="金额">
		<button @click="clickAdd">新增</button>

		<view class="list" v-for="item in list" :key="item._id">
			{
   
   {item.remark}}
			<button style="width:2em;" @click="clickDelete(item._id)">删除</button>
		</view>
	</view>
</template>

<script setup>
	import {
      
      
		reactive,
		ref
	} from 'vue';
	import {
      
      
		onShow
	} from "@dcloudio/uni-app"
	const form = reactive({
      
      
		remark: '',
		money: 0
	})
	const list = ref([]);
	const db = uniCloud.database()

	// 新增
	function clickAdd() {
      
      
		db.collection('list').add({
      
      
			createTime: new Date(),
			remark: form.remark,
			money: form.money
		}).then((res) => {
      
      
			getList()
			// uni.navigateBack()
		}).catch((err) => {
      
      
			uni.showModal({
      
      
				content: err.message || '请求服务失败',
				showCancel: false
			})
		})
	}

	onShow(() => {
      
      
		getList();
	})

	// 列表查询
	async function getList() {
      
      
		let {
      
      
			result
		} = await db.collection("list").get();
		console.log(result)
		list.value = result.data;
	}

	async function clickDelete(_id) {
      
      
		await db.collection("list").doc(_id).remove();
		getList()
	}
</script>

<style scoped>
	.list {
      
      
		color: #000;
		background-color: pink;
		margin-bottom: 36rpx;
	}
</style>