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

<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>

// 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,   }) }})

<!--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>

// pages/set/set.jsPage({  /**  * 页面的初始数据  */ data: {   book:[] },  /**  * 生命周期函数--监听页面加载  */ onLoad: function (options) {  if(options.id){   const db = 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){  const db = wx.cloud.database()//打开数据库连接  let book = e.detail.value  if(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: '修改失败',    })   }  }) }  })