上一节实现了点击加减分的按钮,在数据库会插入一条数据。但是点击编译按钮(在微信开发者工具的右上角),总分又变成了0。
这是因为虽然在数据库中添加的记录,但是当前总分并没有读取到数据库当前的数据,我们在这一节读取当前总分
1、添加读取总分方法
async getCurrentMark () { try{ const res = await get('/weapp/getmark', {openid:this.userinfo.openId}) console.log("从后端返回的执行正确的信息是:",res) this.mark = res.mark }catch(e){ showModal('失败', "页面加载失败,请下拉页面重试哦~") console.log("从后端返回的执行错误的信息是:",e) } }
2、在后端添加路由
(1)创建操作文件getmark.js
先在后端server/controllers文件夹中创建操作文件getmark.js
在操作文件中实现:读取records数据表最后一条记录的mark,这个字段记录着当前的分数
(2)添加路由
在路由管理文件server/routes/index.js文件中添加路由
//需要添加的代码 router.get('/getmark', controllers.getmark) //参考代码,无需粘贴 //module.exports = router
3、编辑后端操作文件
后端操作文件也就是server/controllers/getmark.js文件,编辑这个文件,读取records数据表最后一条记录的mark字段
const {mysql} = require('../qcloud') module.exports = async (ctx) => { const {openid} = ctx.request.query try{ const res = await mysql('records') .where("openid",openid) .orderBy('id','desc').first() if(res){ var mark = res.mark }else{ var mark = 0 } // 执行成功返回的数据,将最后这条记录的mark字段也传回到前端 ctx.state.data = { code: 0, mark:mark, msg: 'success' } console.log("执行成功") }catch(e){ console.log("执行错误:",e) // 执行失败返回的数据 ctx.state = { code: -1, data: { msg: '获取失败' + e.sqlMessage } } } }
4、切换到首页读取当前分数
每次切换到首页时,都要自动执行一次getCurrentMark方法,将这个方法放到onShow函数中就可以实现
//参考语句,无需粘贴 //onShow () { //const userinfo = wx.getStorageSync('userinfo') //if(userinfo.openId){ //this.userinfo = userinfo //需要添加的部分 this.getCurrentMark()
5、登录后自动读取当前分数
getModel是在登录之后调用,在getModel方法中调用getCurrentMark方法,就可以实现登录后自动读取当前分数
//参考语句,无需粘贴 //getModel (val) { //this.showLogin = val[0] //this.userinfo = val[1] //需要添加的部分 this.getCurrentMark()
6、测试效果
(1)切换到首页自动读取当前分数
(2)登录后自动读取当前分数
点击授权登录按钮后,会自动读取当前分数