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)
    var add = res.add
    this.mark = this.mark - add
  }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){
      var add = res.add
      await mysql('records')
        .where("id",res.id).del()
    }else{
      var add = 0
    }
    // 執行成功返回的數據，將刪除的這條記錄的add值也傳回到前端
    ctx.state.data = {
      code: 0,
      add:add,
      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、測試

點擊撤銷按鈕，當前分數恢復爲上一步操作之前的的分數。並出現撤銷成功的提示框，控制檯中返回執行正確的信息。

作者：貓寧一
全棧程序媛₍ᐢ •⌄• ᐢ₎一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公衆號領取我所有全棧項目代碼哦~

點擊查看課程目錄：微信小程序全棧開發課程目錄