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

小程序云开发出来之后，小程序开发人员也要慢慢的接触后端对数据的增删改查了。下面就给大家提供一个案例吧。这里我把新增和修改放在了一个页面    显示页面index.wxmlview 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/viewview wx:else=”{{books}}” class=’none’      text 暂时没有图书！/text/viewview class=’add’    button  bindtap=’goSet’添加图书/button/viewindex.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/viewset.js// 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: ‘修改失败’,        })      }    })  } })云开发后台数据，需要手动添加books集合：github地址：https://github.com/gurenla/wechat