微信小程序-云数据库开发
数据库增删查改
数据库权限管理
这相当于管理员权限,可以改到所有人可读。
查询get()
首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录
其次,在app.js中写入以下代码
App({
//小程序一启动就会执行
onLaunch() {
console.log('小程序开始启动啦')
wx.cloud.init({
env:'cloud1-0gk6wlxu714dbe3e'//云开发环境id
})
}
})
1
2
3
4
5
6
7
8
9
然后在需要查询数据库的js页面加入以下代码
传统写法
在wxml里面展示
<view wx:for="{{list}}">
<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>
1
2
3
在js里面展示
Page({
data:{
list:{}
},
onLoad(){
//固定写法
console.log('onload里面的this',this)//指page
let that=this
wx.cloud.database().collection('goods').
get(
{//查询操作
//请求成功
success(res){
console.log('请求成功',res)
console.log('sucess里面的that',that)//指page
console.log('sucess里面的this',this)//指sucess
that.setData({
list:res.data
})
},
//请求失败
fail(err){
console.log('请求失败',res)
}
})
}
})
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
es6的简洁写法
在wxml里面展示
<view wx:for="{{list}}">
<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>
1
2
3
在js里面增加数据显示
Page({
data:{
list:{}
},
onLoad(){
//固定写法
wx.cloud.database().collection('goods').
get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
条件查询 where()
查询数据
Page({
data:{
list:{}
},
onLoad(){
//固定写法
wx.cloud.database().collection('goods')
.where({//条件查询
name: '999胃泰'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
查询单条信息
wxml
<view wx:for="{{list}}">
<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>
<view wx:for="{{list}}">
<view>doc查询的单条数据商品名:{{good.name}},价格:{{good.price}}</view>
</view>
1
2
3
4
5
6
js
Page({
data:{
list:{},
good:{}
},
onLoad(){
//固定写法
wx.cloud.database().collection('goods')
.where({//条件查询
name: '999胃泰'
})
.get()
.then(res=>{
this.setData({
list:res.data
})
})
.catch(err=>{console.log('第二种方法请求失败',err)
})
//使用doc查询单条数据
wx.cloud.database().collection('goods')
.doc('')//写入id值
.get()
.then(res=>{
console.log('查询单条数据成功',res)
this.setData({
good:res.data
})
})
.catch(err=>{
console.log('查询单条数据失败',err)
})
}
})
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
添加数据add()
通过add实现对数据的添加
添加add页面
add.js
Page({
onLoad(){
wx.cloud.database().collection('goods')
.add({//添加数据
data:{
name:'西瓜霜',
price:'20'
}
})
.then(res=>{
console.log('添加成功',res)
})
.catch(res=>{
console.log('添加失败',res)
})
},
//添加数据
add(){
wx.cloud.database().collection('goods')
.add({//添加数据
data:{
name:'葡萄糖',
price:'16'
}
})
.then(res=>{
console.log('添加成功',res)
})
.catch(res=>{
console.log('添加失败',res)
})
}
})
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
点击按钮添加数据
add.wxml
<button bindtap="add">点击添加数据</button>
1
修改数据update()
add.wxml
<button bindtap="add">点击添加数据</button>
<button bindtap="update">点击修改数据</button>
1
2
add.js
Page({
update(){
wx.cloud.database().collection('goods')
.doc('d4107ab162469f7d0394a0aa32fb4d8b')//要修改数据的id
.update({//修改数据
data:{
price:250
}
})
.then(res=>{
console.log('修改成功',res)
})
.catch(res=>{
console.err('修改失败',res)
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
删除数据remove()
add.wxml
<button bindtap="add">点击添加数据</button>
<button bindtap="update">点击修改数据</button>
<button bindtap="remove">点击删除数据</button>
1
2
3
add.js
Page({
//删除单条数据
remove(){
wx.cloud.database().collection('goods')
.doc('d4107ab162469f7d0394a0aa32fb4d8b')//要修改数据的id
.remove()
.then(res=>{
console.log('修改成功',res)
})
.catch(res=>{
console.err('修改失败',res)
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
增删查改综合案例
1,能查看商品列表
2,能动态添加商品
3,能进入商品详情页
4,能删除某个商品
5,能修改某个商品价格
demo
商品列表页面
demo.wxml
<view wx:for="{{list}}">
<view>
商品名:{{item.name}},价格{{item.price}}
</view>
</view>
1
2
3
4
5
demo.js
Page({
onLoad(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('商品列表请求失败',res)
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
商品详情页
js
// pages/demo1/demo1.js
Page({
onLoad(){
//查询单条数据
wx.cloud.database().collection('good')
.doc("")//id名
.get()
.then(
res=>{
console.log('商品详情页请求成功',res)
this.setData({
good:res.data
})
}
)
.catch(
res=>{
console.log('商品详情页请求失败',res)
}
)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
wxml
<text>商品名:{{good.utem}},价格:{{good.price}}</text>
1
列表跳详情操作
所用的知识点:
要在wxml里面定义data-要绑定的数据
要在js里拿到绑定的数据
demo.wxml
<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">//点击跳转时携带数据
商品名:{{item.name}},价格{{item.price}}
</view>
</view>
1
2
3
4
5
demo.js
Page({
onLoad(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('商品列表请求失败',res)
})
},
//跳转到商品详情页
goDetail(e){
console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
wx.navigateTo({
url:'/pages/demo1/demo1?id='+e.currentTarget.dataset.id,
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
商品详情页
js
Page({
onLoad(options){//约定俗称的参数
console.log('列表携带的值',options)
var id=options.id
//查询单条数据
wx.cloud.database().collection('goods')
.doc(id)//id名
.get()
.then(
res=>{
console.log('商品详情页请求成功',res)
this.setData({
good:res.data
})
}
)
.catch(
res=>{
console.log('商品详情页请求失败',res)
}
)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
wxml
<text>商品名:{{good.name}},价格:{{good.price}}</text>
1
获取用户输入的商品名和商品价格
demo.wxml
输入商品名
<input bindinput="getName"></input>
输入商品价格
<input bindinput="getPrice"></input>
<button bindtap="addGood">添加商品</button>
<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">//点击跳转时携带数据
商品名:{{item.name}},价格{{item.price}}
</view>
</view>
1
2
3
4
5
6
7
8
9
10
demo.wxss
.input{
border:gray;
}
1
2
3
demo.js
let name=''
let price=''
Page({
onLoad(){
this.getList()
},
getList(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('商品列表请求失败',res)
})
},
//跳转到商品详情页
goDetail(e){
console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
wx.navigateTo({
url:'/pages/demo1/demo1?id='+e.currentTarget.dataset.id,
})
},
getName(e){//获取用户输入名
name=e.detail.value
console.log(name)
},
getPrice(e){//获取用户输入价格
price=e.detail.value
console.log(price)
},
addGood(){
console.log('商品名',name)
console.log('商品价格',price)
if(name==''){
console.log('商品名为空了')
wx.showToast({
icon:'none',
title:'商品名为空了',
})
}
else if(price==''){
console.log('价格为空了')
wx.showToast({
icon:'none',
title:'价格为空了',
})
}
else{
console.log('可以操作啦')
wx.cloud.database().collection('goods')
.add({
data:{
name:name,
price:price
}
})
.then(res=>{
console.log('添加成功',res)
this.getList()
})
.catch(res=>{
console.log('添加失败',res)
})
}
}
})
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
demo1.js
Page({
onLoad(options){//约定俗称的参数
console.log('列表携带的值',options)
var id=options.id
//查询单条数据
wx.cloud.database().collection('goods')
.doc(id)//id名
.get()
.then(
res=>{
console.log('商品详情页请求成功',res)
this.setData({
good:res.data
})
}
)
.catch(
res=>{
console.log('商品详情页请求失败',res)
}
)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
demo1.wxml
<text>商品名:{{good.name}},价格:{{good.price}}</text>
1
云开发更新商品价格
demo.wxml
输入商品名
<input bindinput="getName"></input>
输入商品价格
<input bindinput="getPrice"></input>
<button bindtap="addGood">添加商品</button>
<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">//点击跳转时携带数据
商品名:{{item.name}},价格{{item.price}}
</view>
</view>
1
2
3
4
5
6
7
8
9
10
demo.wxss
.input{
border:gray;
}
1
2
3
demo.js
let name=''
let price=''
Page({
onLoad(){
this.getList()
},
getList(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('商品列表请求失败',res)
})
},
//跳转到商品详情页
goDetail(e){
console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
wx.navigateTo({
url:'/pages/demo1/demo1?id='+e.currentTarget.dataset.id,
})
},
getName(e){//获取用户输入名
name=e.detail.value
console.log(name)
},
getPrice(e){//获取用户输入价格
price=e.detail.value
console.log(price)
},
addGood(){
console.log('商品名',name)
console.log('商品价格',price)
if(name==''){
console.log('商品名为空了')
wx.showToast({
icon:'none',
title:'商品名为空了',
})
}
else if(price==''){
console.log('价格为空了')
wx.showToast({
icon:'none',
title:'价格为空了',
})
}
else{
console.log('可以操作啦')
wx.cloud.database().collection('goods')
.add({
data:{
name:name,
price:price
}
})
.then(res=>{
console.log('添加成功',res)
this.getList()
})
.catch(res=>{
console.log('添加失败',res)
})
}
}
})
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
demo1.js
let price=''
var id=''
Page({
onLoad(options){//约定俗称的参数
console.log('列表携带的值',options)
id=options.id
this.getDetail()
},
//更新商品数据
getDetail(){
//查询单条数据
wx.cloud.database().collection('goods')
.doc(id)//id名
.get()
.then(
res=>{
console.log('商品详情页请求成功',res)
this.setData({
good:res.data
})
}
)
.catch(
res=>{
console.log('商品详情页请求失败',res)
}
)
},
//获取用户输入的新价格
getPrice(e){
price=e.detail.value
},
//修改商品价格
update(){
console.log('新的商品价格',price)
if(price==''){
wx.showToast({
icon:'none',
title:'价格为空了',
})
}
else{
console.log('可以操作啦')
wx.cloud.database().collection('goods')
.doc(id)
.update({
data:{
price:price
}
})
.then(res=>{
console.log('更新成功',res)
this.getDetail()
})
.catch(res=>{
console.log('更新失败',res)
})
}
}
})
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
demo1.wxml
<!--pages/demo1/demo1.wxml-->
<text>商品名:{{good.name}},价格:{{good.price}}</text>
更新商品价格
<input bindinput="getPrice"></input>
<button type="primary" bindtap="update">更新商品</button>
1
2
3
4
5
6
云开发删除商品
用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示
demo.wxml
输入商品名
<input bindinput="getName"></input>
输入商品价格
<input bindinput="getPrice"></input>
<button bindtap="addGood">添加商品</button>
<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">//点击跳转时携带数据
商品名:{{item.name}},价格{{item.price}}
</view>
</view>
1
2
3
4
5
6
7
8
9
10
demo.wxss
.input{
border:gray;
}
1
2
3
demo.js
let name=''
let price=''
Page({
onLoad(){
this.getList()
},
getList(){
wx.cloud.database().collection('goods')
.get()
.then(res=>{
console.log('商品列表请求成功',res)
this.setData({
list:res.data
})
})
.catch(res=>{
console.log('商品列表请求失败',res)
})
},
//跳转到商品详情页
goDetail(e){
console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
wx.navigateTo({
url:'/pages/demo1/demo1?id='+e.currentTarget.dataset.id,
})
},
getName(e){//获取用户输入名
name=e.detail.value
console.log(name)
},
getPrice(e){//获取用户输入价格
price=e.detail.value
console.log(price)
},
addGood(){
console.log('商品名',name)
console.log('商品价格',price)
if(name==''){
console.log('商品名为空了')
wx.showToast({
icon:'none',
title:'商品名为空了',
})
}
else if(price==''){
console.log('价格为空了')
wx.showToast({
icon:'none',
title:'价格为空了',
})
}
else{
console.log('可以操作啦')
wx.cloud.database().collection('goods')
.add({
data:{
name:name,
price:price
}
})
.then(res=>{
console.log('添加成功',res)
this.getList()
})
.catch(res=>{
console.log('添加失败',res)
})
}
}
})
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
demo1.js
let price=''
var id=''
Page({
onLoad(options){//约定俗称的参数
console.log('列表携带的值',options)
id=options.id
//查询单条数据
wx.cloud.database().collection('goods')
.doc(id)//id名
.get()
.then(
res=>{
console.log('商品详情页请求成功',res)
this.setData({
good:res.data
})
}
)
.catch(
res=>{
console.log('商品详情页请求失败',res)
}
)
},
//获取用户输入的新价格
getPrice(e){
price=e.detail.value
},
//修改商品价格
update(){
console.log('新的商品价格',price)
if(price==''){
wx.showToast({
icon:'none',
title:'价格为空了',
})
}
else{
console.log('可以操作啦')
wx.cloud.database().collection('goods')
.doc(id)
.update({
data:{
price:price
}
})
.then(res=>{
console.log('更新成功',res)
//this.getList()
})
.catch(res=>{
console.log('更新失败',res)
})
}
},
shanchu(){
console.log('点击了删除')
//弹窗提示
wx.showModal({
title:"是否确定删除",
content:'您再仔细想一想,是否真的要删除,删除后就找不回来啦',
success(res){
console.log('小石头',res)
if(res.confirm==true){//用户点击了确定
console.log('用户点击了确定')
//删除操作
wx.cloud.database().collection('goods')
.doc(id)
.remove()
.then(res=>{
console.log('删除成功',res)
wx.navigateTo({
url:'/pages/demo/demo',
})
})
.catch(res=>{
console.log('删除失败',res)
})
}
else if(res.cancel==true){//用户点击了取消
console.log('用户点击了取消')
}
}
})
}
})
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
80
81
82
83
84
85
86
87
88
demo1.wxml
<!--pages/demo1/demo1.wxml-->
<text>商品名:{{good.name}},价格:{{good.price}}</text>
更新商品价格
<input bindinput="getPrice"></input>
<button type="primary" bindtap="update">更新商品</button>
<button bindtap="shanchu">删除当前商品</button>
微信小程序-云数据库开发相关推荐
- Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
- 微信小程序云数据库定时清空(云函数定时触发)
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次 实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
- 微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量 想要实现的功能 遇到的问题 js代码 想要实现的功能 界面代码 // An highlighted block <view cla ...
- 微信小程序云函数开发环境 node.js的安装参考
微信小程序云函数开发环境 node.js的安装参考 下载:nvm-windows 下载下图安装包,地址在: https://github.com/coreybutler/nvm-windows/rel ...
- 外部web端访问微信小程序云数据库的几种方法
前言 我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
- web端获取微信小程序云数据库数据实现增删改查等操作
获取小程序数据库 前言 一.微信小程序Web SDK 1.微信官方示例 2.未登录模式注意事项 二.完整流程演示 1.开启云数据库访问权限 2.编写云函数 3.web前端引入js 4.web页面js访 ...
- 微信小程序 云数据库使用(上)
数据库写入 创建集合 1.js文件 2.wxml 文件 3.wxss 文件 有了一个小想法,向云数据库写入文本小故事,之后在读取故事. 数据库读取:https://blog.csdn.net/we ...
- 微信小程序云原生开发——快速入门
目录 云开发的优势 云开发的工具和准备 1.开通云开发服务 2.找到云开发的环境 ID 3.指定小程序的云开发环境 4. 下载 Nodejs 5.部署并上传云函数 6. 获取 openid并调用云函数 ...
- 微信小程序云数据库实现注册
微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库 我们接下来使用云数据库实现注册功能,效果图如下 云数据库结构如下: 这是用云数据库实现注册功能,实现代码如下,: regi ...
最新文章
- mysql8只从配置_mysql8的配置优化
- 回文字符串—回文子串—暴力破解法
- python pip安装pyinstaller报错_pip install pyinstaller (安装过程报错解决)
- python组成结构_Python数据分析丨pandas基本数据结构组成
- Jmeter plugins 之 Perfmon Metrics Collector(服务器性能监控)
- 利用c++利用odbc连接mysql数据库
- 心法利器[57] | 文本多分类问题经验
- 论文笔记_CV_AD_3D Reconstruction using a Sparse Laser Scanner and a Single Camera for Outdoor Autonomous
- chrome 无法下载文件软件问题
- PHP手机网店管理系统
- 从SO_REUSEPORT服务器的一个弊端看多队列服务模型
- 计算机动画题目,3DMax2014计算机动画作业练习题
- MATLAB 如何让图形变美?[第一期]
- 开关稳压电源的晶体管
- docker的privileged 与 k8s的privileged 设置方式
- 【rzxt.com】从四个角度判断本本屏幕好坏
- 如何连接惠普台式计算机蓝牙,hp笔记本蓝牙怎么设置【详解】
- python推荐引擎_THUDataPITranslation
- RabbitMQ的简要介绍
- 不要只做个ACV工程师,SSH框架配置文件详解。知其然,也要知其所以然。
热门文章
- iFixit高清完整拆解:iPhone 7 Plus
- 携手捷普 :让流程立于云端,臻于至善
- 20 21九死一生、22上半年读20本书(含15本管理书单/笔记):继续百年征程
- input设置type为number,禁止输入e等符号,去除上下箭头
- 2022高职大数据竞赛0720更新参考实现
- 三种样式的九九乘法表—C语言
- 支持复制粘贴word图片的KindEditor编辑器
- c语言两千行以内代码,C语言的教务管理系统(2000行代码)(106页)-原创力文档
- java utf-8 转 gbk / gbk 转 utf-8
- 【项目笔记】布局文件报错Suspicious size: this will make the view invisible, probably intended for layout_width