微信小程序 云数据库使用(下)

  上一个简述了数据库写入，现在简述数据库的读取。随机读取数据库里面的一个故事，显示在页面。
数据库写入:https://blog.youkuaiyun.com/weixin_45488643/article/details/113003450
简单界面如下：

1、js文件

where 条件查询，在这个示例里面其实并没有使用到，如果要模拟登录界面查询数据库，就可以在里面添加条件。

// pages/index2/index2.js
var util = require('../../utils/util.js');
wx.cloud.init()//云函数 初始化
var num,verficationPeopleMap;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    Content_Title:'',
    Content:'',
    vehicle_list:[],
    titles:[],
    contents:[]
  },
  Searching_stories:function(){
    //查询故事
    const db = wx.cloud.database();
    const collections = db.collection('Bedtime_Stories')
    const _ = db.command  

    collections.where({}  //{_openid: app.globalData.openid,},  //条件查询
      ).get({ // .get() 获取集合 / 记录数据    //where({_openid: res.result.openid})
      success: (res)=> {
        this.data.vehicle_list=JSON.stringify(res.data, null, 2) //值转换为 JSON 字符串
        console.log(this.data.vehicle_list)
       // console.log("this.data.vehicle_list:"+typeof(this.data.vehicle_list)); //查询数据类型
        
        verficationPeopleMap=JSON.parse(this.data.vehicle_list);// json字符串转对象
        //console.log("verficationPeopleMap:"+typeof(verficationPeopleMap)); //查询数据类型
        //console.log("verficationPeopleMap:",verficationPeopleMap)
        num = Math.floor(Math.random() * verficationPeopleMap.length)//随机数
        const name = verficationPeopleMap[num] //随机选择一个小故事
        console.log(name.data.title)
        this.setData({
          Content_Title:name.data.title,
          Content:name.data.substance,
          })
        
      }, 
      fail: (err) => {
        wx.showToast({
          icon: "none",
          title: '查询记录失败',
        })
      }
    })
  },
  last_click:function(e){
  
    if(num==0){
      num=verficationPeopleMap.length;
    }
    const name = verficationPeopleMap[--num] //选择上一个小故事
    console.log(name.data.title)
    this.setData({
      Content_Title:name.data.title,
      Content:name.data.substance,
      })
    
  },
next_click:function(e){
  if(num==verficationPeopleMap.length-1){//
    num=-1;
  }
    const name = verficationPeopleMap[++num] //选择下一个小故事
    
    console.log(name.data.title)
    this.setData({
      Content_Title:name.data.title,
      Content:name.data.substance,
      })
  
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2、wxml文件

<!--pages/index2/index2.wxml-->
<view >
  <image class='image'  src='../images/img3.jpg'></image>
</view >
<div class="btns" >
       <button type="default"   hover-class="btn-hover"  style="width:30vw" bindtap="last_click" >上一个</button>  
       <button  type="default"  hover-class="btn-hover" style="width:30vw"  bindtap="Searching_stories" >查询</button>   
      <button  type="default"   hover-class="btn-hover" style="width:30vw"  bindtap="next_click" >下一个</button>   
</div>
<view class="center-text">
  <rich-text nodes="{{Content_Title}}"></rich-text>
</view>
<view class="str1">
  <rich-text nodes="{{Content}}"></rich-text>
</view>

3、wxss文件

/* pages/index2/index2.wxss */
.image{ /* 页面图片 */
  position: absolute;
  position: fixed; /* 页面滑动 背景不变 */ 
  top:0rpx;
  left:0rpx;
  width:100%;
  height:100%;
  z-index:-1;
}
.btns {
  /* position: fixed;  按键悬停*/
  margin-top: 40rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}
.center-text{
  font-size:18px;      /*设置文字字号*/
  display: flex;
  align-items: center;
  justify-content: center;
 }
 /* 首行缩进20rpx*/
 .str1{
  /*text-indent: 50rpx;*/
  font-size:18px;      /*设置文字字号*/
  text-indent:2em;  /*段落排版--缩进*/
  padding-left: 0rpx;
  line-height:1.8em;           /*段落排版--行间距（行高）*/
  /*letter-spacing:50px;         段落排版--中文字间距*/
  text-align: left;
  word-break:normal;/*控制整个字符在一行的断行，不会造成一个单词分行显示*/
}