0
点赞
收藏
分享

微信扫一扫

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)切换到首页自动读取当前分数

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

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

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

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

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

举报

相关推荐

0 条评论