12、云数据库增删查改详细案例
- 1. 案例功能分析
- 2. 学生列表页携带id数据跳转到对应学生详情页
- 3. 添加编译模式,提升开发效率
- 4. 动态增加一条记录
- 5. 更新学生记录信息
- 6. 弹窗提示确认是否删除
- 7、删除商品
- 附主列表跳详情页及增删查改全代码
1. 案例功能分析
- 能查看学生信息
- 能动态增加学生记录
- 能进入学生详细信息页
- 能删除某个学生记录
- 能修改某个学生综合成绩
2. 学生列表页携带id数据跳转到对应学生详情页
- 在标签内使用data-携带数据
<view wx:for="{{list}}">
<view bindtap="goDetail" data-name="{{item.name}}">姓名: {{item.name}} ,性别: {{item.sex}},综合成绩: {{item.score}}</view>
</view>
- 在js文件中的点击方法里拿到要绑定的数据
goDetail(e){
console.log("点击了列表跳详情页",e.currentTarget.dataset.name)
}
运行截图:
- 通过点击事件的js响应函数实现跳转(跳转时携带id数据)
-详情页接收列表页携带的数据
3. 添加编译模式,提升开发效率
普通编译时会默认进入app.json中设置的主页,假如我们在代码开发想在编译后进入直接进入某个页面而不是主页,可以通过添加编译模式方法。
添加编译模式方法:
4. 动态增加一条记录
通过输入框获取数据,然后添加记录。
代码:三个文件wxml、js、wxss
<!--pages/demo03/demo03.wxml-->
<view class="content">
<view class='text-title'>增加记录</view>
ID:
<input bindinput="getID"></input>
姓名:
<input bindinput="getName"></input>
性别:
<input bindinput="getSex"></input>
综合成绩:
<input bindinput="getScore"></input>
<button bindtap="addStu" type="primary">添加记录</button>
</view>
/* pages/demo03/demo03.wxss */
.content{
border:1rpx solid gray
}
.text-title{
text-align:center;
}
input{
border:1rpx solid rgb(19, 6, 34)
}
// pages/demo03/demo03.js
let id=''
let name=''
let sex=''
let score=0
Page({
//获取本次记录ID
getID(e){
id=e.detail.value
},
//获取输入姓名
getName(e){
name=e.detail.value
},
//获取输入性别
getSex(e){
sex=e.detail.value
},
//获取输入成绩
getScore(e){
score=e.detail.value
},
//添加记录
addStu(){
if(id == ''){
wx.showToast({
icon:'none',
title: 'ID为空了',
})
}else if(name == ''){
wx.showToast({
icon:'none',
title: '名字为空了',
})
}else if(sex == ''){
wx.showToast({
icon:'none',
title: '性别信息为空了',
})
}else if(score == 0){
wx.showToast({
icon:'none',
title: '成绩信息为0',
})
}else{
console.log('ID',id)
console.log('姓名',name)
console.log('性别',sex)
console.log('成绩',score)
wx.cloud.database().collection('stu')
.add({
data:{
_id:id,
name:name,
sex:sex,
score:score
}
})
.then(res =>{
console.log("列表更新成功")
})
.catch(err =>{
console.log("列表更新失败")
})
}
}
})
5. 更新学生记录信息
在知道学生身份信息id的情况下,更新学生成绩。在下面js文件中需手动设置id值。
注意:更新时由于表的权限问题,用户只能更新自己创建的记录,更新其他人创建的记录会更新失败。通过云函数可以解决这个问题。
代码:三个文件wxml、js、wxss
<!--pages/demo03-2/demo03-2.wxml-->
更新学生成绩:
<input bindinput="getNewScore"></input>
<button bindtap="updateStu" type="primary">修改记录</button>
/* pages/demo03-2/demo03-2.wxss */
input{
border:1rpx solid rgb(19, 6, 34)
}
// pages/demo03-2/demo03-2.js
let score=0
let id=''
Page({
data: {
stu:{}
},
onLoad: function (options) {
id = options.id,
this.getItemDetail()
},
getItemDetail(){
wx.cloud.database().collection('stu').doc(id).get()
.then( res =>{
console.log("商品详情页请求成功",res)
this.setData({
stu:res.data
})
})
.catch( err =>{
console.log('商品详情页请求失败',err)
})
},
//获取待更新的成绩信息
getNewScore(e){
score=e.detail.value
},
updateStu(){
console.log(score)
if(score == ''){
wx.showToast({
icon:'none',
title: '更新成绩为空了',
})
}else{
wx.cloud.database().collection('stu').doc(id)
.update({
data:{
score:score
}
})
.then(res =>{
console.log("记录更新成功"),
this.getItemDetail()
})
.catch(err =>{
console.log("记录更新失败")
})
}
}
})
6. 弹窗提示确认是否删除
wx.showModal({
title:'是否确认删除?',
content:"您再仔细想一想,删除后就没了!",
success(res){
if(res.confirm == true){ //用户点击了确定
console.log("确认删除")
}else if(res.cancel ==true){//用户点击了取消
console.log("取消删除")
}
}
})
7、删除商品
删除给定id的学生信息。
// pages/demo03-2/demo03-2.js
let id=''
Page({
deleteStu(){
wx.showModal({
title:'是否确认删除?',
content:"您再仔细想一想,删除后就没了!",
success(res){
if(res.confirm == true){ //用户点击了确定
wx.cloud.database().collection('stu').doc(id).remove()
.then(res =>{
wx.navigateTo({
url: '/pages/demo03/demo03',
})
})
.catch(err =>{
console.log("删除失败",err)
})
}else if(res.cancel ==true){//用户点击了取消
console.log("取消删除")
}
}
})
}
})
附主列表跳详情页及增删查改全代码
<!--pages/demo03/demo03.wxml-->
<view class="content">
<view class='text-title'>查询结果显示</view>
<view wx:for="{{list}}" wx:key="_id">
<view bindtap="goDetail" data-id="{{item._id}}">ID: {{item._id}} ,姓名: {{item.name}} ,性别: {{item.sex}},成绩: {{item.score}}</view>
</view>
</view>
<view class="content">
<view class='text-title'>增加记录</view>
ID:
<input bindinput="getID"></input>
姓名:
<input bindinput="getName"></input>
性别:
<input bindinput="getSex"></input>
综合成绩:
<input bindinput="getScore"></input>
<button bindtap="addStu" type="primary">添加记录</button>
</view>
/* pages/demo03/demo03.wxss */
.content{
border:1rpx solid gray
}
.text-title{
text-align:center;
}
input{
border:1rpx solid rgb(19, 6, 34)
}
// pages/demo03/demo03.js
let id=''
let name=''
let sex=''
let score=0
Page({
data: {
list:[]
},
onLoad: function (options) {
this.getList()
},
getList(){
wx.cloud.database().collection('stu').get()
.then( res =>{
console.log("success",res)
this.setData({
list:res.data
})
})
.catch( err =>{
console.log('error',err)
})
},
//跳转到商品详情页
goDetail(e){
console.log("点击了列表跳详情页id",e.currentTarget.dataset.id)
wx.navigateTo({
url: '/pages/demo03-2/demo03-2?id='+e.currentTarget.dataset.id,
})
},
//获取本次记录ID
getID(e){
id=e.detail.value
},
//获取输入姓名
getName(e){
name=e.detail.value
},
//获取输入性别
getSex(e){
sex=e.detail.value
},
//获取输入成绩
getScore(e){
score=e.detail.value
},
//添加记录
addStu(){
if(id == ''){
wx.showToast({
icon:'none',
title: 'ID为空了',
})
}else if(name == ''){
wx.showToast({
icon:'none',
title: '名字为空了',
})
}else if(sex == ''){
wx.showToast({
icon:'none',
title: '性别信息为空了',
})
}else if(score == 0){
wx.showToast({
icon:'none',
title: '成绩信息为0',
})
}else{
console.log('ID',id)
console.log('姓名',name)
console.log('性别',sex)
console.log('成绩',score)
wx.cloud.database().collection('stu')
.add({
data:{
_id:id,
name:name,
sex:sex,
score:score
}
})
.then(res =>{
this.getList()
})
.catch(err =>{
console.log("列表更新失败")
})
}
}
})
<!--pages/demo03-2/demo03-2.wxml-->
<view>ID: {{stu._id}} ,姓名: {{stu.name}} ,性别: {{stu.sex}},成绩: {{stu.score}}</view>
更新学生成绩:
<input bindinput="getNewScore"></input>
<button bindtap="updateStu" type="primary">修改记录</button>
<button bindtap="deleteStu" >删除记录</button>
/* pages/demo03-2/demo03-2.wxss */
input{
border:1rpx solid rgb(19, 6, 34)
}
// pages/demo03-2/demo03-2.js
let score=0
let id=''
Page({
data: {
stu:{}
},
onLoad: function (options) {
id = options.id,
this.getItemDetail()
},
getItemDetail(){
wx.cloud.database().collection('stu').doc(id).get()
.then( res =>{
console.log("商品详情页请求成功",res)
this.setData({
stu:res.data
})
})
.catch( err =>{
console.log('商品详情页请求失败',err)
})
},
//获取待更新的成绩信息
getNewScore(e){
score=e.detail.value
},
updateStu(){
console.log(score)
if(score == ''){
wx.showToast({
icon:'none',
title: '更新成绩为空了',
})
}else{
wx.cloud.database().collection('stu').doc(id)
.update({
data:{
score:score
}
})
.then(res =>{
console.log("记录更新成功"),
this.getItemDetail()
})
.catch(err =>{
console.log("记录更新失败")
})
}
},
deleteStu(){
wx.showModal({
title:'是否确认删除?',
content:"您再仔细想一想,删除后就没了!",
success(res){
if(res.confirm == true){ //用户点击了确定
wx.cloud.database().collection('stu').doc(id).remove()
.then(res =>{
wx.navigateTo({
url: '/pages/demo03/demo03',
})
})
.catch(err =>{
console.log("删除失败",err)
})
}else if(res.cancel ==true){//用户点击了取消
console.log("取消删除")
}
}
})
}
})
运行截图:
列表页:
详情页: