微信小程序——云开发实现数据库的增删查改操作

1.前期准备

在使用云开发之前需要先在app.js中初始化云开发的配置，上一篇文章已经提到。连接：https://blog.csdn.net/beekim/article/details/120977861

在云开发的数据库中新建一个集合

app.json中配置一个新的页面，并设置入口页面，方便调试

微信官方文档中关于button

关于form


代码：

<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.其他

官方还提供了数据库的操作，详细见https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/query-array-object.html