zoukankan      html  css  js  c++  java
  • 小程序-云数据库的add,get,remove,update

    • 云数据库的使用就是使用简单的原生封装wx.cloud.database().collection("list"),然后就是add,get,remove,update四个方法

    初始化(app.js)

    App({
        onLaunch: function () {
            // 云环境初始化
            wx.cloud.init({
            env:"环境id"
            })
        }
    })
    

    增删查改

    index.wxml

    bindinput获取输入的内容

    <!-- 添加数据 -->
    <input placeholder="输入名字" bindinput="addName"></input>
    <input placeholder="输入年龄" bindinput="addAge"></input>
    <button bindtap="addData" type="primary">添加数据</button>
    <!-- 查询数据 -->
    <button bindtap="getData" type="primary">查询数据</button>
    <!-- 删除数据 -->
    <input placeholder="填写要删除的id" bindinput="delDataInput"></input>
    <button bindtap="delData" type="primary">删除数据</button>
    <!-- 更新数据 -->
    <input placeholder="输入要更新的id" bindinput="udpDataInput"></input>
    <input placeholder="输入年龄" bindinput="udpAge"></input>
    <button bindtap="udpData" type="primary">更新数据</button>
    

    index.js

    doc(id)筛选

    //数据库api获取数据
    //标准操作
    const DB=wx.cloud.database().collection("list")
    let name=""
    let age=""
    let id=""
    Page({
        //获取用户输入的name
        addName(event){
            // console.log(event.detail.value);
            name=event.detail.value
        },
        //获取用户输入的age
        addAge(event){
            // console.log(event.detail.value);
            age=event.detail.value
        },
        //添加数据
        addData(){
            DB.add({
                data:{
                    name:name,
                    age:age
                },
                success(res){
                    console.log("添加成功",res);
                },
                fail(res){
                    console.log("添加失败",res);
                }
            })
        },
        //查询数据
        getData(){
            DB.get({
            success(res){
                console.log("查询数据成功",res);
            }
            })
        },
        //要删除的id
        delDataInput(event){
            console.log("要删除的id",event.detail.value)
            id=event.detail.value
        },
        // 删除数据
        delData(){
            DB.doc(id).remove({
                success(res){
                    console.log("删除成功",res);
                },
                fail(res){
                    console.log("删除失败",res);
                }
            })
        },
        // 要更新的id
        udpDataInput(event){
            console.log("要更新的id",event.detail.value)
            id=event.detail.value
        },
        //要更新的年龄
        udpAge(event){
            // console.log(event.detail.value);
            age=event.detail.value
        },
        //更新数据
        udpData(){
            DB.doc(id).update({
                data:{
                    age:age
                },
                success(res){
                    console.log("更新成功",res);
                },
                fail(res){
                    console.log("更新失败",res);
                }
            })
        }
    })
    

    获取云数据库数据并显示

    home.wxml

    <block wx:for="{{datalist}}" wx:key="index">
        <view>
            <view>{{item.title}}</view>
            <view>{{item.desc}}</view>
        </view>
    </block>
    

    home.js

    Page({
        data: {
            datalist:[]
        },
        onLoad: function (options) {
            wx.cloud.database().collection("homelist")
            .get()
            .then(res=>{
                console.log("获取成功",res)
                this.setData({
                    datalist:res.data
                })
            })
            .catch(err=>{
                console.log("获取失败",err)
            })
        }
    })
  • 相关阅读:
    LeetCode-49. Group Anagrams
    LeetCode-242.Valid Anagram
    LeetCode-239.Sliding Window Maximum
    LeetCode-703. Kth Largest Element in a Stream
    LeetCode-225.Implement Stack using Queues
    LeetCode-232.Implement Queue using Stacks
    LeetCode-25. Reverse Nodes in k-Group
    LeetCode-142.Linked List Cycle II
    LeetCode-141. Linked List Cycle
    LeetCode-24.Swap Nodes in Pairs
  • 原文地址:https://www.cnblogs.com/dongxuelove/p/13054774.html
Copyright © 2011-2022 走看看