微信小程序云开发实现增删改查功能

Page({ data: {  id: '',//修改用来保存_id  iSshow: true,  inpVal: '',  inp2Val: '',  inp3Val: '',  list: [] },  onLoad: function () {  var that = this  that.getUserMsg()//读取信息 }, //获取文本框内容 getName(e) {  this.setData({   inpVal: e.detail.value  }) },  getAge(e) {  this.setData({   inp2Val: e.detail.value  }) }, getCreated(e) {  this.setData({   inp3Val: e.detail.value  }) }, //获取信息 getUserMsg() {  var that = this  const db = wx.cloud.database()  db.collection('datalist').get({   success: function (res) {    console.log(res)    that.setData({     list: res.data    })   }  }) }, //添加信息 setUserMsg() {  var that = this  const db = wx.cloud.database()   db.collection('datalist').add({    data: {     name: that.data.inpVal,     age: that.data.inp2Val,     created: that.data.inp3Val    },    success: function (res) {     console.log(res)     that.setData({      inpVal: "",      inp2Val: "",      inp3Val:""     })     console.log(that.data.inpVal + '--' + that.data.inp2Val + '--' + that.data.inp2Val)     that.getUserMsg()    }   }) }, //删除信息 delUserMsg(e) {  var that = this  const db = wx.cloud.database()  var id = e.currentTarget.dataset.id  db.collection('datalist').doc(id).remove({   success: function (res) {    console.log(res)    that.getUserMsg()   }  }) }, //修改回显 changeMsg(e) {  var that = this  var id = e.currentTarget.dataset.id  const db = wx.cloud.database()   db.collection('datalist').doc(id).get({   success: function (res) {    that.setData({     inpVal: res.data.name,     inp2Val: res.data.age,     inp3Val:res.data.created,     show: false,     id: res.data._id    })   }  })  }, //更新提交 updetMsg(e) {  var that = this  var id = e.currentTarget.dataset.id  const db = wx.cloud.database()  db.collection('datalist').doc(id).update({   data: {    name: that.data.inpVal,    age: that.data.inp2Val,    created:that.data.inp3Val   },   success: function (res) {    that.getUserMsg()    that.setData({     inpVal: '',     inp2Val: '',     inp3Val:'',     show: true    })   }  }) },})

<view class="container"> <view class='box' style='background:#FFFFFF'>  <label>姓名:</label>  <input data-value='{{inpVal}}' bindinput='getName' value='{{inpVal}}'></input> </view> <view class='box' style='background:#FFFFFF;margin-top:1rpx;'>  <label>年龄:</label>  <input data-value='{{inpVal}}' bindinput='getAge' value='{{inp2Val}}'></input> </view>  <view class='box' style='background:#FFFFFF;margin-top:10rpx;'> <label>手机号:</label>  <input data-value='{{inpVal}}' bindinput='getCreated' value='{{inp3Val}}'></input> </view> <button wx:if='{{show}}' bindtap='setUserMsg'>提交</button> <button wx:if="{{!show}}" data-id="{{id}}" bindtap='updetMsg'>确认修改</button></view> <view class='infoMsg'> <view>  <label>姓名</label>  <label>年龄</label>  <label>手机号</label>  <label>操作</label> </view> <view wx:for="{{list}}">  <label>{{item.name}}</label>  <label>{{item.age}}</label>  <label>{{item.created}}</label>  <label>   <text data-id='{{item._id}}' bindtap='changeMsg'>修改</text>  </label> </view> </view>

page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; font-size: 30rpx;}.box{ width: 90%; display: flex; background: grey} button{ width: 90%; height: 40px; line-height: 40px; margin-top: 20rpx; background:#ffffff; }.infoMsg{ width: 90%; margin: auto; margin-top: 20rpx; border: 1rpx solid #e2e2e2; font-size: 28rpx;}.infoMsg view{ display: flex; border-top: 1rpx solid #e2e2e2;}.infoMsg view>label{ flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.infoMsg view>label:not(:first-child){ border-left: 1rpx solid #e2e2e2;}.infoMsg view>label text{ margin-right: 10rpx; border: 1rpx solid #e2e2e2;}