微信小程序云開發(fā)之模擬后臺增刪改查

更新時間：2019年05月16日 15:22:26 作者：havendream

這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之模擬后臺增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序云開發(fā)出來之后，小程序開發(fā)人員也要慢慢的接觸后端對數(shù)據(jù)的增刪改查了。下面就給大家提供一個案例吧。

這里我把新增和修改放在了一個頁面

顯示頁面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.js
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
   books:[] 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 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.js
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
   book:[]
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 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]//返回的是一個數(shù)組，取第一個
     })
    },fail:err=>{
     console.log(err)
    }
   })
  }
 },
 comfirm:function(e){
  const db = wx.cloud.database()//打開數(shù)據(jù)庫連接
  let book = e.detail.value
  if(book.id==""){//id等于空是新增數(shù)據(jù)
   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: '修改失敗',
    })
   }
  })
 } 
 
})

云開發(fā)后臺數(shù)據(jù)，需要手動添加books集合：