5.2【微信小程序全栈开发课程】首页完善（二）--读取当前分数

上一节实现了点击加减分的按钮，在数据库会插入一条数据。但是点击编译按钮（在微信开发者工具的右上角），总分又变成了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）登录后自动读取当前分数

点击授权登录按钮后，会自动读取当前分数

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~