微信小程序选项卡功能开发步骤与方法全解析
354
2023-11-08
微信小程序云开发之模拟后台增删改查
小程序云开发出来之后，小程序开发人员也要慢慢的接触后端对数据的增删改查了。下面就给大家提供一个案例吧。
这里我把新增和修改放在了一个页面
显示页面index.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 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
set.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// 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集合：
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~