IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 微信小程序-云开发数据库基础操作（自用） -> 正文阅读

[移动开发]微信小程序-云开发数据库基础操作（自用）

文章目录


本篇内容为云开发教程视频学习笔记（https://www.bilibili.com/video/BV1x54y1s7pk?spm_id_from=333.788.b_636f6d6d656e74.8）

数据库增删查改

数据库权限管理

在这里插入图片描述
这相当于管理员权限，可以改到所有人可读。

查询get（）

首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录
在这里插入图片描述
其次，在app.js中写入以下代码

App({
  //小程序一启动就会执行
  onLaunch() {
   console.log('小程序开始启动啦')
   wx.cloud.init({
     env:'cloud1-0gk6wlxu714dbe3e'//云开发环境id
   })
  }
})

然后在需要查询数据库的js页面加入以下代码

传统写法

在wxml里面展示

<view wx:for="{{list}}">
	<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>

在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)
            }
            })
    }
    
})

es6的简洁写法

在wxml里面展示

<view wx:for="{{list}}">
	<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>

在js里面增加数据显示

Page({
	data:{
		list:{}
	},
    onLoad(){
        //固定写法
        wx.cloud.database().collection('goods').
        get()
        .then(res=>{ 
        this.setData({
        	list:res.data
        	})
        })
        .catch(err=>{console.log('第二种方法请求失败',err)
        })
    }
    
})

条件查询 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)
        })
    }
    
})

查询单条信息

wxml

<view wx:for="{{list}}">
	<view>商品名:{{item.name}},价格:{{item.price}}</view>
</view>
<view wx:for="{{list}}">
	<view>doc查询的单条数据商品名:{{good.name}},价格:{{good.price}}</view>
</view>

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)
        })
    }
    
})

添加数据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)
    		})
}
    
})

点击按钮添加数据
add.wxml

<button bindtap="add">点击添加数据</button>

修改数据update()

add.wxml

<button bindtap="add">点击添加数据</button>
<button bindtap="update">点击修改数据</button>

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)
    		})
	}
    
})

删除数据remove()

add.wxml

<button bindtap="add">点击添加数据</button>
<button bindtap="update">点击修改数据</button>
<button bindtap="remove">点击删除数据</button>

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，能修改某个商品价格

demo
商品列表页面
demo.wxml

<view wx:for="{{list}}">
    <view>
    商品名：{{item.name}},价格{{item.price}}
    </view>
</view>

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)
    		})
    }
    
    
})

商品详情页
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)
            }
        )
    }
    
})

wxml

<text>商品名：{{good.utem}}，价格:{{good.price}}</text>

列表跳详情操作

所用的知识点：
要在wxml里面定义data-要绑定的数据
要在js里拿到绑定的数据
demo.wxml

<view wx:for="{{list}}">
    <view bindtap="goDetail" data-id="{{item._id}}">//点击跳转时携带数据
    商品名：{{item.name}},价格{{item.price}}
    </view>
</view>

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,
    	})
    }
    
    
})

商品详情页
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)
            }
        )
    }
    
})

wxml

<text>商品名：{{good.name}}，价格:{{good.price}}</text>

获取用户输入的商品名和商品价格

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>

demo.wxss

.input{
border:gray;
}

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)
		 })
    	}
    }
    
})

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)
            }
        )
    }
    
})

demo1.wxml

<text>商品名：{{good.name}}，价格:{{good.price}}</text>

云开发更新商品价格

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>

demo.wxss

.input{
border:gray;
}

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)
		 })
    	}
    }
    
})

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)
		 })
    	}
    }
    
})

demo1.wxml

<!--pages/demo1/demo1.wxml-->
<text>商品名：{{good.name}}，价格:{{good.price}}</text>

更新商品价格
<input bindinput="getPrice"></input>
<button  type="primary" bindtap="update">更新商品</button>

云开发删除商品

用户删除数据是一个危险操作，所以操作之前最好给用户一个友好提示
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>

demo.wxss

.input{
border:gray;
}

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)
		 })
    	}
    }
    
})

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('用户点击了取消')
        	}
        }
		})
    }
    
})

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>
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-04-07 22:51:12  更:2022-04-07 22:53:21 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 20:43:39-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码