微信小程序云开发入门(5)之数据库的增删改查(删)
1.先放出删除效果图
2.思路
我不知道你们还是否记得我在上一篇中提到了页面跳转传值的那个伏笔。如果您已经忘记，可以翻到上一篇博客中我提到的东西，但详细用法我还会在后续详细讲解。这一篇还是只注重对数据的删除操作。
首先我们在上一个页面find文件夹中被索引（配合我的源码看效果更棒哦）在这个文件夹下的find.wxml中，也就是如下图片中的代码。我增加了一句页面跳转的代码，看代码中的url非常容易理解为我点击navigator包裹区域后，会跳转到url：…/user/user这个页面，而后面的_id={{item.id}}则是我设置_id(定义的一个新的变量)等于我查询到的_id（通过{{item._id}}），{{item._id}}是数据库里面的_id。相当于我把查询到的item._id赋值给定义的新变量_id。
这里在user.js中我们借助函数onLoad: function(options)，来完成最终的删除操作
3.wxml部分
我们从find.wxml跳转到user.wxml后
我们想呈现的是点击用户后可以跳转到点击用户的详细信息(这里利用前面传过来的用户_id，又进行一次查询操作，查询完毕显示详细用户信息)，所以代码如下
姓名：
{{item.name}}\n
已购买:
{{item.number}}盒\n
症状：
{{item.symptom}}\n
年龄：
{{item.age}}\n
发病时长：
{{item.time}}\n
查询到详细用户信息后我还想就在当前页面直接把用户删除或修改，所以我又加入了删除修改按钮。
代码如下
4.js部分
在上一篇，我们利用了navigator传来了数据库里_id的值，这里我们需要进行一次赋值操作。
下面代码是加载中就执行的函数，这段函数实现了前端页面的详细信息展示。
onLoad: function(options) {
//给全局变量赋值，这样在加载的时候就可以完成赋值操作。在这里我们是给numberFunction赋值
//这里赋值的目的是想把传进来的_id利用查询数据库把这名患者的所有信息体现在前端页面里面。
//并且我还需要在其他函数里面利用这个_id，所以进行一次全局变量赋值的操作。
var that=this;
//赋值完成
app.globalData.numberFunction=options._id;
const db = wx.cloud.database()
db.collection('userData').where({
_id: options._id
}).get({
success: res => {
that.setData({
userPart: res.data,
number:options._id
})
this.setData({
queryResult: JSON.stringify(res.data, null, 2)
})
console.log("执行查询操作开始------------------")
// console.log(number)
console.log('[数据库] [查询记录] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查询记录失败'
})
console.error('[数据库] [查询记录] 失败：', err)
}
})
},
下面这段代码是点击删除后，我们对微信云数据库执行删除操作。
delPart: function (){
console.log("执行删除操作")
console.log(app.globalData.numberFunction)
const db = wx.cloud.database()
//根据全局变量app.globalData.numberFunction执行删除操作。
db.collection('userData').doc(app.globalData.numberFunction).remove({
success: function (res) {
wx.showToast({
title: '删除成功',
duration:2000
})
console.log("删除成功")
console.log(res.data)
},
fail:function(res){
wx.showToast({
title:"删除失败",
duration:2000
})
}
})
},
5.以下为我的数据库删除操作的全部代码
wxml部分
姓名：
{{item.name}}\n
已购买:
{{item.number}}盒\n
症状：
{{item.symptom}}\n
年龄：
{{item.age}}\n
发病时长：
{{item.time}}\n
js部分
// pages/user/user.js
const app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userPart:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//给全局变量赋值，这样在加载的时候就可以完成赋值操作。在这里我们是给numberFunction赋值
//这里赋值的目的是想把传进来的_id利用查询数据库把这名患者的所有信息体现在前端页面里面。
//并且我还需要在其他函数里面利用这个_id，所以进行一次全局变量赋值的操作。
var that=this;
//赋值完成
app.globalData.numberFunction=options._id;
const db = wx.cloud.database()
db.collection('userData').where({
_id: options._id
}).get({
success: res => {
that.setData({
userPart: res.data,
number:options._id
})
this.setData({
queryResult: JSON.stringify(res.data, null, 2)
})
console.log("执行查询操作开始------------------")
// console.log(number)
console.log('[数据库] [查询记录] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查询记录失败'
})
console.error('[数据库] [查询记录] 失败：', err)
}
})
},
delPart: function (){
console.log("执行删除操作")
console.log(app.globalData.numberFunction)
const db = wx.cloud.database()
db.collection('userData').doc(app.globalData.numberFunction).remove({
success: function (res) {
wx.showToast({
title: '删除成功',
duration:2000
})
console.log("删除成功")
},
fail:function(res){
wx.showToast({
title:"删除失败",
duration:2000
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
如有错误，欢迎大家指出。