微信小程序云开发修改并更新数据库数据

微信小程序云开发修改并更新数据库数据_第1张图片
如上,数据修改涉及两个页面。
在我的发布页面,点击修改按钮,跳转到修改发布页面,用户此时修改数据,点击确认修改,返回我的发布页面,显示的同步修改的数据

我的发布页面 HTML部分:

<!-- 搜索框 -->
<view class="all-lost">
  <input type="text" name="text" class="search" placeholder="饭卡 雨伞 表白 脱单 ..." value="{{inputValue}}" bindinput="inputSearch"></input>
  <view class="search-btn" bindtap="search">{{text}}</view>
</view>

<!-- 校园动态列表展示 -->
<block wx:for="{{allList}}" wx:key="index">
  <!-- data-xx  xx是自定义的属性名 属性值以e.currentTarget.dataset.xx的方式取出 -->
  <view class="wall-item">
      <!-- 头像昵称 -->
      <view class="item-image">
          <image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image>
          <image bindtap='previewImage' src="/images/boy.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image>
          <image bindtap='previewImage' src="/images/girl.png" wx:else></image>

          <view wx:if="{{item.private == 1}}" class="user-name">匿名</view>
          <view wx:if="{{item.private == 0}}" class="user-name">{{item.poster.nickname}}</view>
          <!-- 修改 -->
          <image data-itemid="{{item._id}}" bindtap="amend" class="amend" src="/images/amend.png"></image>
          <!-- 删除 -->
          <image data-id="{{item._id}}" bindtap="delete" class="delete" src="/images/delete.png"></image>
      </view>
      <!-- 内容 -->
      <view class="content common" style='color:#43CD80;'>#{{item.category}}#</view>
      <view class="text common">{{item.desc}}</view>
      <view class="imgRoot common">
        <block class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
          <image class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg"></image>
        </block>
    </view>

      <!-- 发布时间 -->
      <view class="post-time common">{{item.date}}</view>
  </view>
</block>

我的发布页面 JS部分:

// 获取应用实例
var app = getApp()
const db = wx.cloud.database({
  env: "panda-8p4lj"
})
const _ = db.command //后面多字段查询要用到的
Page({
  data: {
    // 定义一个空数组,用来接收从云数据库获取的数据
    allList: [],
    inputValue: "",
    text: '搜索',
  },

  // 修改
  amend: function(e) {
    var itemid = e.currentTarget.dataset.itemid
    // console.log('111'+e.currentTarget.dataset.itemid)
    wx.showModal({
      title: '编辑',
      content: '确定要修改已发布的信息吗?',
      success(res) {
        if(res.confirm) {
          wx.navigateTo({
            url: '/pages/personal/amend/amend?itemid='+itemid,  
          })
        }else if(res.cancel) {
          console.log('用户点击了取消')
        }
      }
    })
  },

  // 删除
  delete: function(e) {
    var that = this
    var id = e.currentTarget.dataset.id
    wx.showModal({
      title: '提示',
      content: '确定永久删除本条信息吗?',
      success(res) {
        if(res.confirm) {
            db.collection('posts').doc(id).remove({
              success(res) {
                wx.showToast({
                  title: '删除成功',
                })
                that.onLoad(); //刷新页面
              }
            })
           console.log('用户点击了确定')
        }else if(res.cancel) {
          console.log('用户点击了取消')
        }
      }
    })
  },

  // 预览图片
  previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("eeee", imgData[0])
    console.log("图片s", imgData[1])
    wx.previewImage({
      //当前显示图片
      current: imgData[0],
      //所有图片
      urls: imgData[1]
    })
  },

  // 获取用户输入搜索框的内容
  inputSearch: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  // 点击搜索,实现模糊查询
  search: function() {
    // 数据库正则对象
    var that = this
    if(this.data.text == '搜索') {
      const db = wx.cloud.database()
      db.collection('posts').where(
        _.or([
          // {
          //   _openid: app.globalData.openid //where和doc
          // },
          {
            // 使用正则查询,实现多字段模糊查询
            desc: db.RegExp({
              regexp: this.data.inputValue,  //this.data.inputValue作为关键字进行匹配
              option: 'i'  //大小写不区分
            }),
          },
          {
            category: db.RegExp({
              regexp: this.data.inputValue,  //this.data.inputValue作为关键字进行匹配
              option: 'i'  //大小写不区分
            })
          }
        ])).orderBy('createTime', 'desc').get({
        success: res => {
          if(res.data.length != 0) {
            console.log(res)
            that.setData({
              allList: res.data,
              text: '取消'
            })
          } else {
            wx.showModal({
              title: '暂无数据...'
            })
            that.setData({
              inputValue: ''
            })
          }
        },
      })
    }else if(this.data.text == '取消') {
      that.setData({
        inputValue: '',
        text: '搜索',
        allList: wx.getStorageSync('search') //获取缓存的内容
      })
      
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    db.collection('posts').where({
      _openid: app.globalData.openid
    }).orderBy('createTime', 'desc').get({
      success(res) {
        console.log("请求成功", res)
        // 将查询返回的结果赋值给本地数组
        that.setData({
          // 给空数组loveList赋值
          allList: res.data,
        })
        var searchData = that.data.allList
        wx.setStorageSync('search', searchData)
      },
      fail(res) {
        console.log("请求失败", res)
      }
    })
  }

})

修改页面 HTML部分:

<!-- 用户自行修改数据的页面 -->
<view class="wall-item">
    <!-- 内容 -->
    <view class="content common" style='color:#43CD80;'>#{{amendList.category}}#</view>
    <input bindinput="change" value="{{amendList.desc}}" placeholder="{{change}}" class="text common"></input>

</view>

<!-- 确认修改 -->
<button class="publish" bindtap="sure">确认修改</button>

修改页面 JS部分:

var app = getApp()
Page({
  data: {
    id: '',
    amendList: [],
    change: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {
      var that = this
      // console.log(option.itemid)
      const db = wx.cloud.database({
        env: "panda-8p4lj"
      })
      db.collection('posts').doc(option.itemid).get({
        success(res) {
          // console.log("请求成功", res.data)
          // 将查询返回的结果赋值给本地数组
          that.setData({
            id: option.itemid,
            amendList: res.data,
          })
        },
        fail(res) {
          console.log("请求失败", res)
        }
      })
  },

  // 获取修改后的内容
  change: function(e) {
    this.setData({
      change: e.detail.value
    })
    // console.log(this.data.change)
  },

  // 提交修改
  sure: function() {
      var that = this
      // 调用云函数
      wx.cloud.callFunction({
        name: 'amend',
        // 传给云函数的参数
        data: {
          // _openid: app.globalData.openid,
          _id: that.data.id,
          desc: that.data.change,
        },
        success: function(res) {
          console.log(res)
          wx.showLoading({
            title: '修改成功...',
          })
          wx.navigateTo({
            url: '/pages/personal/mypublish/mypublish',
          })
          wx.hideLoading()
        },
        fail: console.error
      })
  },

})

你可能感兴趣的:(小程序云开发)