unicloud初级入门05-数据库add记录_unicloud addmany-CSDN博客

本文链接：https://blog.csdn.net/modern358/article/details/135038441

文章介绍了如何在uniCloud中创建两个云函数，一个用于添加用户数据到数据库，另一个用于处理前端表单提交，展示了前后端协作的实践示例。

摘要由CSDN通过智能技术生成

分别新建2个云函数

'use strict';
exports.main = async (event, context) => {
	//获取数据库
	const db = uniCloud.database();
	//新增数据
	let res = await db.collection("user").add({
		name:'小明',
		gender:'男',
		tel:'110'
	});
	return res;
};

'use strict';
exports.main = async (event, context) => {
	let {name,tel} = event;
	const db = uniCloud.database();
	let res = await db.collection("user").add({
		name: name,
		tel: tel
	});
	return res;
};

<template>
	<view class="test1">
		<view class="row" v-for="item in userList" :key="item._id">
			<text class="txt">name:{{item.name}}</text>
			<text class="txt">gender:{{item.gender}}</text>
			<text class="txt">tel:{{item.tel}}</text>
			<text class="txt">email:{{item.email}}</text>
		</view>
		<button type="default" @tap="addNew">新增一个</button>
		<form @submit="onsubmit">
			<input type="text" name="name" class="input" placeholder="name"/>
			<input type="text" name="tel" class="input" placeholder="tel"/>
			<button type="default" form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList:[]
			};
		},
		onLoad() {
			uniCloud.callFunction({
				name:"clouddemo1",
				data: {}
			}).then(res=>{
				//console.log(res);
				this.userList = res.result.data;
			})
		},
		methods:{
			onsubmit(e){
				//console.log(e)
				let obj = e.detail.value;
				uniCloud.callFunction({
					name:"clouddemo3",
					data: obj
				}).then(res=>{
					console.log(res)
					window.location.reload();
				})
				
			},
			addNew(){
				uniCloud.callFunction({
					name:"clouddemo2",
					data:{}
				}).then(res=>{
					console.log(res);
					window.location.reload();
				})
			}
		}

	}
</script>

<style lang="scss">
.test1{
	
	.row{
		padding: 30rpx;
		border-bottom: 1px solid #ccc;
		.txt{
			padding: 0 10rpx;
		}
	}
	
	.input{
		width: 80%;
		height: 40rpx;
		line-height: 40rpx;
		border: 1px solid #ccc;
		padding: 0 30rpx;
	}
}
</style>

结果图示