微信小程序-云开发数据库基础操作（自用）
2024-03-28 04:11:00
文章目录
- 数据库增删查改
- 数据库权限管理
- 查询get（）
- 传统写法
- es6的简洁写法
- 条件查询 where()
- 查询数据
- 查询单条信息
- 添加数据add()
- 修改数据update()
- 删除数据remove()
- 增删查改综合案例
- 列表跳详情操作
- 获取用户输入的商品名和商品价格
- 云开发更新商品价格
- 云开发删除商品
本篇内容为云开发教程视频学习笔记（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)//指pagelet that=thiswx.cloud.database().collection('goods').get({//查询操作//请求成功success(res){console.log('请求成功',res)console.log('sucess里面的that',that)//指pageconsole.log('sucess里面的this',this)//指sucessthat.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.valueconsole.log(name)},getPrice(e){//获取用户输入价格price=e.detail.valueconsole.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.valueconsole.log(name)},getPrice(e){//获取用户输入价格price=e.detail.valueconsole.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.idthis.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.valueconsole.log(name)},getPrice(e){//获取用户输入价格price=e.detail.valueconsole.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>
微信小程序-云开发数据库基础操作（自用）相关推荐
- 微信小程序+云开发+数据库使用
微信小程序+云开发+数据库使用 参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.ht ...
- uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题 使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
- 【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言 上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
- 关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题 集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
- 微信小程序云开发数据库操作
1.在app.js中初始化云环境 // app.js App({onLaunch() {//初始化云服务if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库 ...
- mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
- mysql批量导入json_微信小程序云开发---数据库批量导入json文件
马上大学毕业了,于是最近做了一个关于班级信息的微信小程序,主要记录一些班级活动的照片.同学的通讯录...... 主要使用了微信小程序的云开发平台,因为班级同学的信息,班长都会有Excel表格统计的信息 ...
- 微信小程序云开发---数据库批量导入json文件
马上大学毕业了,于是最近做了一个关于班级信息的微信小程序,主要记录一些班级活动的照片.同学的通讯录...... 主要使用了微信小程序的云开发平台,因为班级同学的信息,班长都会有Excel表格统计的信息 ...
- 微信小程序云开发—数据库增删改查
首先新建小程序项目,后端服务选择"小程序云开发",新建项目成功后,开通云开发,在app.js中添加 wx.cloud.init({traceUser: true,}) 如下图所示, ...
- 微信小程序云开发 --实现加法操作
入门学习,有错请纠正. 整体思路: wxml中button的点击事件 触发index.js里的qiuhe函数 调用云函数,把数据传给云函数里的add下面的数据 云函数接受到数据后,进行计算,并返回结果 ...
最新文章
- HTML5动态分页效果代码
- Windows 8 应用开发 - 应用栏
- tc溜溜865手机投屏卡_下半年发布新品手机盘点：骁龙865+是性能之王 红米抢入门市场...
- 迷宫android游戏代码,C++打造迷宫游戏，直接上代码
- 深度学习 之 数据增广（包含源码及注释文件更改）
- asp.net下向数据库存储和读取图片示例
- 后端开发 java_Java后端开发三年，你不得不了解的JVM
- linux查看etl进程,常见ETL工具
- jupyter notebook python环境_jupyter Notebook环境搭建
- 解决XML配置文件The markup in the document following the root element must be well-formed报错
- 自考那些事儿（九）:再次学操作系统
- 屌丝就爱尝鲜头——java8再判断
- 程序员最深情的告白——《致对象》
- Linux声卡驱动框图
- Houdini10：灯光
- UE5学习笔记（十一）——蓝图基础之键盘和鼠标操作移动
- android sync 文件夹,如何使用FolderSync在安卓手机上同步文件夹到坚果云？
- java引用数据类型_007 Java引用数据类型
- Visual Studio 2022安装时Visual Studio Installer稍等片刻...正在提取文件 进度条不动 0B每秒-已解决
- linux c语言math lm pow,C语言pow()函数实现求x的y次方的值