小程序云开发----增删改查数据库内容操作

一.新建项目

1.新建小程序项目

 2.删除不需要的页面和文件

框选的都删除

删除完保存编译~

3.点击云开发

 4.输入云开发名称，点击同意

 5.等待初始化

二.初始化准备

6.删除index首页不必要的代码

index.wxml里面的都删除

index.js中留下page即可

 7.定义云函数的目录

 8.新建目录

名字跟上面的名字一样。 创建完就会出现当前环境

9.云开发环境初始化

删除app.js里面的代码，输入环境id，环境id在云开发控制台的设置里面去找

三.云数据库的增删改查 

1.云数据库添加数据

在index的wxml中添加一个按钮，在index.js中注册这个事件。

2.在js中获取数据库的引用

在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。以下调用获取默认环境的数据库的引用： 

const DB = wx.cloud.database().collection("list")

js代码 

const DB = wx.cloud.database().collection("list")
Page({
  // 添加数据
  addData(){
    DB.add({
      data:{
        name:"thorne1",
        age:21
      },
      success(res){
        console.log('添加成功',res)
      },
      fail(res){
        console.log('添加失败',res)
      }

    })
  }
  
})

当点击按钮后，触发addData事件，添加data里面的数据。添加成功或者失败在控制台打印添加结果。 

但是上面的方法添加数据是写死的，怎么动态添加数据呢？

3.动态添加数据

用input来获取用户输入的内容，在input标签绑定添加数据事件addname和addage（这两个事件在js中注册）

注意：在js中要定义name和age

index.wxml

 index.js

 随便输入名字：哈哈 和年龄123

在云开发的云控制台的数据库可以看到对应的数据

4. 查询数据

给wxml中的“查询数据”按钮绑定getData事件（查询数据事件），在js中定义

 点击按钮，就可以看到返回的对应查询的数据

 5.删除数据

删除数据是根据对象中的一个id来删除的。也就是上图的这个id

所以！我们需要先在input输入对应的id，（id在云开发控制台找），wxml里面继续进行删除id.

wxml绑定事件

<!-- 删除数据 -->
<input placeholder="填写要删除的内容" bindinput="delDataInput"></input>
<button bindtap="delData" type="primary">删除数据</button>

js

 

 5.修改数据

wxml

<!-- 更新数据 -->
<input placeholder="填写要修改的内容的id" bindinput="updDataInput"></input>
<input placeholder="输入修改后的年龄" bindinput="updAge"></input>
<button bindtap="updData" type="primary">修改数据</button>

 js

 

 在页面中输入要修改的id和修改后的年龄。在云开发控制台就可以看到效果了。