![eea3354a9effa130dc1d32dc2582e6e2.png](https://i-blog.csdnimg.cn/blog_migrate/767b15806b44b46b4117253551b8ee9a.jpeg)
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、测试数据
保存修改的文件,打开微信开发者工具,切换到记录页面,控制台会出现下面信息,这就是从后台传回来的记录数据
![708ebf58c9a2ca0c8b40a28c1e978759.png](https://i-blog.csdnimg.cn/blog_migrate/5b43b2eb405308668f991379fc0f14e8.jpeg)
作者:猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~ 点击查看课程目录:微信小程序全栈开发课程目录