微信小程序云开发之模拟后台增删改查

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

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

显示页面index.wxml

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

index.js

// pages/index/index.jsPage({  /**  * 页面的初始数据  */ data: {   books:[]  },  /**  * 生命周期函数--监听页面加载  */ onLoad: function (options) {  const db = 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){   let id = e.currentTarget.dataset.id   const db = 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){   let id = e.currentTarget.dataset.id   wx.navigateTo({    url: '../set/set?id='+id,   }) }})

添加和修改共用set.wxml

<!--pages/set/set.wxml--><view class='container'>   <form bindsubmit='comfirm' >    <view class='input-container'>      <label>书名：</label>      <input style='display:none' data-value='{{id}}' name="id" value='{{book._id}}'></input>      <input data-value='{{name}}' name="name" value='{{book.name}}'></input>    </view>    <view class='input-container'>      <label>作者：</label>      <input data-value='{{author}}' name="author" value='{{book.author}}'></input>    </view>    <view class='input-container'>      <label>价格：</label>      <input data-value='{{price}}'  name ="price" value='{{book.price}}'></input>    </view>    <view class='comfirm'>      <button  form-type='submit'>保存</button>   </view>  </form></view>