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

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

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

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

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

    

显示页面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/viewview wx:else="{{books}}" class='none'      text 暂时没有图书!/text/viewview 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

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

 

 

 

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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