小程序云开发数据库【‘增’、‘删’、‘改’、‘查’】

最新推荐文章于 2023-03-23 17:41:14 发布
最新推荐文章于 2023-03-23 17:41:14 发布
阅读量343 收藏 1
点赞数
分类专栏： 小程序云开发数据库 文章标签： 小程序 elementui sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50722786/article/details/125038826
版权

页面效果图

wxml代码

<view>
    <text>姓名：</text>
    <input class="myInput" type="text" id="myName" bindinput="inputText"/>
    <text>电话：</text>
    <input class="myInput" type="number" id="myPhone" bindinput="inputText" placeholder="11位长度" maxlength="11"/>
    <text>备注：</text>
    <input class="myInput" type="text" id="myRemark" bindinput="inputText"/>
</view>
<button bindtap="tianjia">添加</button>
<button bindtap="chaxun">查询</button>
<view class="d" wx:for="{{list}}">
    <view class="d-a">姓名：{{item.name}}</view>
    <view class="d-b">电话:{{item.phone}}</view>
    <view class="d-a">备注：{{item.remark}}</view>
</view>
<button bindtap="whereChaxun">条件查询</button>
<button bindtap="shanchu">删除</button>
<text>查询条件：</text>
    <input class="myInput" type="text" id="where" bindinput="inputText" placeholder="姓名/电话/备注"/>
<view class="d" wx:for="{{wherelist}}">
    <view class="d-a">姓名：{{item.name}}</view>
    <view class="d-b">电话:{{item.phone}}</view>
    <view class="d-a">备注：{{item.remark}}</view>
</view>
<button bindtap="upDate">修改</button>
<input class="myInput" type="text" id="myName" bindinput="inputText" placeholder="名字修改为"/>
<input class="myInput" type="number" id="myPhone" bindinput="inputText" placeholder="号码修改为" maxlength="11"/>
<input class="myInput" type="text" id="myRemark" bindinput="inputText" placeholder="备注修改为" />

 wxss代码

/* pages/test/test.wxss */
.myInput{
    border: 1px solid #2b4b6b;
    margin-bottom: 10rpx;
}
.d{
    background-color: darkseagreen;
    border: 1rpx solid #efefef;
    border-radius: 10%;
    margin-bottom: 15rpx;
}
.d-a{
    border: 1px solid #2b4b6b;
    background-color: darkgoldenrod;
}
.d-b{
    border: 1px solid #2b4b6b;
    background-color: rgb(110, 216, 216);
}

js代码在最下面，希望对大家有用

一、“增”添加数据

把输入的数据通过 wx.cloud.database().collection('test').add({...}）和输入框函数绑定的数据，上传到云数据库中添加函数的js代码

data: {
        
         list:[],
        wherelist:[],
        Id:'',
        show:'',
        myName: '',
        myPhone: '',
        myRemark:'',
        where:'',
       
    },
 tianjia:function(e)
    {
        let myName =this.data.myName;
        let myPhone =this.data.myPhone;
        let myRemark=this.data.myRemark;
        if(myName=='' || myPhone==''|| myRemark==''){
         console.log("必填项不能为空！");
          return ;
       }
        wx.cloud.database().collection('test')
        .add({
            data:{name:myName, phone:myPhone, remark:myRemark},
            success:function(){console.log("添加成功");},
            fail:function(err){console.error("添加失败["+err+"]");
            console.log("添加失败");}         
        })
    },

输入框绑定函数js代码

   inputText:function(e) {
        console.clear();
        let id = e.target.id;
        let text = e.detail.value;
        this.setData({[id]:text});
        console.log(id + "输入中。。。" + text);
      },

看云数据库已经把这个数据传到云数据库了

 二.“查”询操作

利用 wx.cloud.database().collection('test') .get({}),把数据拿回来

 js代码

  
 chaxun:function(e){
        let that = this;
        wx.cloud.database().collection('test')
        .get({
            success:function(res){
            console.log("数据回调成功");
            console.log(res.data);
            that.setData({list:res.data});
            console.log("查询成功");
            },
            fail:function(err){ console.log("查询失败")}
        })
    },

点击查询按钮，看效果图，前面的三条数据是之前加进去的

 

 三.条件查询

可以输入姓名、电话、备注，任何一个条件都可以wx.cloud.database().collection('test') .where({})

js代码如下

   whereChaxun:function(e){
        const _ = wx.cloud.database().command;
        let _wherelist=[];//创建一个空的数组
        let page = this;
        page.setData({wherelist:_wherelist});//清空原来的数据
        let where=this.data.where;    //绑定输入框的查询条件
        wx.cloud.database().collection('test')  //电话查询、名字查询、备注查询
        .where(_.or([    //多个条件查询？可能提示什么索引组合什么的，知识有限不知道怎么解决
            {phone:where},
            {name:where},
            {remark:where},
         ] ))
        .get({
            success:function(res){
            console.log("电话数据回调成功");
            console.log(res.data);
            let id=res.data[0]._id;
            page.setData({Id:id,wherelist:res.data});//这个id值给回到页面，等一下删除和修改要用到id
            console.log("查询成功");
            },fail:function(err){ console.log("查询失败")}           
        });
    },

效果图

输入电话查询

 

四、“删”除

通过第三个条件查询拿到的数据的id ，再使用动态绑定查询到的数据的id进行删除wx.cloud.database().collection("test").doc(id).remove({})

js代码

  shanchu:function(e){
        let id=this.data.Id;     
        wx.cloud.database().collection("test").doc(id).remove({
                success: function(res) { 
               console.log("删除成功");
                 }
              })  
},

效果，先条件查询出一个数据，然后点一下删除按键就可以删除了

五、修“改”

也是通过第三个条件查询出的一个记录，然后再下面的输入框中输入你想要修改成的数据，这里有个小bug，就是你只修改一个电话或者是备注的话，其他两个没有填东西，也会将空白把原来的数据填充覆盖回去 wx.cloud.database().collection("test").doc(id).update({ data:{..}})

js代码如下

  upDate:function(e){
        let that =this;
        let myName =this.data.myName;
        let myPhone =this.data.myPhone;
        let myRemark=this.data.myRemark;
        let id=this.data.Id;
        let db=wx.cloud.database().collection("test").doc(id);
        db.update({
            data:{
                name:myName,
                phone:myPhone,
                remark:myRemark,
            },
            success:function(res){
               console.log("修改成功");
            }
        })

    },

效果图，这里可以看到电话没有填，却将空白覆盖掉原来的数据

到最后感谢大家能看到这里，这两天来就为了这几个功能，可是到处查找资料、实践，还是有点小毛病，不过我想要的功能都在这里了，下面是整个js的代码，上面部分分开的代码段可能会出现小问题

// pages/test/test.js

Page({
   
    data: {
        list:[],
        wherelist:[],
        Id:'',
        show:'',
        myName: '',
        myPhone: '',
        myRemark:'',
        where:'',
    },
    tianjia:function(e)
    {
        let myName =this.data.myName;
        let myPhone =this.data.myPhone;
        let myRemark=this.data.myRemark;
        if(myName=='' || myPhone==''|| myRemark==''){
          alert("必填项不能为空！");
          return ;
        }
        wx.cloud.database().collection('test')
        .add({
            data:{name:myName, phone:myPhone, remark:myRemark},
            success:function(){toast("添加成功");},
            fail:function(err){console.error("添加失败["+err+"]");
            toast("添加失败");}         
        })
    },
    chaxun:function(e){
        let that = this;
        let _list=[];
        this.setData({list:_list});
        wx.cloud.database().collection('test')
        .get({
            success:function(res){
            console.log("数据回调成功");
            console.log(res.data);
            console.log(res.data[0]._id);
            that.setData({list:res.data});
            toast("查询成功");
            },
            fail:function(err){ alert("查询失败")}
        })
    },
    whereChaxun:function(e){
        const _ = wx.cloud.database().command;
        let _wherelist=[];//创建一个空的数组
        let page = this;
        page.setData({wherelist:_wherelist});//清空原来的数据
        let where=this.data.where;    //绑定输入框的查询条件
        wx.cloud.database().collection('test')  //电话查询、名字查询、备注查询
        .where(_.or([    //多个条件查询？可能提示什么索引组合什么的，知识有限不知道怎么解决
            {phone:where},
            {name:where},
            {remark:where},
         ] ))
        .get({
            success:function(res){
            console.log("电话数据回调成功");
            console.log(res.data);
            let id=res.data[0]._id;
            page.setData({Id:id,wherelist:res.data});
            toast("查询成功");
            },fail:function(err){ alert("查询失败")}           
        });
       
    },
    shanchu:function(e){
        let id=this.data.Id;
        let db=wx.cloud.database().collection("test").doc(id);
        console.log(id);
        wx.showModal({//弹框
            title: '提示',
            content: "是否删除",
            success: function (res) {
              if (res.confirm) {//点确定之后
                  console.log("确定")  
                  db.remove({
                      success: function(res) { 
                          alert("删除成功"); }
              })
            }else if (res.cancel)  { //点取消之后
                  console.log("取消"),
                  alert("删除失败") ; }
}})
},
    upDate:function(e){
        let that =this;
        let myName =this.data.myName;
        let myPhone =this.data.myPhone;
        let myRemark=this.data.myRemark;
        let id=this.data.Id;
        let db=wx.cloud.database().collection("test").doc(id);
        db.update({
            data:{
                name:myName,
                phone:myPhone,
                remark:myRemark,
            },
            success:function(res){
                toast("修改成功");
            }
        })

    },

    inputText:function(e) {
        console.clear();
        let id = e.target.id;
        let text = e.detail.value;
        this.setData({[id]:text});
        console.log(id + "输入中。。。" + text);
      },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () { },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {}
});
function toast(message) {
    wx.showToast({
      title: message,
      icon: 'none',
      duration: 1000
    });
  };
   function alert(message){
    wx.showModal({
      title:'温馨提示',
      content: message,
      showCancel:false
    });
  };

下一步“战”云储存的图片---上传与下载 ---共勉！！！

小程序动态循环添加input和删除指定的input获取数据
weixin_45778720的博客
05-12 911
<view class="containor"> <view class="imgs-containor"> <view class="input-item input-item-full"> <view class="add-attribute"> <view type="primary" size="mini" bindtap="addList" style='font-size: 12px; heigth:55
微信小程序的对云数据库的增删改查
Teal__的博客
08-31 989
标题微信小程序的对云数据库的增删改查 *创建数据的类型 类型 介绍 Bumber 字符串类型 ‘a’ ,‘b’ Number 数值类型 0 1 2 3 Boolean 布尔值类型 true || false Object 对象类型 obj:{num:1,name:‘哈利波特’} Null 空值 Array 数组 list:[‘item1’,'item2] Date 时间类型 Geopoint 位置类型 一、查询数据 1、云函数查询数据库数据 // 文件
微信小程序云开发———云数据库
momo不会IT的博客
09-06 1万+
微信小程序的注册及云开发——云数据库
微信小程序云开发实现增删改查功能
10-16
主要为大家详细介绍了微信小程序云开发实现增删改查功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序云开发中增删改查
lap2004的专栏
07-28 99
学习微信小程序中云开发，云数据库增删改查，提供下面参考资料， 首先，这个csdn博客大体写了一下，基本能解决问题 https://blog.csdn.net/qq_15034541/article/details/116207721 详细的资料查看w3cschool https://www.w3cschool.cn/weixinapp/weixinapp-vit32zdz.html ...
小程序开发.云数据库
胡老大的唯一大老婆的博客
11-25 250
云数据库 初始化数据库: const db=wx.cloud.database();//初始化数据库 然后在云开发的,数据库里添加一个集合,也就是创建一个表 然后就可以对云数据库进行代码中的增删改查.官方文档相当齐全,大家移步官方文档.云数据库官网 ...
小程序云开发之数据库增删改查操作
pengyu1801的专栏
05-20 770
小白学习，大神略过。 创建一张新的表格 增加数据 权限处理 下面开始代码编写 index.wxml <!--index.wxml--> 输入学号：<input bindinput="getStuId"/> 输入姓名：<input bindinput="getName"/> 输入年级：<input bindinput="getGrade"/> 输入专业：<input bindinpu...
小程序云开发数据库操作
越努力越幸运的博客
04-19 769
文章目录一、数据库操作0.手动操作1.请求数据库数据2.条件查询where3.查询单条数据doc（）4.修改单条数据5.删除单条数据 一、数据库操作 在小程序中每个云环境都有自己的云id，在云开发中的设置里 具体是对哪个云环境进行操作要把这里的环境ID放到app.js初始化云开发环境中 0.手动操作 点击云开发 点击数据库就可以手动操作我们的云数据库啦（非关系型数据库）。 点击左边的+可以添加集合（相当于关系型数据库的表） 添加集合后可以添加记录（相当于关系型数据库的一条条记录） 注意：要想用以下代
微信小程序云开发数据库增删改查
01-20
1.todos 数据库表的名称 2.data 字段表示需新增的 JSON 数据  页面写法： db.collection('todos').add({ data: { due: new Date(2018-09-01), }, success: function(res) { console.log(res) } })  如果...
python操作小程序云数据库实现简单的增删改查功能
09-19
首先，小程序云开发提供了HTTP API，使得开发者能够在小程序外部访问和操作云资源，这包括云数据库。在此之前，云数据库主要通过小程序内部或云函数进行访问，而现在，通过官方接口，我们可以使用任何支持HTTP请求的...
微信小程序云数据库增删改查
weixin_56211720的博客
01-15 2394
新建微信小程序项目，记得选择云开发， 点击云开发 如果没有环境，先添加新环境，如果有，你可以新建也可以使用原来的环境（好像只可以新建2个新环境，要多建要申请） 点击cloudfunctions右键，添加环境 点击云开发-数据库-集合名称右侧的+号新建集合 点击添加记录来添加数据 在app.js中更改env。env:"环境id" 接下来，进行代码的演示。 先新建一个页面index 查询 //数据库请求 constdb=wx.cloud.da...
微信小程序之云数据库增删改查
weixin_48747169的博客
06-03 1072
微信小程序云开发数据库增删改查
微信小程序——云开发实现数据库的增删查改操作
beekim的博客
10-27 2620
1.前期准备 在使用云开发之前需要先在app.js中初始化云开发的配置，上一篇文章已经提到。连接：https://blog.csdn.net/beekim/article/details/120977861 在云开发的数据库中新建一个集合 app.json中配置一个新的页面，并设置入口页面，方便调试 微信官方文档中关于button 关于form 代码： <!--pages/datatest/datatest.wxml--> <text>数据库crud测试:</text
微信小程序云开发实现增删改查操作
weixin_53261137的博客
10-15 981
微信小程序云开发实现增删改查操作
微信小程序云开发（6）— “增删改查综合案例(用户输入数据并动态添加到数据库)”
一切因为是码农
08-07 2064
实际需求： 1.有用户输入数据的文本框和按钮 2.通过文本框的getName()和getValue()方法来获取用户输入的名称和值 3.有输入校验（输入为空时弹窗提醒用户） 4.通过按钮的add方法将数据传入到数据库中 1.demo.wxml 商品名：<input type="text" bindinput="getName"></input> 价格：<input type="text" bindinput="getValue"></input> <b
云开发 增加阅读数写入数据库
ddch1的博客
04-23 1936
clickRow(res){ //1.获取点击的id和索引值 //2.云函数进行更新操作 //3.前端连后端，将数据传输给后端，后端再返回数据 //4.重新渲染列表数据 var {id,idx}=res.currentTarget.dataset console.log(id) wx.cloud.callFunction({ name:"demoUpList", data:{ id:"id" } }).then(res...
微信小程序云开发之增删改查
m0_74020066的博客
03-23 3268
最近在学习微信小程序的云开发，本想着按照原来的方法学，但是又突然想起来，好多知识学过之后就会在不知不觉中忘了，故产生了写博客记录下所学内容的想法。好，我们直接进入正题。以下附上学习的链接🔗以下的内容来自链接和笔记在开始使用数据库API进行增删改查操作之前，需要先获取数据库的引用。
微信小程序云开发，数据库“增”、“删”、“改”、“查”操作
热门推荐
想不到名字的小杨的博客
03-23 1万+
目录前言云开发数据库一、创建数据库二、“增”三、“删”四、“改”五、“查” 前言 因为项目刚接触小程序，算是个萌新，写这篇文章是为了巩固一下所学的东西（其实就是闲着太无聊了😂），代码是靠自己理解的，如果有错，欢迎各位指正(￣︶￣*)) 废话不多说了，嘿喂狗~~ 云开发数据库 首先说到数据库操作就会让人想到那四个字 “增”、“删”、“改”、“查” 那么在进行数据操作之前应该先干嘛呢 没错就是先新建一个数据库啊，没数据库咋操作啊（bushi(●’◡’●)） 一、创建数据库 首先，打开微信开发者工具新建一
微信小程序云开发用户增删改查
最新发布
07-27
在微信小程序云开发中，用户可以通过数据库API进行增删改查操作。首先，需要获取数据库的引用\[2\]，可以使用以下代码进行初始化： ```javascript const db = wx.cloud.database(); ``` 接下来，需要获取云端数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三目条件

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值