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

客官°小女子只卖身不卖艺 2023-06-08 06:56 6阅读 0赞

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

也就是删除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、测试 ####

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

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

![format_png 1][]

[format_png]: /images/20230531/3ba701f946df413ea304e5b56f873349.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/626428547a6c4198a7a506df24741406.png