微信小程序> 微信小程序云开发入门5之数据库的增删改查删-微信小程序开发库-小程序界面开发

微信小程序云开发入门5之数据库的增删改查删-微信小程序开发库-小程序界面开发

浏览量:1860 时间: 来源:谁都不许动我的砖
1.

1.先放出删除效果图

2.

2.思路我不知道你们还是否记得我在上一篇中提到了页面跳转传值的那个伏笔。如果您已经忘记,可以翻到上一篇博客中我提到的东西,但详细用法我还会在后续详细讲解。这一篇还是只注重对数据的删除操作。

3.

首先我们在上一个页面find文件夹中被索引(配合我的源码看效果更棒哦)在这个文件夹下的find.wxml中,也就是如下图片中的代码。我增加了一句页面跳转的代码,看代码中的url非常容易理解为我点击navigator包裹区域后,会跳转到url:…/user/user这个页面,而后面的_id{{item.id}}则是我设置_id(定义的一个新的变量)等于我查询到的_id(通过{{item._id}}),{{item._id}}是数据库里面的_id。相当于我把查询到的item._id赋值给定义的新变量_id。

4.

这里在user.js中我们借助函数onLoad:function(options),来完成最终的删除操作3.wxml部分我们从find.wxml跳转到user.wxml后我们想呈现的是点击用户后可以跳转到点击用户的详细信息(这里利用前面传过来的用户_id,又进行一次查询操作,查询完毕显示详细用户信息),所以代码如下

viewclass"content1"wx:for"{{userPart}}"wx:key"{{userPart}}"textclass"textMeth1"姓名:/texttextclass"textMeth2"{{item.name}}/texttextclass"textMeth1"已购买:/texttextclass"textMeth2"{{item.number}}盒/texttextclass"textMeth1"症状:/texttextclass"textMeth2"{{item.symptom}}/texttextclass"textMeth1"年龄:/texttextclass"textMeth2"{{item.age}}/texttextclass"textMeth1"发病时长:/texttextclass"textMeth2"{{item.time}}/text/view5.

查询到详细用户信息后我还想就在当前页面直接把用户删除或修改,所以我又加入了删除修改按钮。代码如下

viewclass"buttonPart"buttonbindtap"delPart"注销账户/buttonbutton修改账户/button/view6.

4.js部分在上一篇,我们利用了navigator传来了数据库里_id的值,这里我们需要进行一次赋值操作。

7.

下面代码是加载中就执行的函数,这段函数实现了前端页面的详细信息展示。

onLoad:function(options){//给全局变量赋值,这样在加载的时候就可以完成赋值操作。在这里我们是给numberFunction赋值//这里赋值的目的是想把传进来的_id利用查询数据库把这名患者的所有信息体现在前端页面里面。//并且我还需要在其他函数里面利用这个_id,所以进行一次全局变量赋值的操作。varthatthis;//赋值完成app.globalData.numberFunctionoptions._id;constdbwx.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)}})},8.

下面这段代码是点击删除后,我们对微信云数据库执行删除操作。

delPart:function(){console.log("执行删除操作")console.log(app.globalData.numberFunction)constdbwx.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})}})},9.

5.以下为我的数据库删除操作的全部代码wxml部分

viewclass"content1"wx:for"{{userPart}}"wx:key"{{userPart}}"textclass"textMeth1"姓名:/texttextclass"textMeth2"{{item.name}}/texttextclass"textMeth1"已购买:/texttextclass"textMeth2"{{item.number}}盒/texttextclass"textMeth1"症状:/texttextclass"textMeth2"{{item.symptom}}/texttextclass"textMeth1"年龄:/texttextclass"textMeth2"{{item.age}}/texttextclass"textMeth1"发病时长:/texttextclass"textMeth2"{{item.time}}/text/viewviewclass"buttonPart"buttonbindtap"delPart"注销账户/buttonbutton修改账户/button/view10.

js部分

//pages/user/user.jsconstappgetApp()Page({/***页面的初始数据*/data:{userPart:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){//给全局变量赋值,这样在加载的时候就可以完成赋值操作。在这里我们是给numberFunction赋值//这里赋值的目的是想把传进来的_id利用查询数据库把这名患者的所有信息体现在前端页面里面。//并且我还需要在其他函数里面利用这个_id,所以进行一次全局变量赋值的操作。varthatthis;//赋值完成app.globalData.numberFunctionoptions._id;constdbwx.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)constdbwx.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(){}})11.

如有错误,欢迎大家指出。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎