微信小程式雲開發入門(4)之資料庫的增删改查(查:含模糊查找)

1.先上模糊查找最終成果

點選查詢按鈕後

2.思路

我們如果想要在前端查詢一個資料，自然需要一個查詢框，這裡就是input輸入框。然後點選“查詢”button按鈕後，就可以查詢到資料，并且呈現在前端頁面上。

3.前端頁面

這裡我們知道大緻思路後，首先先寫前端頁面，仿照我的上一篇文章。我們首先先把input輸入框和button按鈕放入我們的from表單裡面。

<form class="form1" bindsubmit="btnSbmit">
    <view class="top">
      <view class="inputtMeth">
        <input class="inputMeth" placeholder="請輸入查找使用者姓名" id="inputName" name="inputName"></input>
      </view>
      <view class="buttonMeth">
        <button class="BT" form-type="submit">查詢</button>
      </view>
    </view>
  </form>
           

4.後端

首先我們看到前端點選按鈕後觸發的函數是btnSbmit，是以我們在後端定義 btnSbmit：function（e）,這裡的e就是我們input裡面寫入的資料，有興趣的同學可以根據我的上一篇文章，console.log()以下看以下這裡面的e傳過來的是什麼資料。

定義完後我們可以看一下官方微信雲開發資料庫的查詢文檔

我們可以看到給的例子是已經是背景寫好的固定查詢，而不是前端傳過來的值的查詢。

下面就直接分别放出精确查找和模糊查找代碼。

// 精确查詢操作
 btnSbmit: function (e) {
   let that=this
    const db = wx.cloud.database()
    db.collection('userData').where({
      //這裡是判斷語句 判斷我資料庫的資料name是否等于e.detail.value.inputName(前端傳過來需要查詢的人)
      name: e.detail.value.inputName
    }).get({
      success: res => {
        that.setData({
          //指派語句，這裡的userPart是我在這個page頁面裡面的data裡定義的一個數組，為什麼要定義一個數組呢？
          //因為我下面的案例是模糊查找，既然是模糊查找，那必然不可能隻查出一個資料，自然是多條資料，是以用數組來進行指派。
          userPart: res.data
        })
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2)
        })
        console.log(res.data)
        console.log(this)
        console.log('[資料庫] [查詢記錄] 成功: ', res)
      },
      fail: err => {
      //wx.showToast是指如果查詢失敗，會在前端出現一個小的視窗，提示：“查詢記錄失敗”
      //icon官方文檔裡面也有，是指一些固定的圖檔。
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[資料庫] [查詢記錄] 失敗：', err)
      }
    })
  }
           

模糊查詢又叫正則查詢，官方文檔我也貼出來了，有興趣的可以觀看以下。db.RegExp

廢話不多說，直接上代碼

btnSbmit: function (e) {
    let that = this;
    const db = wx.cloud.database()
    //userData是我的資料庫表名
    db.collection('userData').where({
      name:/e.detail.value.inputName/i
    })
    db.collection('userData').where({
      name:db.RegExp({
        regexp:e.detail.value.inputName,
        options:'i',
      })
    }).get({
      success: res => {
        that.setData({
          userPart: res.data
        })
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2),       
        })
        console.log('[資料庫] [查詢記錄] 成功: ', res)  
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[資料庫] [查詢記錄] 失敗：', err)
      }
    })
  },
           

5.至此後端已經全部書寫完畢，直接把我的代碼沾到您的代碼中，會發現已經可以在控制台中輕松的對資料進行查詢。

那麼問題來了，如何才可以把模糊查詢的資料不适用跳轉頁面的方法，直接呈現在目前頁面呢？(如下圖)

6.js背景查詢資料傳入到前端wxml

首先，我們根據我們上面寫的第4點，發現我在前面埋了個伏筆，我在find.js檔案裡面的data裡面建立了一個userPart數組，因為我使用的是模糊查找，既然是模糊查找，那必然不可能隻查出一個資料，自然是多條資料，是以用數組來進行指派。然後傳入到前端輸出出來。

這時候我們又要介紹一個新的知識：清單渲染

為了更直覺的了解，我直接把前端代碼貼出。

<view class="content">
//這裡的userPart就是我們在js裡面定義的數組，這裡的意思就是查到多少條資訊，我就循環多少次。
//這裡的wx:key其實我也不知道幹啥，不加上不報錯，測試也不會有問題，但是可以少一個警告。
    <view class="content1" wx:for="{{userPart}}" wx:key="{{userPart}}">
    //這裡的navigator是指查詢到一個使用者後，我點選可以擷取這名使用者的所有資訊。暫時這裡不考慮，你可以删了這句。後續我們會詳細說頁面跳轉帶值的用法。
      <navigator url="../user/user?_id={{item._id}}">
        <text class="textMeth1">姓名：</text>
        //切記這裡想要擷取資料庫裡面的資料，格式就是{{item.資料庫列名}}，我這裡資料庫存名字就是name，
        <text class="textMeth2">{{item.name}}</text>
        <text class="textMeth1">已購買:</text>
        <text class="textMeth2">{{item.number}}盒\n</text>
        <text class="textMeth1">症狀：</text>
        <text class="textMeth2">{{item.symptom}}</text>
      </navigator>
    </view>
  </view>
           

7.至此，微信雲開發的查詢操作就此結束，下面我将貼出前端後端代碼。

wxml部分

<view class="root">

  <form class="form1" bindsubmit="btnSbmit">
    <view class="top">
      <view class="inputtMeth">
        <input class="inputMeth" placeholder="請輸入查找使用者姓名" id="inputName" name="inputName"></input>
      </view>
      <view class="buttonMeth">
        <button class="BT" form-type="submit">查詢</button>
      </view>
    </view>
  </form>
  <view class="content">
    <view class="content1" wx:for="{{userPart}}" wx:key="{{userPart}}">
      <navigator url="../user/user?_id={{item._id}}">
        <text class="textMeth1">姓名：</text>
        <text class="textMeth2">{{item.name}}</text>
        <text class="textMeth1">已購買:</text>
        <text class="textMeth2">{{item.number}}盒\n</text>
        <text class="textMeth1">症狀：</text>
        <text class="textMeth2">{{item.symptom}}</text>
      </navigator>
    </view>
  </view>
  
</view>
           

wxss部分

/* pages/moty/moty.wxss */
.top {
  height: 45px;
  /* position: fixed;
  top: 0; */
  background-color: rgb(241, 239, 242);
  padding-top: 10px;
  display: flex;
  /* flex-direction: column; */
}

.root{
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 注意沒有“ .  ” */
page{
   height: 100%;
}

.content{
  flex: 1;
}

.content1{
  height: 50px;
  border-bottom: 1px solid rgb(235, 232, 236);
}

.row1{
  margin-top: 5px;
  height: 25px;

}

.inputMeth{
  border: 1px solid #c0c0c0;
  height: 30px;
  background-color: white;
  border-radius: 4px;
  flex: 4;
}

.BT{
  height: 40px;
 
}

.inputtMeth{
  height: 30px;
  flex: 6;
}

.buttonMeth{
  height: 30px;
  flex: 2;
}

.textMeth{
  height: 30px;
  width: 70px;
}

.textMeth1{
  color: grey;
}

.textMeth2{
 margin-right: 40px;
}

           

js部分

// pages/find/find.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    userPart:[]
  },
 // 精确查詢操作
//  btnSbmit: function (e) {
//    let that=this
//     const db = wx.cloud.database()
//     db.collection('userData').where({
//       //這裡是判斷語句 判斷我資料庫的資料name是否等于e.detail.value.inputName(前端傳過來需要查詢的人)
//       name: e.detail.value.inputName
//     }).get({
//       success: res => {
//         that.setData({
//           //指派語句，這裡的userPart是我在這個page頁面裡面的data裡定義的一個數組，為什麼要定義一個數組呢？
//           //因為我下面的案例是模糊查找，既然是模糊查找，那必然不可能隻查出一個資料，自然是多條資料，是以用數組來進行指派。
//           userPart: res.data
//         })
//         this.setData({
//           queryResult: JSON.stringify(res.data, null, 2)
//         })
//         console.log(res.data)
//         console.log(this)
//         console.log('[資料庫] [查詢記錄] 成功: ', res)
//       },
//       fail: err => {
//         wx.showToast({
//           icon: 'none',
//           title: '查詢記錄失敗'
//         })
//         console.error('[資料庫] [查詢記錄] 失敗：', err)
//       }
//     })
//   }
  //正則查詢
  btnSbmit: function (e) {
    let that = this;
    const db = wx.cloud.database()
    db.collection('userData').where({
      name:/e.detail.value.inputName/i
    })
    db.collection('userData').where({
      name:db.RegExp({
        regexp:e.detail.value.inputName,
        options:'i',
      })
    }).get({
      success: res => {
        that.setData({
          userPart: res.data
        })
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2),       
        })
        console.log('[資料庫] [查詢記錄] 成功: ', res)  
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[資料庫] [查詢記錄] 失敗：', err)
      }
    })
  },
})
           

如果有錯誤，歡迎大家指出，共同學習。