微信小程序雲開發學習筆記（一）雲數據庫

微信小程序和后台交互掃盲：https://www.bilibili.com/video/BV1jt411E7au

雲開發：https://www.bilibili.com/video/BV1pE411C7Ca?from=search&seid=14303234966957086491

雲開發學習代碼： D:\code is here\微信小程序雲開發學習
https://github.com/ZhengLin-Li/learning-miniapp-coulddevelopment

雲開發配置的環境：cloud-learning

雲開發環境初始化准備

需要：

APPID

操作：

1. 在創建項目時，填入APPID並選擇不使用雲函數
2. 進入到開發者頁面，點擊左上角的雲開發並選擇開通
3. 設置雲開發環境名稱，可以任意填寫
4. 在project.config.json中加入字段"cloudfunctionRoot":"cloud"
5. 在打開的雲開發控制台中點擊設置，新建一個環境ID
6. app.js中刪除所有代碼，只保留env即環境ID

App({
  onLaunch: function () {
    //雲開發環境初始化
    wx.cloud.init({
      env:"cloud-learning-i44qm"
    })
  }
})

6. 在根目錄下創建文件夾（目錄）cloud

雲數據庫

新增固定的數據

效果：通過點擊一個按鍵可以向雲數據庫中新增固定字段的內容

實現：

1. 在index.wxml中，加入如下代碼

<button bindtap="addData">新增數據</button>

2. 點擊雲開發-->數據庫-->創建集合testlist
3. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("testlist")
Page({
  addData(){
    console.log('調用添加數據的方法')
    DB.add({
      data:{
        name:'panda bear',
        price:9999
      },
      success(res) {
        console.log("成功", res)
      },
      fail(res) {
        console.log("失敗", res)
      }
    })
  }
})

測試：點擊新增數據按鈕，發現控制台上有相應輸出，再進入到雲開發的數據庫頁面，發現上述字段已新增

新增用戶輸入的不確定數據

效果：用戶通過輸入想新增的數據並點擊確定新增按鍵，即可向雲數據庫中新增用戶想新增的數據

實現：

1. 在index.wxml中加入如下代碼

<input placeholder="輸入名字" bindinput="addName"></input>
<text>\n</text>
<input placeholder="輸入年齡" bindinput="addAge"></input>
<text>\n</text>
<button bindtap="addData" type="primary">新增數據</button>

2. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("list")
let name = ''
let age = ''

Page({
  addName(event){
    //console.log(event.detail.value)
    name = event.detail.value
  },

  addAge(event){
    //console.log(event.detail.value)
    age = event.detail.value
  },

  addData() {
    console.log('調用添加數據的方法')
    DB.add({
      data: {
        name: name,
        age: age
      },
      success(res) {
        console.log("添加數據成功", res)
      },
      fail(res) {
        console.log("添加數據失敗", res)
      }
    })
  }
})

測試：輸入數據后，點擊新增數據按鈕，發現控制台上有相應輸出，再進入到雲開發的數據庫頁面，發現輸入的字段已新增

查找已有的數據

效果：通過點擊一個按鍵可以查詢雲數據庫中的內容

實現：

1. 在index.wxml中，加入如下代碼

<button bindtap="getData">查詢數據</button>

3. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("testlist")
Page({
  getData() {
    console.log('調用查詢數據的方法')
    DB.get({
      success(res){
        console.log('查詢數據成功',res)
      }
    })
  }
})

測試：點擊查詢數據按鈕，發現控制台上有相應輸出

通過ID刪除數據

效果：用戶通過輸入想刪除數據的ID並點擊確定刪除按鍵，即可刪除雲數據庫中用戶想刪除的數據

實現：

1. 在index.wxml中加入如下代碼

<input placeholder="要刪除數據的ID" bindinput="delDataInput"></input>
<text>\n</text>
<button bindtap="delData" type="primary">刪除數據</button>

2. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("list")
let id = ''

Page({
  delDataInput(event){
    //console.log(event.detail.value)
    id = event.detail.value
  },

  delData() {
    console.log('調用刪除數據的方法')
    DB.doc(id).remove({
      success(res) {
        console.log('刪除數據成功', res.data)
      }
    })
  }
})

測試：輸入想刪除數據的ID后（注意不要帶有引號""），點擊確定刪除按鍵，發現控制台上有相應輸出，再進入到雲開發的數據庫頁面，發現輸入id對應的該條數據已刪除

通過屬性刪除數據

效果：用戶通過輸入想刪除數據的name的值並點擊確定刪除按鍵，即可刪除雲數據庫中用戶想刪除的數據

實現：

1. 在index.wxml中加入如下代碼

<input placeholder="輸入要刪除數據的name" bindinput="delDataInputName"></input>
<text>\n</text>
<button bindtap="delDataByProperty" type="primary">通過屬性刪除</button>

2. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("list")
let nameDelete = ''

Page({
  delDataInputName(event){
    //console.log(event.detail.value)
    nameDelete = event.detail.value
  },
  
  delDataByProperty() {
    console.log('調用屬性刪除數據的方法')
    DB.where({
      name: nameDelete
    }).remove({
      success(res) {
        console.log('刪除數據成功', res.data)
      },
      fail(res) {
        console.log("刪除數據失敗", res)
      }
    })
  }
})

測試：輸入想刪除數據的name的值后（注意不要帶有引號""），點擊確定刪除按鍵，發現控制台上有相應輸出，再進入到雲開發的數據庫頁面，發現輸入的想刪除數據的name的值對應的該條數據已刪除


另：
如果name為abcd的有多個數據，則全部name為abcd的數據都會被刪除，如下圖：

修改更新數據

更新有兩個，updata和set，分別為：
update：局部更新一個或多個記錄
set：替換更新一個記錄
此處演示update

效果：用戶通過輸入數據ID以及修改后的name的值並點擊修改更新數據按鍵，即可修改更新數據雲數據庫中用戶想修改更新數據的數據

實現：

1. 在index.wxml中加入如下代碼

<input placeholder="輸入要更新的數據的ID" bindinput="updateID"></input>
<input placeholder="輸入更新后的name的值" bindinput="updateValue"></input>
<button bindtap="updateData" type="primary">修改更新數據</button>

2. 在index.js中加入如下代碼

const DB = wx.cloud.database().collection("list")
let updateID = ''
let updateValue = ''

Page({
  updateID(event) {
    console.log(event.detail.value)
    updateID = event.detail.value
  },

  updateValue(event) {
    console.log(event.detail.value)
    updateValue = event.detail.value
  },
  
  updateData() {
    console.log('調用修改更新數據的方法')
    DB.doc(updateID).update({
      data: {
        name: updateValue
      },
      success(res) {
        console.log('修改更新數據成功', res.data)
      },
      fail(res) {
        console.log("修改更新數據失敗", res)
      }
    })
  }
})

測試：輸入數據ID以及修改后的name的值並點擊修改更新數據按鍵，發現控制台上有相應輸出，再進入到雲開發的數據庫頁面，數據已修改更新

小程序雲開發數據庫的增刪改查已經全部完成！

我的郵箱：[e-mail]
我的博客：http://9pshr3.coding-pages.com/
或https://zhenglin-li.github.io/
我的csdn：https://me.csdn.net/Panda325
我的簡書：https://www.jianshu.com/u/e2d945027d3f
我的今日頭條：https://www.toutiao.com/c/user/4004188138/#mid=1592553312231438
我的博客園：https://www.cnblogs.com/zhenglin-li/