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

网友投稿 414 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集合：

wechat

您可能感兴趣的文章:微信小程序实现获取准确的腾讯定位地址功能示例微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)微信小程序使用map组件实现检索(定位位置)周边的POI功能示例微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能基于腾讯云服务器部署微信小程序后台服务（Python+Django）PHP后台实现微信小程序登录微信小程序wx.request实现后台数据交互功能分析微信小程序后台持续定位功能使用详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 模拟 微信小程序 小程序 示例
上一篇:木鱼小铺的店铺风格装修怎么操作
下一篇:木鱼小铺小程序：新零售小程序不止于颜值
相关文章

 发表评论

暂时没有评论，来抢沙发吧~