【原创】微信小程序云开发通过input输入框动态修改云数据库的数据

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据

效果：
可以在小程序的显示界面中，渲染出数据库的相关内容，并且可以在显示界面中，直接修改数据库中的数据。

1. 初始状态图：
   
2. 点击获取数据：
   

数据库中的内容（节选）

1. 修改数据：
   在界面直接修改，数据库中也同步修改了
   （可只修改其中一条，也可同时修改多条，图片为修改多条）

代码展示：

1. wxml代码：

<view>
  <button bindtap="getData" style="background-color:grey">获取数据button>
  <button bindtap="addData" style="background-color:grey;margin-top:20rpx">添加数据button>
  <button bindtap="updateData" style="background-color:grey;margin-top:20rpx">更新数据button>
  <view class="textContainer" wx:for="{
      {dataList}}" wx:key="id">
    <input type="text" value="{
      {item.name}}" bindblur="listenInput" bindfocus="listenValue" data-index="{
      {index}}" />
    <view>view>
    <input type="text" value="{
      {item.text}}" bindblur="listenInput" bindfocus="listenValue"
      data-index="{
      {index + dataListLength}}" />
  view>
view>

（添加数据这个按钮是我在练习时加的，与本主题无关）

2. js代码

data部分:

data: {
     
    dataList: [],
    tempList: [],  //临时存放旧数据
    tempIndex: 0,  //临时记录下标
    dataListLength: 0,  //dataList长度
  }

主要函数部分：

  //async...await异步请求，等待请求结束再执行下一步
  async getData(res) {
     
    await db.collection('ArrayList')
      .where({
     
        age: _.gt(0)
      })
      .get()
      .then(res => {
     
        this.setData({
     
          dataList: res.data
        })
      })
    this.setData({
     
      dataListLength: this.data.dataList.length
    })
  },

  updateData() {
     
    wx.showToast({
     
      title: '数据已更新'
    })
  },

  listenValue(res) {
     
    console.log(res);
    this.setData({
     
      tempList: res.detail.value,
      tempIndex: res.currentTarget.dataset.index
    })
  },

  listenInput(res) {
     
    console.log(res.detail.value);
    var newData = res.detail.value;
    //input框的索引，根据索引获得更新的部分
    if (this.data.tempIndex < this.data.dataListLength) {
     
      db.collection('ArrayList').where({
     
        name: this.data.tempList
      }).update({
     
        data: {
     
          name: newData,
        }
      })
    }
    else {
     
      db.collection('ArrayList').where({
     
        text: this.data.tempList
      }).update({
     
        data: {
     
          text: newData,
        }
      })
    }
  }

总结：
这个案例是我在学习云开发时突然想到的，于是就动手做了，整体难度不算高，就是需要逻辑思考，先提出这个需求，再一步步尝试做，做的过程中会发现很多问题，为了解决这些问题，就会促使自己去思考，一步一步地把问题解决。

重点：
1.input输入框中的bindfocus事件，通过回调函数，获取res.detail.value，即输入框中的值，然后通过setData把值存放进tempList，这样，就可以知道点的是哪个输入框的哪个内容，在更新数据时就可以直接通过this.data.tempList来查询点击的内容属于数据库中的哪条记录。

2.input输入框中的bindblur事件，当输入框失去焦点时，就会通过
res.detail.value获取输入框中的数据，然后进行update，完成数据更新。之所以不用bindinput，是因为如果用bindinput的话，input中每变化一次，res.detail.value就变一次，变化太多，容易出先更新数据不全面，用bindblur可在失去焦点时，直接把全部内容拿到。

3.input中的data-index，这个是为了区分更新的是哪条数据，如更新name，就只能更新name，更新text，就只能更新text，通过data-index给name和text都加上索引，name的索引范围是0到dataList的长度，text的索引是自身的原本索引加上dataList的长度。这样，在更新数据时，先通过if语句判断，再根据索引的范围进行相应数据的更新。

本案例中存在的问题：
如果多条数据的内容相同，如出现同名同姓的情况，修改时这几条数据的内容就会一起被修改…

最后，欢迎大家一起讨论！