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

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


image.png


(2)登录后自动读取当前分数


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


image.png

目录
相关文章
|
4月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
87 7
|
4月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
139 5
|
4月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
97 5
|
4月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
46 1
|
6月前
|
小程序 前端开发 持续交付
小程序全栈开发中的CI/CD流程与自动化部署是一种高效的开发模式。
本文探讨小程序全栈开发中的CI/CD流程与自动化部署,介绍持续集成与部署的概念,包括自动化构建、测试、代码审查及部署实践。通过提高代码质量、迭代速度及团队协作效率,确保小程序稳定运行与良好用户体验。
118 2
|
6月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录是一个重要而复杂的问题。
微信小程序作为业务拓展的新渠道,其全栈开发涉及前端与后端的紧密配合。本文聚焦小程序开发中的异常处理与日志记录,从前端的网络、页面跳转等异常,到后端的数据库、API调用等问题,详述了如何利用try-catch及日志框架进行有效管理。同时强调了集中式日志管理的重要性,并提醒开发者注意安全性、性能及团队协作等方面,以构建稳定可靠的小程序应用。
100 1
|
6天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
1904 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
966 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
919 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
274 7

热门文章

最新文章