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

Dear 丶 2023-06-08 06:57 16阅读 0赞

#### 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、测试数据 ####

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

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/43ebccc0b4ce49dea1709d726c2adebb.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/f5621b22a26947c498dbd99384322c40.png