小菜鸟的微信小程序 - 云开发 - 账号密码库(3)云函数批量增删 - 完全不同的数据

一、目前效果

小菜鸟的云开发小程序-密码箱2-云函数批量增删-不同的数据

二、批量删除

1.思路

1.用复选框获得 目标的 _id数组

  1. json文件中 引入复选框组件
    "van-checkbox": "../../miniprogram_npm/vant-weapp/checkbox/index",
    "van-checkbox-group": "../../miniprogram_npm/vant-weapp/checkbox-group/index",
  1. wxml文件
    在复选框组里用 wx:for="{ {infolist}}" 将所有数据展示出来
    每个单元格组(包含四个单元格:类型账号密码备注)对应一个复选框
    选中的复选框的 name 会赋给 数组result
    name ="{ {item._id}}" ,即name是该单元格组的 id
<van-checkbox-group class="fxgroup" value="{
    
    { result }}" bind:change="onfxChange" wx:for="{
    
    {infolist}}" wx:key="index">

	<van-checkbox class="fx" name="{
    
    {item._id}}"> </van-checkbox>

<van-cell-group class="inset">
  <van-cell  title="类型:">{
    
    {
    
    item.type}}</van-cell>
  <van-cell  title="账号:">{
    
    {
    
    item.identity}}</van-cell>
  <van-cell  title="密码:">{
    
    {
    
    item.password}}</van-cell>
  <van-cell  title="备注:">{
    
    {
    
    item.desc}}</van-cell>
</van-cell-group>

	</van-checkbox-group>

<button bindtap="delbtn" class="delbtn"></button>
  1. js文件
    一进入页面,在 onLoad 函数里 对 infolist 赋值
  data: {
    
    
    infolist: [],
    result: [],
  },
选中的复选框的 name ,即对应的数据id , 会赋给 数组result 
  onfxChange(event) {
    
    
    this.setData({
    
    
      result: event.detail,
    });
    console.log(this.data.result)
  },

2.编写 云函数 pDelete

环境 id 在 云开发控制台,设置 里 右上方,注意是环境id 不是名称
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init(/*{env: '自己的环境id'}*/)

const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
    
    
  //console.log(event)
  await db.collection('info').where({
    
     
      _id: _.in(event.del_id)

    }).remove()
    .then(res => {
    
    
      console.log('删除成功:', res)
    })
    .catch(res => {
    
    
      console.log('删除失败:', res)
    })

}

3.编写js函数,将 _id数组 传入云函数

pDel: function () {
    
    
    wx.cloud.callFunction({
    
    
      name: 'pDelete',		//调用的云函数名称
      data: {
    
    
        del_id: this.data.result	//将目标数组传递给云函数
      }
    }).then(res => {
    
    
      console.log("del成功")
      this.getInfo()	//删除成功后,重新加载数据
      this.setData({
    
    
        result: [],		//删除成功后,将目标数组置空
      })
    }).catch(res => {
    
    
      console.log("del失败")
    })
  },

2.难点 - 用 remove 同时删除 不同id的数据

// 云函数入口文件
exports.main = async (event, context) => {
    
    
  //console.log(event)
  var a = event.del_id[0]
  console.log(a)
  var b = event.del_id[1]
  console.log(b)
  await db.collection('info').where({
    
     
      // _id: event.del_id[0]  //ok1
      
      //_id: _.eq(a).or(_.eq(b)) //ok2
      // _id: _.or(_.eq(a),_.eq(b)) //ok3

      // _id: _.or([_.eq(a),_.eq(b)]) //ok4
      //_id: _.or([event.del_id[0],event.del_id[1]]) //no5

      // _id: _.or(_.eq(event.del_id)) //no6
      // _id: _.or(event.del_id) //no7
      
      //_id: _.or(_.in(event.del_id)) //ok8
      _id: _.in(event.del_id)//ok9

    }).remove()
}

以上是我摸索时的几种形式,稍稍总结一下:
网上多是 批量删除 拥有同一字段 的数据,和我的需求不匹配,找了很长时间都没有找到我想要的
这时候就只能查官方文档,自己摸索了
在最开始,我想的是用 or ,之前在云数据库模糊搜索的时候用到过
由以上代码注释2、3、4、5,可以知道 or 是可以的,但是只能删除固定个数的数据,而且需要搭配eq使用
官方文档里说or前置形式可以接收一个数组,通过以上6、7,可以看到也不大行
然后我把文档里面有关查询的操作符看了一遍,就找到了操作符in:

查询筛选操作符,表示要求值在给定的数组内。

完美匹配我的需求!
先用in搭配or,由8可以看到是可行的,然后我又试了试只有in的情况,也是ok的。

至此,批量删除几条不同数据,的方法就找到了

const db = cloud.database()
const _ = db.command

db.collection('info').where({
    
     
      _id: _.in(arr_id)
    }).remove()

三、批量添加

1.方法

批量添加就比较简单了,直接将对象数组传给云函数add添加即可

  1. js函数:
  pAdd: function () {
    
    
    wx.cloud.callFunction({
    
    
      name: 'padd',
      data: {
    
    
        add_data: this.data.addinfolist		//对象数组 要添加的所有数据 
      }
    }).then(res => {
    
    
      console.log("add成功")
      
      this.getInfo()	//添加成功后,重新加载数据
      this.setData({
    
    
        addinfolist: [],	//添加成功后,将数组置空
      })
    }).catch(res => {
    
    
      console.log("add失败")
    })
  },
  1. 云函数
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init(/*{  env: 'xxx'}*/)
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
    
    

  db.collection('info').add({
    
    
    data: event.add_data		//对象数组
  }).then(res => {
    
    
    console.log("添加成功",res);
  }).catch(err => {
    
    
    console.log(err);
  })

}

2.难点 - 对象数组的获得

对象数组是由对象组成的数组 [ object1 , object2 ,object3 ,…]
object 对象是一种无序的键值对 { key : value , k:v , … }

一般来说,我们需要保存的数据是这样的

{
    
    								这就是一个对象
      type: '',
      identity: '',				
      password: '',				
      desc: '',					
      _openid:"xxx",			openid在小程序端,即js的函数里,会自动生成,在云函数里不会自动生成
      _id:"自动生成"				
      
}

如果想传多个对象,只需把对象放入数组,用push即可,具体可查看微信小程序 data 赋值

对象的获得其实也很简单,只要用输入框组件获得输入,然后放入对象即可


以上是我最开始使用的笨方法,先用输入框获取四个输入,将四个输入赋值给对象,点击保存,将对象赋给对象数组,过程十分繁琐


下面记录一种十分简便的方法

  1. wxml文件 - 输入框组件
    addnum是输入面板的个数,最开始有一个面板,当填写完输入框后,点击增加面板,addnum+1,输入面板就会加一
    这里注意输入框控件的 data-index="{ {index}}" 和 value="{ { addinfolist[index].type }}"
    data-index="{ {index}}" 是将当前点击的面板的index传给js,这样就能对应修改某个面板上的某个内容
    value="{ { addinfolist[index].type }}" 是当前显示在输入框里的内容,所以必须是对应index的对象内容
<view wx:for="{
    
    {addnum+1}}" wx:key="index">

    <van-cell-group>
    <van-field data-index="{
    
    {index}}" value="{
    
    { addinfolist[index].type }}" placeholder="如QQ,便于分类管理" border="{
    
    { true }}" required bind:change="onTypeChange" label="类型" clearable/>
    <van-field data-index="{
    
    {index}}" value="{
    
    { addinfolist[index].identity }}" placeholder="请输入账号" border="{
    
    { true }}" required bind:change="onIdentityChange" label="账号" clearable/>
    <van-field data-index="{
    
    {index}}" value="{
    
    { addinfolist[index].password }}" placeholder="请输入密码" border="{
    
    { true }}" bind:change="onPasswordChange" label="密码" clearable required error-message="{
    
    {errmsg}}" />
    <van-field data-index="{
    
    {index}}" value="{
    
    { addinfolist[index].desc }}" border="{
    
    { true }}" bind:change="onDescChange" label="备注" autosize="{
    
    {true}}"  type="textarea" clearable/>
  </van-cell-group>
  
</view>

<view class="btnbox">
<button   bindtap="baocun">保存内容</button> <button   bindtap="jixuadd">增加面板</button>
</view>
  1. js 文件
    点击输入框时,获得 当前输入框的index event.target.dataset.index
    通过 var addinfolist_i = “addinfolist[” + event.target.dataset.index + “].type”
    将当前输入框的值赋给 addinfolist数组 第 index 个的对象的 type属性
  onTypeChange(event) {
    
    
    var addinfolist_i = "addinfolist[" + event.target.dataset.index + "].type"
    this.setData({
    
    
		index: event.target.dataset.index,
		[addinfolist_i]:event.detail
    })
  },
  onIdentityChange(event) {
    
    
...
  },
  onPasswordChange(event) {
    
    
...
  },
  onDescChange(event) {
    
    
...
  },

其实只到这里就完成了对对象数组的赋值,大家可以打印一下看看,随时输入,对象数组addinfolist随时更新


因为是用云函数添加的数据,所以是没有openid的,在手机上预览的时候,批量添加的数据是不显示的,因为数据库的权限是仅管理员可读写,所以有两个方法,解决这个问题。
一是修改权限,在云开发控制台页面操作;
二是修改代码,在上传数据的时候,手动赋值自己的openid
我是在点击保存内容的时候,通过循环给每个对象都添加openid字段:

 for (let i = 0; i < event.add_data.length; i++) {
    
    
  var addinfolist_i = "addinfolist[" + i + "]._openid"
  this.setData({
    
    
      [addinfolist_i]: "xxx"
  });
}

但是我刚刚想了一下,手动赋值是不可取的,所以改为在云函数里获取当前用户的openid,赋给对象:

  const wxContext = cloud.getWXContext()
  
  for (let i = 0; i < event.add_data.length; i++) {
    
    
    event.add_data[i]._openid = wxContext.OPENID 
  }

云函数里不能使用setData,经测试,以上方法可以完成赋值

四、总结

本篇主要记录一下,批量增删不同数据的方法:删除用 in,增加用对象数组

有问题可以评论

猜你喜欢

转载自blog.csdn.net/tfnmdmx/article/details/119858922