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、测试
点击撤销按钮，当前分数恢复为上一步操作之前的的分数。并出现撤销成功的提示框，控制台中返回执行正确的信息。
