微信小程序——云开发实现数据库的增删查改操作
1.前期准备
<!--pages/datatest/datatest.wxml--> <text>数据库crud测试:</text> <form bindsubmit="testData"> <label for="name"></label> <input type="text" name="name" id="name" placeholder="输入用户名"/> <label for="pass"></label> <input type="text" name="pass" id="pass" placeholder="输入密码"/> <label for="age"></label> <input type="text" name="age" id="age" placeholder="输入年龄"/> <button type="primary" form-type="submit">提交</button> </form>
input{ border: 1rpx solid black; margin: 10px 0; }
testData(event){ console.log(event) }
测试: 提交之后可以在控制台得到我们刚才表单填写的数据内容,接下来需要做的就是将这些信息和云开发的数据库交互起来
2.插入数据
初始化数据库 插入部分的代码参照官方文档来写 代码:
testData(event){ const db = wx.cloud.database() console.log(event) db.collection(datatest).add({ // data 字段表示需新增的 JSON 数据 data: { name:event.detail.value.name, pass:event.detail.value.pass, age:event.detail.value.age }, success: function(res) { // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id console.log(res) } }) },
测试: 插入成功!
3.查询数据
为了方便测试,我多插入了几条数据。 需求:现在我需要将数据查询出来全部遍历输出在界面上
查询也参照官方文档来写 wxml中添加一段显示的代码:
<view> <text>查询数据显示:</text> <view> <text wx:for="{ {showdata}}"> { {item.name}} </text> </view> </view>
data: { showdata: }, testData(event){ const db = wx.cloud.database() console.log(event) db.collection(datatest).get({ success:res=> { // res.data 包含该记录的数据 console.log(res.data) this.setData({ showdata:res.data }) } }) },
测试: 点击按钮后,测试成功! 注意点:
官方文档写的这个doc属性表示的是id的值 如果要进行条件查询,可以写一个where 官网还提供了查询指令:
4.更新数据
修改成功! 或者把条件写成where 修改成功!
5.删除数据
中间也可以换成doc
6.其他
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
嵌入式-基于qt的tcp/ip实现(2)