微信小程序借助云开发实现数据库的“增删改查”

首先,要使用小程序的云开发需先在app.js中进行云开发的初始化(前前提是你新建小程序项目时要使用自己的AppID,不能使用测试号创建,并且你开通了小程序的云开发)
查看小程序的官方文档(可在小程序开发者工具,菜单栏“帮助”中直接打开开发者文档)找到云开发初始化示例
在这里插入图片描述
将示例代码复制到app.js的onLaunch方法中
在这里插入图片描述
在这里插入图片描述
在打开的云开发控制台中点击设置,复制自己的环境ID给env的值(这里没有环境ID的也可以自己创建,一般只要开通了云开发都会默认有一个环境ID)
在这里插入图片描述
然后在控制台中再创建一个集合(表),用于后面数据的增删改查
在这里插入图片描述

以上皆为准备工作,下面可以开始搬砖了

添加数据

1.在wxml文件中添加一个button按钮并绑定一个addData点击事件,用于添加数据
在这里插入图片描述
2.打开对应的js文件,初始化数据库的引用
在这里插入图片描述
3.编写addData点击事件,添加数据
在这里插入图片描述
add是云数据库中用于添加数据的方法,data中是我们要添加的数据(可以是字符、列表、网址、参数…)后面两个方法分别是添加成功和失败的回调函数
Ctrl+S保存并编译,然后在模拟器中点击“添加数据”按钮,在Console控制台中可看到添加成功
在这里插入图片描述
打开云开发控制台,点击刚刚创建的集合,如下可看到我们添加的数据
在这里插入图片描述

查询数据

1.在wxml文件中添加一个button按钮并绑定一个getData点击事件,用于查询数据
在这里插入图片描述
2.在js文件中编写getData点击事件,查询数据
在这里插入图片描述
get方法查询数据,并在Console控制台打印查询结果,点击模拟器中的查询按钮如下,查询成功
在这里插入图片描述

添加数据II(改进)

上面添加的数据是写死了的,这里改进一下实现“动态添加我们输入的数据”

1.增加两个input输入框,并分别绑定两个事件用于获取我们输入的信息
在这里插入图片描述
2.在js中先编写addName事件,如下我们需要获取的数据通过event.detail.value即可拿到
在这里插入图片描述
3.定义name,age两个全局变量来存储我们输入的数据
在这里插入图片描述
4.如下,将两个全局变量保存的数据赋值给要添加的data
在这里插入图片描述
如下,动态添加数据成功
在这里插入图片描述
在这里插入图片描述

删除数据

1.云数据库在删除数据时,需要通过每条数据的id来删除。在添加数据时每一条数据都会默认有一个id字段,所以,这里用一个input填写数据id,通过id来删除数据
在这里插入图片描述
2.与上面相同的方法,先创建一个全局变量id,再通过event.detail.value拿到我们填写的id
在这里插入图片描述
3.编写删除事件:remove删除doc中id字段对应的数据在这里插入图片描述
4.在模拟器中先查询一下数据,在控制台复制一条数据的id到要删除的输入框中
在这里插入图片描述
删除成功,此时在云控制台的数据库中该条数据已删除
在这里插入图片描述

修改数据

1.修改数据时同样也需要通过id来进行修改,这里仅以修改age数据为例
在这里插入图片描述
2.在js中添加updateDataInput、updateAge事件分别获取要修改数据的id和新age
在这里插入图片描述
3.编辑updateData事件,更新age数据
在这里插入图片描述
先查询数据,复制一个数据的id,再输入新age
在这里插入图片描述
如下修改成功,age变成21了
在这里插入图片描述
好了,小程序云开发数据库的增删改查,已经全部完成了!

关于博主

如下,其实这些在小程序官方文档中都有讲解,我只是做了简单的整理提炼,学习小程序的开发,其实只要能研究透官方文档比什么教程都有用。小程序更新迭代很快,我现在用的开发工具是2020.01.19版本的,不同版本的界面会有些不同,老版的开发工具bug挺多的
在这里插入图片描述

发布了22 篇原创文章 · 获赞 28 · 访问量 5255

猜你喜欢

转载自blog.csdn.net/weixin_42365530/article/details/104049084