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、測試數據

保存修改的文件，打開微信開發者工具，切換到記錄頁面，控制檯會出現下面信息，這就是從後臺傳回來的記錄數據

作者：貓寧一
全棧程序媛₍ᐢ •⌄• ᐢ₎一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公衆號領取我所有全棧項目代碼哦~

點擊查看課程目錄：微信小程序全棧開發課程目錄