利用云数据库实现微信小程序数据的增、删、改、查操作(单表)

说明：

利用云数据库实现微信小程序单表数据的增、删、改、查操作
添加按钮：获取用户输入的数据，并将数据传入于数据库中
列表显示：在页面加载时查询数据库中所有要显示的数据
编辑：从列表中获取要编辑的id值，获取编辑页面中编辑的最终数据，根据id将这些数据存入与数据库中，并返回列表显示页面。
删除：从列表中获取要编辑的id值，根据id值删除对应的数据，并返回列表显示页面

准备：

云数据库的搭建
创建一张表：

操作步骤：

1. 增加操作
2. 列表显示操作
3. 编辑操作
4. 删除操作

内容

1. 增加操作

1.1利用form表单实现用户输入数据的获取

<form bindsubmit="insert_submit" bindreset="formReset">
<view>
用户<input class="weui-input"  type="text" placeholder="请输入用户名" name="name"/>
</view>
<view>
密码<input class="weui-input" password type="text" placeholder="请输入密码" name="password"/>
</view>
<button form-type="submit">添加</button>
</form>
<button bindtap="list">列表显示</button>

1.2将获取到的数据存入数据库中，成功后跳转到列表显示页面
在index.js文件下

//添加按钮
  insert_submit: function (e) {
    var that = this;
    console.log("进入添加按钮");
    db.collection('use_info').add({ 
      data: {
        name: e.detail.value.name,
        password: e.detail.value.password
      },
      success: res => {
        wx.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 2000
        }),
        console.log(res)
       //跳转到显示页面
        wx.navigateTo({
          url: "../list/list",
          success: function () {
            console.log("进入列表页面")
           },
          fail: function () { },
          complete: function () { },
        })
      },
      fail: res => {
        wx.showToast({
          title: '添加失败',
          duration: 2000
        }),
        console.log(err)
      }
    })
  }

2. 列表显示操作

2.1 点击首页的列表显示按钮，跳转到列表显示页面
index.js：

//列表显示函数
list:function(){
  wx.navigateTo({
    url:"../list/list",
    /*success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("indexData", {userid: this.data._id}),
      console.log("id"+this.data._id)
    }*/
  }
  )
},

2.2 列表显示页面所有数据库中的数据
list.js：

 //加载列表数据
loadMore:function(){
      db.collection('use_info')
      .field({
        name: true,
        password: true,
      })
      .get().then(
        res => {
       this.setData({list:res.data})
        
        }
      ) 
},

2.3实现每次进入列表显示页面，数据自动刷新显示

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.loadMore()
  },

3. 编辑操作

3.1 点击列表数据中对应的编辑按钮，携带对参数(主键)并跳转到编辑页面
(1)自定义传递的参数，设置编辑按钮
list.wxml:

<button bindtap="update"  data-text="{{item._id}}">编辑
</button>
<button bindtap="delete" data-text="{{item._id}}">删除</button>

(2)获取自定义的参数的值，并将其作为携带的参数传递到编辑页面
list.js:

//点击编辑数据按钮
  update:function(e){
    console.log("进入编辑数据按钮函数")
    //获取参数的数据值
    var id=e.currentTarget.dataset.text
    console.log("id:"+id)
    //连带参数值，跳转到编辑页面
    wx.navigateTo({
      url: "../update/update?id="+id,
    })
  },

(3)编辑页面默认显示选中的数据信息
编辑页面加载时获取来自列表页面带来的参数值id，将其设置在data中，并根据该参数值查询数据，将查询到的数据设置到data中，再遍历取出，作为默认值显示在编辑页面中。

编辑页面加载时获取参数值，查询数据，设置data值

update.js:

data: {
list:[]
  },

 /**
   * 生命周期函数--监听页面加载，options只加载一次，即id就出现一次
   * 用于页面在加载时的数据的初始化
   */
  onLoad: function (options) {
    console.log("onLoad")
    console.log(options)
   //在页面加载过程中，获取传递的参数值，并将获取到的参数值赋值给data中对应的变量
   var id=options.id
    console.log("获取到的id值为："+id)
    //根据id查询数据，并将数据赋值给data做初始值
   this.setData({
     id:id
   })
    this.selectById(id)
  },

 //根据id获取数据信息
  selectById: function (id) {
    db.collection('use_info')
      .where({
        _id: id
      })
      .field({
        name: true,
        password: true,
      })
      .get().then(
        res => {
          this.setData({ 
          list:res.data
            })
        }
      )
  },

遍历取出data数据，作为默认值显示在编辑页面中

<view wx:for="{{list}}" wx:key="index">
<form data-id="{{id}}" bindsubmit="form_update" bindreset="formReset">
<view>
用户<input class="weui-input"  type="text" name="name" value="{{item.name}}"  />
</view>
<view>
密码<input class="weui-input"  type="text" name="password" value="{{item.password}}" />
</view>

<text>{{id}}</text>
<button  form-type="submit" >编辑提交</button>
</form>
</view>

3.2 编辑页面获取主键值，获取用户编辑的数据，进行编辑操作，编辑成功返回列表显示页面
update.js:

//编辑数据提交按钮
  form_update:function(e){
    console.log("进入编辑页面")
    var id = e.currentTarget.dataset.id
    console.log("编辑数据后提交时的id值为："+id)
    console.log("e:"+e.detail.value)
    this.updateData(id,e)
//跳转到列表显示页面
    wx.navigateTo({
      url: "../list/list" 
    })
  },

4. 删除操作

点击列表数据中对应的删除按钮，直接根据主键对数据进行删除操作
list.wxml:

<button bindtap="delete" data-text="{{item._id}}">删除</button>

list.js:

//点击删除按钮
  delete:function(e){
    console.log("进入删除函数")
var id=e.currentTarget.dataset.text
    console.log("进入删除函数时的id"+id)
    db.collection('use_info').doc(id)
      .remove()
    console.log("删除数据成功")
    this.loadMore()
  },