uniapp云开发实现增删查改

1、先前步骤

使用hbuilderX创建云开发项目

 创建完成后目录如图所示

2、连接数据库 

创建云数据库，并且连接

3、通过get请求获取数据库数据

建立成功后

 编写get下的index.js，获取数据库数据

'use strict';
// 连接云数据库
const db=uniCloud.database()
exports.main = async (event, context) => {
	// 连接users表，get()方法，获取表中所有数据
	let res=await db.collection('users').get()
	//返回数据给客户端
	return res
};

 编写方法调用get云函数

// 编写点击事件
async useGetYun(){
	// 调用云函数
	let result = await uniCloud.callFunction({
		// 访问get这个云函数
		name:'get'
	})
	console.log(result);
}

获取结果（数据库内容不同，这点不用相同）

通过不同的查询语句得到不同的结果

// 查找指定id的用户
let res=await db.collection('users').doc('636ba3ed8656970001dff69f').get()

// where查询（sex为男）
let res = await db.collection('users').where({sex:"男"}).get()

4、往数据表中增加数据

数据格式为下图所示

表单设置 

<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				<view class="title">选择性别</view>
				<radio-group name="sex">
					<label>
						<radio value="男" /><text>男</text>
					</label>
					<label>
						<radio value="女" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">选择爱好</view>
				<checkbox-group name="like">
					<label>
						<checkbox value="唱歌" /><text>唱歌</text>
					</label>
					<label>
						<checkbox value="跳舞" /><text>跳舞</text>
					</label>
					<label>
						<checkbox value="rap" /><text>rap</text>
					</label>
				</checkbox-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">输入手机号</view>
				<input class="uni-input" name="phone" placeholder="这是一个输入框" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">输入年龄</view>
				<input class="uni-input" name="age" placeholder="这是一个输入框" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">输入姓名</view>
				<input class="uni-input" name="name" placeholder="这是一个输入框" />
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">Submit</button>
				<button type="default" form-type="reset">Reset</button>
			</view>
		</form>

 表单输入要增加的数据

编写提交表单函数

新建云函数为post

// 表单提交函数
async formSubmit(e) {
	console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
	this.userform = e.detail.value
	console.log(this.userform);
				
	// 把对象交给数据库
	let result=await uniCloud.callFunction({
		name:'post',
		data:this.userform
	})
},

 编写提交的jql语句，编写post云函数

'use strict';
const db=uniCloud.database()
exports.main = async (event, context) => {
	//event为客户端上传的参数(data)
	console.log('event : ', event)
	let res=await db.collection('users').add(event)
	//返回数据给客户端
	return event
};

增加数据成功

5、把用户数据用表格进行展示出来

新建tabBar页面

"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "主页"
			},
			{
				"pagePath": "pages/showdata/showdata",
				"text": "数据展示"
			}
		]
	}

 注册新页面

{
	"path": "pages/showdata/showdata",
	"style": {
		"navigationBarTitleText": "用户数据展示"
	}
}

编写新页面

<template>
	<view>
		<radio-group @change="radioChange">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left">操作</uni-th>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">性别</uni-th>
					<uni-th align="center">手机号</uni-th>
					<uni-th align="center">年龄</uni-th>
					<uni-th align="center">爱好</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in userlist" :key="item._id">
					<uni-td>
						<radio :value="item._id" />
					</uni-td>
					<uni-td>{
   
   {item.name}}</uni-td>
					<uni-td>{
   
   {item.sex}}</uni-td>
					<uni-td>{
   
   {item.phone}}</uni-td>
					<uni-td>{
   
   {item.age}}</uni-td>
					<uni-td>{
   
   {item.like}}</uni-td>
				</uni-tr>
			</uni-table>
		</radio-group>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				userlist: []
			}
		},
		methods: {
			// 编写点击时间
			async useGetYun() {
				// 调用云函数
				let result = await uniCloud.callFunction({
					// 访问get这个云函数
					name: 'get'
				})
				// 获取到的数据
				// console.log(result.result.data);
				this.userlist = result.result.data
			},
			radioChange(e) {
				// 每个用户的id
				console.log(e.detail.value);
				
			}
		},
		onLoad() {
			this.useGetYun()
		}
	}
</script>

<style>

</style>

效果展示，在切换用户选项时，获取用户的id

 7、实现删除数据

创建删除的云函数，并且编写

'use strict';
const db=uniCloud.database()
exports.main = async (event, context) => {
	//event为客户端上传的参数
	let {userid}=event
	// 删除的jql语句，根据id删除
	let res=await db.collection('users').doc(userid).remove()
	// 成功删除的条数
	if(res.deleted==1){
		return {status:0}
	}else{
		return {status:1}
	}
};

vue页面删除函数执行

// 确定删除当前选定的用户
async deleteselectuser(userid){
	let result=await uniCloud.callFunction({
		name:'deletebyid',
        //传入的参数要是对象形式
		data:{userid}
	})
	// 删除成功
	if(result.result.status=='0'){
		// 重新获取数据
		this.useGetYun()
		// 数据对象制空
		this.userdata={}
		// 关闭弹出层
		this.$refs.popup.close()
		// 删除成功提示
		uni.showToast({
			title:'删除成功',
			icon:'success'
		})
	}
}

8、实现修改数据

创建修改云函数updateuser

'use strict';
const db=uniCloud.database()
exports.main = async (event, context) => {
	// 把传过来的对象取出id
	let {_id}=event
	// 删除对象里面的id属性，因为不能修改id
	delete event._id
	// 执行修改的jql语句
	let result=await db.collection('users').doc(_id).update(event)
	//返回修改后的结果
	if(result.updated==1){
		return {status:0}
	}else{
		return {status:1}
	}
};

 vue函数执行编写

// 将新数据提交表单
async submit(){
	// 调用update云函数
	let result=await uniCloud.callFunction({
		name:'updateuser',
		// 新的数据对象
		data:this.userdata
	})
	// 修改成功
	if(result.result.status==0){
		uni.showToast({
			title:'修改成功',
			icon:'success'
		})
		// 跳转页面，重新加载数据
		uni.reLaunch({
			url:'/pages/showdata/showdata'
		})
	}
}

9、总结

获取用户表的所有数据

// 连接users表，get()方法，获取表中所有数据
let res=await db.collection('users').get()

根据用户id查找数据

let res=await db.collection('users').doc(id).get()

根据id删除用户数据

// 删除的jql语句，根据id删除
let res=await db.collection('users').doc(userid).remove()

增加用户数据

// event为要增加的对象
let res=await db.collection('users').add(event)

根据id修改数据（id,要修改的对象）

let result=await db.collection('users').doc(_id).update(event)

where查询（查询表中所有sex：男的数据）

let result = await db.collection('users').where({sex:"男"}).get()

查找带有name字段的所有数据

let result = await db.collection('users').field({"name":true}).get()

查询年龄大于20  eq(=),neq(!=),gt(>)

const db=uniCloud.database()
const dbcmd=db.command
let result=await db.collection('users').where({age:dbcmd.gt(20)}).get()
let result=await db.collection('users').where({
  age:dbcmd.and(dbcmd.gt(10),dbcmd.lt(30))
}).get()