微信小程序> 微信小程序之云开发模拟后台增删改查-微信小程序云开发实例-腾讯云微信小程序

微信小程序之云开发模拟后台增删改查-微信小程序云开发实例-腾讯云微信小程序

浏览量:2843 时间: 来源:山间木匠

1.小程序云开发出来之后,小程序开发人员也要慢慢的接触后端对数据的增删改查了。下面就给大家提供一个案例吧。

2.这里我把新增和修改放在了一个页面

3.显示页面index.wxml

viewwx:if="{{books}}"class='container'viewclass='title'text图书列表/text/viewviewclass='label'text书名/texttext作者/texttext价格/texttext操作/text/viewblockwx:for="{{books}}"wx:key=""viewclass='content'text{{item.name}}/texttext{{item.author}}/texttext{{item.price}}/textbuttonclass='del'data-id='{{item._id}}'bindtap='onDel'删除/buttonbuttonclass='update'data-id='{{item._id}}'bindtap='onUpdate'修改/button/view/block/viewviewwx:else="{{books}}"class='none'text暂时没有图书!/text/viewviewclass='add'buttonbindtap='goSet'添加图书/button/view

4.index.js

//pages/index/index.jsPage({/***页面的初始数据*/data:{books:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){constdb=wx.cloud.database()db.collection("books").get({success:res={this.setData({books:res.data})},fail:err={wx.showToast({icon:"none",title:'查询记录失败',})}})},goSet:function(){wx.navigateTo({url:'../set/set',})},onDel:function(e){letid=e.currentTarget.dataset.idconstdb=wx.cloud.database();db.collection("books").doc(id).remove({success:res={wx.showToast({title:'删除成功',})this.onLoad()//删除成功重新加载},fail:err={wx.showToast({title:'删除失败',})}})console.log(id)},onUpdate:function(e){letid=e.currentTarget.dataset.idwx.navigateTo({url:'../set/set?id='+id,})}})

5.添加和修改共用set.wxml

!--pages/set/set.wxml--viewclass='container'formbindsubmit='comfirm'viewclass='input-container'label书名:/labelinputstyle='display:none'data-value='{{id}}'name="id"value='{{book._id}}'/inputinputdata-value='{{name}}'name="name"value='{{book.name}}'/input/viewviewclass='input-container'label作者:/labelinputdata-value='{{author}}'name="author"value='{{book.author}}'/input/viewviewclass='input-container'label价格:/labelinputdata-value='{{price}}'name="price"value='{{book.price}}'/input/viewviewclass='comfirm'buttonform-type='submit'保存/button/view/form/view

6.set.js

//pages/set/set.jsPage({/***页面的初始数据*/data:{book:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){if(options.id){constdb=wx.cloud.database();db.collection("books").where({_id:options.id}).get({success:res={this.setData({book:res.data[0]//返回的是一个数组,取第一个})},fail:err={console.log(err)}})}},comfirm:function(e){constdb=wx.cloud.database()//打开数据库连接letbook=e.detail.valueif(book.id==""){//id等于空是新增数据this.add(db,book)//新增记录}else{this.update(db,book)//修改记录}},add:function(db,book){db.collection("books").add({data:{name:book.name,author:book.author,price:parseFloat(book.price)},success:res={wx.showToast({title:'新增记录成功',})wx.navigateTo({url:'../index/index',})},fail:err={wx.showToast({title:'新增失败',})}})},update:function(db,book){db.collection("books").doc(book.id).update({data:{name:book.name,author:book.author,price:parseFloat(book.price)},success:res={wx.showToast({title:'修改记录成功',})wx.navigateTo({url:'../index/index',})},fail:err={wx.showToast({title:'修改失败',})}})}})

7.云开发后台数据,需要手动添加books集合:

8.github地址:https://github.com/gurenla/wechat

版权声明

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

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