微信小程序之云数据库增删改查

功能实现：

tabbar导航栏云数据库增删改查 一、效果图：

二、代码

app.json

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  
  /***           tabbar实现          ***/
  "tabBar": {
    "custom": false,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
  
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/index1.png",
        "selectedIconPath": "images/index2.png",
        "text": "登录"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png",
        "text": "我的信息"
      }
    ]
  },
  
  /***                   结束                ***/
  
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

index.wxml

index.wxss

/* pages/index.wxss */
input{
  border: 1px black solid;
  margin: 1%;
}
#sex{
  margin: 2%;
}
radio{
  margin-left: 20%;
}
button{
  margin-top: 5%;
  margin-left: 15%;
}

index.js

const db = wx.cloud.database()
 Page({
data:{
  code:'',
  name:'',
  age:'',
  sex:''
},
//添加
formsubmit:function(e){
  var that = this
  that.setData({
  code : e.detail.value.code,
   name : e.detail.value.name,
   age: e.detail.value.age,
   sex : e.detail.value.sex
  })
  if(that.data.code==null||that.data.code==''){
    wx.showToast({
      title: '请输入学号',
      icon:'error'
    })
  }else{
  
//wjx:微信小程序云数据库名

  db.collection('wjx').add({
    data:{
      code:this.data.code,
      name:this.data.name,
      age:this.data.age,
      sex:this.data.sex
    },success:function(e){
      console.log("成功添加一条记录")
      wx.showToast({
        title: '添加成功',
        icon:'success'
      })
    }
  })
   }}
 })

my.wxml

my.wxss

/* pages/my/my.wxss */
input{
  border: 1px black solid;
  margin: 1%;
}
#sex{
  margin: 2%;
}
radio{
  margin-left: 20%;
}
.button{
  margin-top: 5%;
  margin-left: 20%;
}

my.js

var db = wx.cloud.database()
Page({
  data:{
    id:'',
    code:'',
    name:'',
    age:'',
    sex:'',
    option1:'',
    option2:''
  },
  //查询
  getData:function(e){
    var that = this
    // console.log(e.detail.value.code)
    that.setData({
      code:e.detail.value.code
    })
    if(that.data.code==null||that.data.code==''){
      wx.showToast({
        title: '请输入学号',
        icon:'error'
      })
    }else{
      db.collection('wjx').where({
        code:that.data.code
      }).get({
        success:function(res){
          console.log(res)
          if(res.data.length==0){
            console.log("null")
            that.setData({
              id:'',
              code:'',
              name:'',
              age:'',
              sex:'',
              option1:'',
              option2:''
            })
          }else{
          that.setData({
            id:res.data[0]._id,
            name:res.data[0].name,
            age:res.data[0].age,
            sex:res.data[0].sex
          })
          if(that.data.sex=='男'){
            that.setData({
              option1:'checked'
            })
          }else{
            that.setData({
              option2:'checked'
            })
          }
        }
        }
        })
      
    }
    
  },
  //修改
  update:function(d){
    var that = this
    that.setData({
      name:d.detail.value.name,
      age:d.detail.value.age,
      sex:d.detail.value.sex
    })
    db.collection('wjx').doc(that.data.id).update({
      data:{
        name:that.data.name,
        age:that.data.age,
        sex:that.data.sex
      },success:function(res){
        wx.showToast({
          title: '修改成功',
          icon:'success'
        })
        console.log(res)
      }
    })
   },
   //删除
   delete:function(e){
     var that = this
     db.collection('wjx').doc(that.data.id).remove({
       success:function(o){
         console.log(o)
         wx.showToast({
           title: '删除成功',
           icon:'success'
         })
       }
     })
 
  }
})