5-5【微信小程序全栈开发课程】首页完善（五）--撤销功能

点击撤销按钮，撤销上一步的操作记录

也就是删除records数据表中的最后一条数据

1、添加撤销方法

编辑index.vue文件的script部分，在methods函数中添加撤销方法recall

async recall () {
  try{
    const res = await post('/weapp/deleterecord', {openid:this.userinfo.openId})
    console.log("从后端返回的执行正确的信息是：",res)
    this.mark = res.mark
  }catch(e){
    showModal('失败', e.data.msg)
    console.log("从后端返回的执行错误的信息是：",e)
  }
},

2、在后端添加路由

（1）创建操作文件deleterecord.js

先在后端server/controllers文件夹中创建操作文件deleterecord.js

在操作文件中实现：删除records数据表中最后一条记录

（2）添加路由

在路由管理文件server/routes/index.js文件中添加路由

//需要添加的代码
router.post('/deleterecord', controllers.deleterecord)


//参考代码，无需粘贴
//module.exports = router

3、编辑后端操作文件

后端操作文件也就是server/controllers/deleterecord.js文件，编辑这个文件，删除records数据表中最后一条记录

const {mysql} = require('../qcloud')

module.exports = async (ctx) => {
  const {openid} = ctx.request.body
  try{
    const res = await mysql('records')
        .where("openid",openid)
        .orderBy('id','desc').first()
    if(res){
      await mysql('records')
        .where("id",res.id).del()
      //得到撤销后，最后一条记录的当前分数
      const re_res = await mysql('records')
          .where("openid",openid)
          .orderBy('id','desc').first()
      if(re_res){
        var mark = re_res.mark
      }else{
        var mark = 0
      }
    }else{
      var mark = 0
    }
    // 执行成功返回的数据，将删除的这条记录的add值也传回到前端
    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、添加点击事件

在index.vue文件中的「撤销」按钮上面添加点击事件

<!-- 原代码 -->
<div class="btn1 right">撤销</div>

<!-- 添加后的代码 -->
<div class="btn1 right" @click='recall'>撤销</div>

5、测试

点击撤销按钮，当前分数恢复为上一步操作之前的的分数。并出现撤销成功的提示框，控制台中返回执行正确的信息。

image

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录