微信小程序使用云数据库,查询某个时间范围内的数据,显示在页面上并且可以导出到桌面的excel表格

我要实现的功能

1、根据日期范围查询云数据库

2、把数据库里面的符合查询条件的数据显示在页面上

3、点击导出按钮,把数据导出到excel表格里面

来看一下我的效果

 


根据日期范围查询云数据库

云开发中查询某个时间范围,也就是大于或等于某个时间,小于或等于某个时间;

这个语句是如下的格式,但是注意_.gte()这个里面的数,只能是Date或者是Number类型的!

因此你的date数据,要么是时间戳要么是Date类型的!不然你不会查询得出你想要的结果的

const db = wx.cloud.database({});
    const cont = db.collection('bill');
    const _ = db.command
    cont.where({
      date: _.gte(that.data.sdate).and(_.lte(that.data.edate))
    }).get({
      //如果查询成功的话
      success: res => {
        console.log("信息查询:",res.data)
        
      }
    })

我的Date是时间戳类型,也就是Number类型 

扫描二维码关注公众号,回复: 11062536 查看本文章

我在执行插入数据库的时候,获取当前的时间戳

  getNowFormatDate:function() {//获取当前时间
    var time = Math.round(new Date() / 1000)
    console.log("时间戳位:", time);
    return time;
  },

我现在要查询4月17日到4月18日之间的数据

第一步、我需要一个时间选择器

query.wxml

<!-- 根据时间查询 -->
<view class="section">
  <picker mode="date" value="{{sdate}}" start="2010-09-01" end="2050-09-01" bindchange="bindSDateChange" >
    <view class="picker">
      请选择开始查询日期  {{sdate}}
    </view>
  </picker>
    <picker mode="date" value="{{edate}}" start="2010-09-01" end="2050-09-01" bindchange="bindEDateChange">
     <view class="picker">
     请选择结束查询日期 {{edate}}
    </view>
  </picker>
</view>
<view><button   bindtap="queryUser" class="info">登记信息查询</button></view>
<!-- 根据时间查询 -->

第二步、我们需要获取这两个时间,把这两个时间带到我们想要显示信息的页面,也就是user页面

query.js

// pages/query/query.js
Page({
  data: {
   sdate:'',
   edate:''
  },
  onReady: function () {
    var that = this;
    var tm = that.getDate()
    that.setData({
      sdate:tm,
      edate:tm
    })

  },
   //登记信息查询
  queryUser:function(){
    //把时间接受过来传给user页面
    var sdate=this.data.sdate+" 00:00:00"
    var edate = this.data.edate + " 23:59:59"
    //变成时间戳
    wx.navigateTo({
      url: '../user/user?sdate=' + sdate + "&edate=" + edate
    });
  },
   //账单信息查询
  bindSDateChange: function (e) {
    this.setData({
      sdate: e.detail.value
    })},
    bindEDateChange: function (e) {
      this.setData({
        edate: e.detail.value
      })
  }

})

查询并且显示

/user/user.js页面

// pages/user/user.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    sdate:0,
    edate:0,
    list:[]
  },
  onLoad: function (options) {
    var that = this;
    that.setData({                 //this.setData的方法用于把传递过来的id转化成小程序模板语言
      sdate: Math.round(new Date(options.sdate).getTime() / 1000),         
      edate: Math.round(new Date(options.edate).getTime() / 1000),
    })
    //查询数据库中的表信息显示在页面上面
    //日期查询
    //1、引用数据库
    const db = wx.cloud.database({});
    const cont = db.collection('info');
    //2、开始查询数据了  news对应的是集合的名称
    const _ = db.command
    cont.where({
      date: _.gte(that.data.sdate).and(_.lte(that.data.edate))
    }).get({
      //如果查询成功的话
      success: res => {
        //这一步很重要,给ne赋值,没有这一步的话,前台就不会显示值
        var list = res.data
        //处理一下数据的时间格式
        for (var i = 0; i < list.length; i++) {
          list[i].date = that.dateFormat(list[i].date);
        }
        //这一步很重要,给ne赋值,没有这一步的话,前台就不会显示值
        that.setData({
          list: list
        })
      }
    })
    //日期查询
     //查询数据库中的表信息显示在页面上面
  },
  //把时间戳改成字符串
  dateFormat: function (timestamp) {
    var f = new Date(timestamp * 1000);
    var year = f.getFullYear();
    var month = (f.getMonth() + 1) > 10 ? (f.getMonth() + 1) : '0' + (f.getMonth() + 1);
    var day = f.getDate() > 10 ? f.getDate() : '0' + f.getDate();
    var hour = f.getHours() > 10 ? f.getHours() : '0' + f.getHours();
    var minute = f.getMinutes() > 10 ? f.getMinutes() : '0' + f.getMinutes();
    var second = f.getSeconds() > 10 ? f.getSeconds() : '0' + f.getSeconds();
    var tm = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    return tm
  },
  //把时间戳改成字符串
  export(){
    let that = this
    wx.cloud.callFunction({
      name: "excel",
      data: {
        userdata: that.data.list,
      },
      success(res) {
        console.log("保存成功", res)
        that.getFileUrl(res.result.fileID)
      },
      fail(res) {
        console.log("保存失败", res)
      }
    })
  },
  //获取云存储文件下载地址,这个地址有效期一天
  getFileUrl(fileID) {
    let that = this;
    wx.cloud.getTempFileURL({
      fileList: [fileID],
      success: res => {
        var url = res.fileList[0].tempFileURL
        console.log("文件下载链接", url)
        wx.setClipboardData({
          data: url,
          success(res) {
            wx.getClipboardData({
              success(res) {
                console.log("下载链接已复制", res.data) // data
              }
            })
          }
        })
      },
      fail: err => {
      }
    })
  },
})

/user/user.wxml页面

<!--pages/user/user.wxml-->

<!-- 显示所有的登记信息 -->
<view class="div">
<text class="head">登记用户的信息</text>
<view bindtap="export" class="export">导出信息</view>
<view  wx:for="{{list}}" wx:key="id">
 <view class="vw">
  <label for="" class="font14" class="cs">{{item.father}}</label>
    <label for="" class="font14" class="cs">{{item.fname}}</label>
    </view>
    <view class="vw">
     <label for="" class="font14" class="cs">阳上 {{item.child}}</label>
       <label for="" class="font14" class="cs">{{item.cname}}</label>
          </view>
    <view class="vw">
        <label for="" class="font14" class="cs">住址</label>
        <label for="" class="font14" class="cs">{{item.address}}</label>
           </view>
    <view class="vw">
         <label for="" class="font14" class="cs">{{item.oname}}</label>
         <label for="" class="font14" class="cs">{{item.tell}}</label>
    </view>
    <view class="vw">
         <label for="" class="font14" class="cs">登记日期</label>
         <label for="" class="font14" class="cs">{{item.date}}</label>
    </view>
    <view class='line'></view>
</view>
</view>

/user/user.wxss

/* pages/user/user.wxss */
.head{
  font-size: 21px;
  margin-left: 78px;
}
.cs{
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line{
width: 100%;
height: 1rpx;
background-color:#ffd995;
margin-top:7px;
margin-bottom:7px;
}
.vw{
  margin-top: 5px;
}
.export{
background-color: #ca0c16;
width: 78px;
height: 22px;
color: white;
padding-left: 27px;
}

以上是查询数据库以及显示数据库的内容


但是导出excel表格这里,用到了云函数来实现

是excel云函数,我们安装依赖的前提是电脑安装了node.js,没有的去官网下载,安装很简单!

我们可以右击云函数,点击终端打开,我们输入npm install wx-server-sdk这个依赖  npm install node-xlsx这个依赖

需要安装node-xlsx与wx-server-sdk两个依赖;

const cloud = require('wx-server-sdk')
//这里最好也初始化一下你的云开发环境
cloud.init({
  env: 'tjn-k3u19',
})
//操作excel用的类库
const xlsx = require('node-xlsx');
// 云函数入口函数
exports.main = async (event, context) => {
  try {
    let { userdata } = event
    //1,定义excel表格名
    let dataCVS = 'info.xlsx'
    //2,定义存储数据的
    let alldata = [];
    let row = ['牌位名', '姓名', '地址','立牌人关系','姓名','订单姓名','订单号码','订单日期']; //表属性
    alldata.push(row);

    for (let key in userdata) {
      let arr = [];
     //这里对应的是你的表里面的属性的字段,不要照抄,会报错的
      arr.push(userdata[key].father);
      arr.push(userdata[key].fname);
      arr.push(userdata[key].address);
      arr.push(userdata[key].child);
      arr.push(userdata[key].cname);
      arr.push(userdata[key].oname);
      arr.push(userdata[key].tell);
      arr.push(userdata[key].date);
      alldata.push(arr)
    }
    //3,把数据保存到excel里
    var buffer = await xlsx.build([{
      name: "mySheetName",
      data: alldata
    }]);
    //4,把excel文件保存到云存储里
    return await cloud.uploadFile({
      cloudPath: dataCVS,
      fileContent: buffer, //excel二进制文件
    })

  } catch (e) {
    console.error(e)
    return e
  }
}

要记住,上传与部署,不然没用!!


点击导出,提示复制成功,你只需要打开浏览器粘贴连接就可以了!!

因为我在电脑模拟。控制台自动打印出来了连接,我点击了就出现了加载页面!


发布了123 篇原创文章 · 获赞 4 · 访问量 5666

猜你喜欢

转载自blog.csdn.net/tian_jiangnan/article/details/105594563