unicloud使用教程

// 创建项目uniapp，使用阿里云，点击unicloud文件右键关联云服务空间，cloudfunctions文件右键新建云函数queryall.js,写完后上传部署
'use strict';
exports.main = async (event, context) => {
	const db = uniCloud.database().collection('test')
	switch (event.only){
		case 'all':
			return await db.get()
		break;
		
		case 'conditionquery':
			return await db.where({ name:event.name }).get()
		break;
		
		case 'add':
			return await db.add({
				name:event.name,
				age:event.age,
				skill:event.skill
			})
		break;
		case 'delete':
			return await db.doc(event.id).remove()
		break;
		
		case 'editid':
			return await db.where({_id:event.id}).get()
		break;
		
		case 'edit':
			return await db.where({_id:event.id}).update({
				name:event.name,
				age:event.age,
				skill:event.skill,
			})
		break;
		default:
			break;
	}
};

// 点击database文件右键创建db_init.json

{
	"test": { // test为表名
		"data": [ // 表中数据
			{
				"name": "路飞",
				"age": "19",
				"skill": "猿王枪"
			}, {
				"name": "索隆",
				"age": "20",
				"skill": "狮子歌歌"
			}, {
				"name": "山治",
				"age": "20",
				"skill": "恶魔疯脚"
			}
		]
	},
	"content":{}
}

// 在database文件下新建test.schema.json文件

{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": true,
		"create": true,
		"update": true,
		"delete": true
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		}
	}
}

// 页面代码

<template>
	<view class="container">
		<view style="display: flex;">
			<input v-model="queryval" style="width:350rpx;border: #18BC37 2rpx solid;" type="text" placeholder="请输入" />
			<button @click="querybtn" size="mini" type="primary">查询</button>
			<button @click="$refs.popup.open('top')" size="mini" type="default">新增</button>
		</view>
		<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
			<uni-tr>
				<uni-th width="40" align="center">名字</uni-th>
				<uni-th width="40" align="center">年龄</uni-th>
				<uni-th width="60" align="center">绝招</uni-th>
				<uni-th width="10" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="item of list" :key="item._id">
				<uni-td align="center">{{ item.name }}</uni-td>
				<uni-td align="center">{{ item.age }}</uni-td>
				<uni-td align="center">{{ item.skill }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<button @click="editbtn(item._id)" class="uni-button" size="mini" type="primary">修改</button>
						<button @click="deletebtn(item._id)" class="uni-button" size="mini" type="warn">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 弹框 -->
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="tan">
				<uni-forms>
					<uni-forms-item label="姓名">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="年龄">
						<uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="绝招">
						<uni-easyinput type="text" v-model="formData.skill" placeholder="请输入绝招" />
					</uni-forms-item>
				</uni-forms>
				<view style="display: flex;">
					<button @click="addbtn" style="width:260rpx" type="primary">确定</button>
					<button @click="cancelbtn" style="width:260rpx" type="default">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryval: '',
			list: [],
			formData:{
				name:'',
				age:'',
				skill:''
			},
			id:null,
		};
	},
	watch: {
		queryval(q, w) {
			this.queryval === '' && this.all();
		}
	},
	onLoad() {
		this.all();
	},
	methods: {
		// 初始化
		all() {
			uniCloud.callFunction({
				name: 'queryall',
				data: {
					only: 'all'
				},
				success: res => {
					this.list = res.result.data;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 查询
		querybtn() {
			uniCloud.callFunction({
				name: 'queryall',
				data: {
					only: 'conditionquery',
					name: this.queryval
				},
				success: res => {
					this.list = res.result.data;
				},
				fail: err => console.log(err)
			});
		},
		// 新增
		addbtn() {
			const {name,age,skill}=this.formData
			if(this.id ===null){
				this.formData.name=''
				this.formData.age=''
				this.formData.skill=''
				uniCloud.callFunction({
					name:'queryall',
					data:{
						only:'add',
						name,
						age,
						skill
					},
					success:res=>{
						this.all()
					},
					fail:err=>console.log(err)
				})
			}else{
				uniCloud.callFunction({
					name:'queryall',
					data:{
						only:'edit',
						id:this.id,
						name:this.formData.name,
						age:this.formData.age,
						skill:this.formData.skill,
					},
					success:res=>{
						this.all()
						this.id=null
					},
					fail:err=>console.log(err)
				})
			}
			this.$refs.popup.close()
		},
		// 编辑
		editbtn(id){
			this.id=id
			console.log(this.id);
			this.$refs.popup.open('bottom');
			uniCloud.callFunction({
				name:'queryall',
				data:{
					only:'editid',
					id,
				},
				success:res=>{
					this.formData.name=res.result.data[0].name
					this.formData.age=res.result.data[0].age
					this.formData.skill=res.result.data[0].skill
					
				},
				fail:err=>console.log(err)
			})
		},
		// 删除
		deletebtn(id) {
			uniCloud.callFunction({
				name:'queryall',
				data:{
					only:'delete',
					id
				},
				success:res=>this.all(),
				fail:err=>console.log(err)
			})
		},
		// 取消按钮
		cancelbtn(){
			this.id=null
			this.formData.name=''
			this.formData.age=''
			this.formData.skill=''
			this.$refs.popup.close();
		},
		selectionChange(q) {
			console.log(q);
		},
		change(q) {
			console.log(q);
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
.tan {
	width: 700rpx;
	height: 600rpx;
	background-color: #ffffff;
	margin: 300rpx auto;
	border-radius: 20rpx;
	padding: 80rpx 40rpx;
	box-sizing: border-box;
}
</style>