云函数批量增删 - 完全不同的数据
一、目前效果
小菜鸟的云开发小程序-密码箱2-云函数批量增删-不同的数据
二、批量删除
1.思路
1.用复选框获得 目标的 _id数组
- json文件中 引入复选框组件
"van-checkbox": "../../miniprogram_npm/vant-weapp/checkbox/index",
"van-checkbox-group": "../../miniprogram_npm/vant-weapp/checkbox-group/index",
- 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>
- 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添加即可
- 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失败")
})
},
- 云函数
// 云函数入口文件
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 赋值
对象的获得其实也很简单,只要用输入框组件获得输入,然后放入对象即可
以上是我最开始使用的笨方法,先用输入框获取四个输入,将四个输入赋值给对象,点击保存,将对象赋给对象数组,过程十分繁琐
下面记录一种十分简便的方法
- 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>
- 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,增加用对象数组
有问题可以评论