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、测试数据
保存修改的文件，打开微信开发者工具，切换到记录页面，控制台会出现下面信息，这就是从后台传回来的记录数据
