微信小程序雲開發初學者入門教程二

微信小程序雲開發初學者入門教程二-前端操作數據庫模塊

如何操作數據庫，作爲一名前端，如果對數據的知識不夠熟悉也沒關係，從現在開始好好學習就行，數據庫的操作內容差不多涉及增刪改查四大模塊，花一些業餘的時間在上面，也必有所得。

數據庫操作大多數需要用戶openid,需要先配置好吧login雲函數，如果已經配置好了，獲取用戶的openid之後，開始步驟：

步驟

1：打開雲開發控制檯，進入到數據庫管理模塊

圖片.png

2：選擇添加集合，集合名稱爲counters，添加完成之後的界面

圖片.png

3：可以看到counters集合出現在左側集合列表中

注：集合必須在雲開發控制檯中創建

4：新增一條記錄試一試

a. 打開pages/databaseGuide/databaseGuide.js文件，定位到 onAdd 方法

圖片.png

b：選中所有註釋過的代碼，ctrl+/快捷鍵，解除註釋

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增記錄成功',
        })
        console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
        console.error('[數據庫] [新增記錄] 失敗：', err)
      }
    })
  },

c. onAdd 方法會往 counters 集合新增一個記錄，新增如下格式的一個 JSON 記錄

{ "_id": "數據庫自動生成記錄 ID 字段",
 "_openid": "數據庫自動插入記錄創建者的 openid", "count": 1 }

在桌面新建一個json文件，將這段代碼複製黏貼進去，備用

圖片.png

導入之後顯示的界面

圖片.png

d：點擊按鈕：新增記錄

圖片.png

e：在雲開發 -> 數據庫 -> counters 集合中可以看到新增的記錄

圖片.png

微信小程序雲開發數據庫操作一添加記錄實例演示

官方文檔解讀：

<!-- 新增記錄 -->
  <view class="guide" wx:if="{{step === 3}}">
    <text class="headline">新增記錄</text>
    <text class="p">1. 打開 pages/databaseGuide/databaseGuide.js 文件，定位到 onAdd 方法</text>
    <text class="p">2. 把註釋掉的代碼解除註釋</text>
    <image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
    <text class="p">3. onAdd 方法會往 counters 集合新增一個記錄，新增如下格式的一個 JSON 記錄</text>
    <text class="code">
    {
      "_id": "數據庫自動生成記錄 ID 字段",
      "_openid": "數據庫自動插入記錄創建者的 openid",
      "count": 1
    }
    </text>
    <text class="p">4. 點擊按鈕</text>
    <button size="mini" type="default" bindtap="onAdd">新增記錄</button>
    <text class="p" wx:if="{{counterId}}">新增的記錄 _id 爲：{{counterId}}</text>
    <text class="p">5. 在雲開發 -> 數據庫 -> counters 集合中可以看到新增的記錄</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
    </div>
  </view>

做一個小demo

效果如下：點擊新增記錄的按鈕的時候，會出現提示，新增的記錄爲多少，並且有彈框提示，新增記錄成功。

U6QBH3PeXy.gif

打開雲開發控制檯，點擊數據庫模塊，可以看到剛剛添加的記錄

圖片.png

wxml代碼：

<button size="mini" type="default" bindtap="onAdd">新增記錄</button>
<text class="p" wx:if="{{counterId}}">新增的記錄 _id 爲：{{counterId}}</text>

js代碼：

// pages/databaseGuide/databaseGuide.js

const app = getApp()

Page({

  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增記錄成功',
        })
        console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
        console.error('[數據庫] [新增記錄] 失敗：', err)
      }
    })
  },
})

對於數據庫的增刪改查後續會有更加細緻的文章： 1：微信小程序雲開發數據庫操作一添加記錄 2：微信小程序雲開發數據庫操作二查詢記錄 3：微信小程序雲開發數據庫操作三刪除記錄 4：微信小程序雲開發數據庫操作四更新記錄

下班之後帶着電腦回家，在地鐵上擁擠非常，感覺電腦都要被擠壞了，這幾天反思了一下從前，每天上班下班，完成老闆給的任務就可以瀟灑走人了，總覺得自己不夠努力，又或者每天重複着老舊的技術，周而復始，早已落後於前端發展的潮流，不覺開始惶恐。每天晚上開始學習，戒掉遊戲和手機，讓自己儘快達到一個沉迷於代碼不可自拔的境界。

原文作者：祈澈姑娘

微信小程序雲開發初學者入門教程二