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()