6.2【微信小程序全栈开发课程】记录页面（二）--获取记录数据

1、添加data变量

添加records变量，用来保存记录数据

data () {
  return {
    show_record:false,
    userinfo:{},
    records:[],
  }
},

2、引入get工具函数

//参考代码，无需粘贴
//<script>


//需要添加的部分
import {get} from '@/util'

3、添加获取记录方法

在record.vue文件中添加getRecords方法，用来获取记录数据

//参考数据，无需粘贴
//data () {
  //...
//},


//需要添加的部分
methods:{
  async getRecords () {
    //调用后台数据时显示「加载中」提示框
    wx.showToast({
      title: '加载中',
      icon: 'loading'
    })
    //需要传到后台的数据
    const data = {
      openid: this.userinfo.openId,
    }
    //将后台传过来的数据保存到records变量中
    const records = await get('/weapp/getrecords', data)
    this.records = records.records
    console.log("从后台返回的记录数据：",this.records)
    //通过records数组的长度来判断show_record变量为false或者true
    if(this.records.length === 0){
      this.show_record = true
    }else{
      this.show_record = false
    }
    wx.hideToast()
  }
},


//参考数据，无需粘贴
//onShow () {

4、自动加载getRecords方法

编辑record.vue文件，在onShow小程序生命周期调用getRecords方法，这样每次切换到记录页面，会更新说有的记录

//onShow () {
  //const userinfo = wx.getStorageSync('userinfo')
  //if(userinfo.openId){
    //this.userinfo = userinfo
  //}


  //需要添加的部分
  this.getRecords()

5、在后端添加路由

（1）创建操作文件getrecords.js

先在后端server/controllers文件夹中创建操作文件getrecords.js

在操作文件中实现：读取records数据表中的所有记录

（2）添加路由

在路由管理文件server/routes/index.js文件中添加路由

//需要添加的代码
router.get('/getrecords', controllers.getrecords)


//参考代码，无需粘贴
//module.exports = router

6、编辑后端操作文件

编辑getrecords.js文件，读取records数据表中的所有记录

const {mysql} = require('../qcloud')

module.exports = async (ctx) => {
  const {openid} = ctx.request.query
  try{
    const records = await mysql('records')
                              .select('id','add','mark','note','create_time')
                              .where("openid",openid)
                              .orderBy('id','desc')
    // 执行成功返回的数据
    ctx.state.data = {
      records
    }
  }catch(e){
    // 执行失败返回的数据
    ctx.state = {
      code: -1,
      data: {
        msg: '获取失败' + e.sqlMessage
      }
    }
  }
}

7、测试数据

保存修改的文件，打开微信开发者工具，切换到记录页面，控制台会出现下面信息，这就是从后台传回来的记录数据

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~