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

r囧r小猫 2023-06-08 06:56 26阅读 0赞

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

![format_png][]

###### （2）登录后自动读取当前分数 ######

点击授权登录按钮后，会自动读取当前分数  
![format_png 1][]

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

![format_png 2][]

[format_png]: /images/20230531/e263fe517bce40d4b9cc02e531613492.png
[format_png 1]: /images/20230531/933ee1d4ce5d4bc1b0844fd504129dfe.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230531/384797b881834b1886438ec39ecccebc.png