评论

微信小程序todolist云开发——对数据的增删改

对之前的todolist小程序进行了改进,加入云开发,保存数据

之前写了一个todolist,但是不能保存数据,所以就用微信的云开发进行了进一步的改进

https://developers.weixin.qq.com/community/develop/article/doc/000e6082dd0dd818ef0d026ff56413


第一步,先创建一个集合——todo_list, 并进行初始化

const db = wx.cloud.database()


第二步,添加字段

todo_one 表示用户输入的数据

  add(e){
    var that =  this
    // 获取到所有的数据
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
        db.collection('todo_list')
        .add({
          // data 字段表示需新增的 JSON 数据
          data: {
            value: that.data.todolist_one,   // 获取到输入的事件
            checked:false
          },
          success:function(res){
            that.show()
          }
        })
    }
  },


第三步,删除数据

delete(e){
    // 接收对应数组数目的参数
    var _id = e.currentTarget.dataset._id
    var that = this
    console.log(_id)
    db.collection('todo_list').doc(_id).remove({
      successfunction(res{
        that.show()
        console.log(res.data)
      }
    })
  },


第四步,对完成的数据进行标志

  mark(e){
    // 查看选择标记
    var that = this
    console.log('checkbox发生change事件,携带value值为:', e.detail.value) // 未指定的_id
    const  value = e.detail.value     //选中的值
    for(var i = 0; i < value['length'];i++){
      console.log(value[i])
      db.collection('todo_list').doc(value[i]).update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          checkedtrue
        },
        successfunction(res{
          console.log(res.data)
          that.show()
        }
      })
    }
  },


js

// pages/todolist/todolist.js
// 初始化
const db = wx.cloud.database()


Page({


  /**
   * 页面的初始数据
   */
  data: {
    todolist_one:"",
    todolist:["11232","2",3,4,5],
    choose:[1,2,3,4,5],
    todo:[]
  },
  bindKeyInput(e){
    this.setData ({
      todolist_one:e.detail.value
    })
  },
  show(e){
    var that = this
    var todo
    wx.showLoading({
      title'加载数据中',
    })
     db.collection('todo_list')
      .get({
      successfunction(res{
        todo = res.data
        todo = todo.reverse()
        // 设置好todo的数据
        that.setData({
          todo:todo,
          todolist_one:''
        })
        wx.hideLoading({
          success(res) => {console.log("加载成功!")},
        })
        console.log(todo)
      }
    })
  },
  add(e){
    var that =  this
    // 获取到所有的数据
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
        db.collection('todo_list')
        .add({
          // data 字段表示需新增的 JSON 数据
          data: {
            value: that.data.todolist_one,   // 获取到输入的事件
            checked:false
          },
          success:function(res){
            that.show()
          }
        })
    }
  },
  mark(e){
    // 查看选择标记
    var that = this
    console.log('checkbox发生change事件,携带value值为:', e.detail.value) // 未指定的_id
    const  value = e.detail.value     //选中的值
    for(var i = 0; i < value['length'];i++){
      console.log(value[i])
      db.collection('todo_list').doc(value[i]).update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          checkedtrue
        },
        successfunction(res{
          console.log(res.data)
          that.show()
        }
      })
    }
  },
  delete(e){
    // 接收对应数组数目的参数
    var _id = e.currentTarget.dataset._id
    var that = this
    console.log(_id)
    db.collection('todo_list').doc(_id).remove({
      successfunction(res{
        that.show()
        console.log(res.data)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoadfunction (options{


  },
    /**
   * 生命周期函数--监听页面显示
   */
  onShowfunction () {
    // 调用显示数据库
    this.show()
  },
})


wxml

<!--index.wxml-->
<view class="container">


<view class="add-list">
  <!-- 使用变量的保存 -->
  <input  type="text" auto-focus placeholder="你想要做什么?" value="{{todolist_one}}" bindinput="bindKeyInput" />
  <button class="btn" bindtap="add">添加</button>
</view>
<view>
  <!-- 使用for循环遍历数组 -->
  <checkbox-group bindchange="mark">
    <view class="add-list" wx:for="{{todo}}" wx:key="{{item.value}}">
      <checkbox value="{{item._id}}" checked="{{item.checked}}"></checkbox>
      <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
      <view wx:else>{{item.value}}</view>
      <!-- 通过data-index来传递参数 -->
      <button class="btn" bindtap="delete" data-_id="{{item._id}}">删除</button>
    </view>
  </checkbox-group>


</view>
</view>


wxss

/* pages/todolist/todolist.wxss */
.container{
  margin-top30rpx;
  margin-left30rpx;
  border-radius5px;
  background-color: white;
  width100%;
  padding-bottom1rpx;
  
}
.add-list{
  width100%;
  display: flex;
  float: left;
  outline-colorrgb(230230230);
}
.btn{
  margin-right30rpx;
  display: flex;
  float: right;
  background-color: gold;
}

最后一次编辑于  2021-11-17  
点赞 1
收藏
评论

2 个评论

  • Smooth
    Smooth
    2021-11-18

    可以考虑一下等以后数据量大了以后,从云数据库获取集合中数据方面,采取什么方式能优化、加快从数据库读取数据(即一次性请求大批量数据 VS 分多次请求同一批数据,采取分页来优化)

    2021-11-18
    赞同 2
    回复 1
    • Jack Li
      Jack Li
      2021-11-18
      受教了
      2021-11-18
      1
      回复
  • PD
    PD
    发表于移动端
    2021-11-19
    看名字应该是要做个和计划有关的小程序吧,如果是这样子的话加个时间比较好,这样用户看到自己完成的计划会更有成就感
    2021-11-19
    赞同 1
    回复 1
    • Jack Li
      Jack Li
      2021-11-19
      有考虑
      2021-11-19
      回复
登录 后发表内容