微信小程序云开发实现增删改查操作

初始化云函数

const db = wx.cloud.database();// 连接数据库

增加操作

 // 添加数据
  addDate() {
    db.collection("Test").add({
      data: {
        name: "Ac",
        age: "18"
      }
    }).then(res=>{
      console.log(res);
    })
  },

修改操作

 // 更新数据
  upDate() {
  db.collection('Test').where({
    name:"Ac"// 用户输入的内容
  }).update({
    data:{
      name: this.data.dataObj // 更新后的内容
    },
    success:res=>{
      console.log(res);
    }
  })
  }
})

查询操作

// 获取数据
  getDate() {
   db.collection('Test').get({
     success: res=>{
       console.log(res.data);
       this.setData({
        dataObj:res.data[1]
      })
     }
   })
  },

删除操作

 // 删除数据
  delDate() {
    db.collection("Test")
      .where({
        name: "张三"
      }).remove()
      .then(res => {
        console.log(res)
      })
  },

完整代码

Js

const db = wx.cloud.database(); // 连接数据库
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataObj: ""
  },
  // 从输入框获取数据
  Goname:function(e){
    // console.log(e);
    this.setData({
      dataObj:e.detail.value
    })
    console.log(this.data.dataObj);
  },
  // 获取数据
  getDate() {
   db.collection('Test').get({
     success: res=>{
       console.log(res.data);
       this.setData({
        dataObj:res.data[1]
      })
     }
   })
  },
  // 添加数据
  addDate() {
    db.collection("Test").add({
      data: {
        name: "Ac",
        age: "18"
      }
    }).then(res=>{
      console.log(res);
    })
  },
  // 删除数据
  delDate() {
    db.collection("Test")
      .where({
        name: "张三"
      }).remove()
      .then(res => {
        console.log(res)
      })
  },
  // 更新数据
  upDate() {
  db.collection('Test').where({
    name:"Ac"// 用户输入的内容
  }).update({
    data:{
      name: this.data.dataObj // 更新后的内容
    },
    success:res=>{
      console.log(res);
    }
  })
  }
})

Wxml

<button type="primary" bindtap="getDate">点我获取数据</button>
<button type="primary" bindtap="addDate">点我添加数据</button>
<button type="primary" bindtap="delDate">点我删除数据</button>
<button type="primary" bindtap="upDate">点我更新数据</button>
<input type="text" bindinput="Goname" style="background-color: aquamarine;"/>

数据库展示

微信小程序云开发实现增删改查操作_第1张图片

总结

主要作为笔记记载,知识点课后复习

你可能感兴趣的:(微信小程序,微信小程序,javascript,前端)