微信小程式 連線雲資料庫(不使用雲函數)進行 登入、註冊、查詢(包括模糊查詢)快速實現 親測可用

2022-01-13 08:00:02

當連線MySQL的時候總是出現各種各樣的小問題,可以選用微信小程式自帶的雲資料庫

建立雲資料庫

注:測試號不能建立雲資料庫
按圖中步驟來
在這裡插入圖片描述

建表

第4步中,有兩種新增方式
第一種
在這裡插入圖片描述
第二種
在這裡插入圖片描述
注意:
如果你是貼上覆制的,他會報錯非數位字元"無法使用外部字串表示法位於第1行。這時,在第一行的{後敲個回車就可以通過了。

匯入MySQL中的表

匯出

在SQLyog中,選中你要匯出的表,右鍵,備份/匯出—匯出表資料作為
在這裡插入圖片描述
在這裡插入圖片描述

匯入

在這裡插入圖片描述
在這裡插入圖片描述

雲資料庫初始化

把一下程式碼複製到指定位置

app.js 中

// app.js

App({

  onLaunch: function () {
    // 展示本地儲存能力
    wx.cloud.init({
      traceUser: true,
      env:'cloud1-1grn69gh9be4f1c3'
    })
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  }
  

})

你需要用到雲資料庫的頁面的js程式碼的最上面(Page({})的上面)

const db = wx.cloud.database()

登入註冊

註冊功能

下面這段程式碼放在你設定的註冊按鈕上的點選函數

      wx.cloud.database().collection('user').add({
      //user 指的是表,替換成你自己的。add相當於sql中的insert
       data: {
       //表中的欄位,替換成你自己的
        username: this.data.username,//頁面input傳入的值
        password: this.data.password
       },
       success(res) {
        console.log('註冊成功', res)
        wx.showToast({
         title: '註冊成功',
        })
        wx.navigateTo({
         url: '/pages/login/index',
        })
       },
       fail(res) {
        console.log('註冊失敗', res)
       }
      })

登入功能

下面這段程式碼放在你設定的登入按鈕上的點選函數

    wx.cloud.database().collection('user').where({
    //先是查詢使用者名稱是否存在
    username: this.data.username
    }).get({
    success(res) {
      console.log("獲取資料成功", res)
      let user = res.data[0]
      console.log("user", user)
      wx.setStorage({
        data: true,
        key: 'loginOk',
      })
      if(user==undefined)
      {
        console.log('登陸失敗')
        wx.showToast({
          icon: 'none',
          title: '賬號或密碼不正確',
        })
      }
      if (password == user.password&&username ==user.username) {
      console.log('登陸成功')
      wx.navigateTo({
        url: '/pages/user/user',
      })
      wx.showToast({
        title: '登陸成功',
      }),
      wx.switchTab({
        url: "/pages/user/user",
        success: function (e) {  
          var page = getCurrentPages().pop();  
          if (page == undefined || page == null) return;  
          page.onLoad();  
        }  
      })

      //儲存使用者登陸狀態
      wx.setStorageSync('user', user)
      
      } else if(res.data[0]==null){
        wx.showToast({
          title: "請先註冊",
        })
        wx.navigateTo({
          url: '/pages/register/register',
        })
      }
      else{
      console.log('登陸失敗')
      wx.showToast({
        icon: 'none',
        title: '賬號或密碼不正確',
      })
      }
    },
    fail(res) {
      console.log("獲取資料失敗", res)
    }
    })

查詢(模糊查詢)

注,精確查詢的話,剛剛登入裡面找使用者名稱的就是

  //獲取輸入的內容
  inCiju:function(e){
    this.data.ciju = e.detail.value;
},
// getGuInfo1是查詢按鈕的函數
getGuInfo1:function (e) {
  var that=this;
  console.log(this.data.ciju);//就在控制檯檢查一下傳參是否正常
  db.collection("poems").where({	 	
  //poems是表名,替換成你自己的
  //利用正則進行模糊查詢
  content: db.RegExp({
    regexp: this.data.ciju,//ciju是input傳過來的欄位,替換成自己的
    options: 's'
  })
}).get({
  success: res=>{
  	//下面這倆都是檢查用的,可以刪掉
    console.log(JSON.stringify(res.data))
    console.log(res.data)
 	//獲取資料庫的資料
    this.setData({
      gushi: JSON.stringify(res.data),
    })
    //下面是帶引數跳轉到另一頁面,不需要可以刪掉。
     const shici = JSON.stringify(res.data)
    wx.navigateTo({
       url: '../search/search?shici='+shici,
       })
     }
  })