微信小程式之雲開發——模擬後臺增刪改查
阿新 • • 發佈:2019-01-11
小程式雲開發出來之後,小程式開發人員也要慢慢的接觸後端對資料的增刪改查了。下面就給大家提供一個案例吧。
這裡我把新增和修改放在了一個頁面
顯示頁面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({ /** * 頁面的初始資料 */ 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.js
Page({
/**
* 頁面的初始資料
*/
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集合: