微信小程序云开发入门(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)
      }
    })
  },
})
           

如果有错误，欢迎大家指出，共同学习。