1、添加页面部分
编辑src/pages/index/index.vue文件的template部分，将清零、撤销按钮添加到页面上面
<!-- 参考代码，无需粘贴 <div class="show"> --> <!-- 需要添加的部分 --> <div class="button"> <div class="btn1 right">撤销</div> <div class="btn0">清零</div> </div> <!-- 参考代码，无需粘贴 <div class="mark-text">当前分数</div> <div class="mark">{{mark}}</div> </div> -->
2、添加清零方法
（1）编辑index.vue文件的script部分，在methods函数中添加resetMart方法
在resetMart方法中使用post请求函数请求后端数据
async resetMart () { //如果当前总分不为0，继续往下执行 if(this.mark != 0){ //try...catch抓取后端传回的错误 try{ //请求后端，通过'/weapp/resetmart'链接，找到server/controllers/resetmart.js文件 const res = await post('/weapp/resetmart', {openid:this.userinfo.openId}) console.log("从后端返回的执行正确的信息是：",res) //将当前页面显示的总分改为0 this.mark = 0 }catch(e){ showModal('失败', "请重试哦~") console.log("从后端返回的执行错误的信息是：",e) } } }
（2）添加提示框方法
点击清零按钮，出现提示框，提示是否确认清零
确认清零执行resetMart方法
取消清零不执行任何方法
//参考代码，无需粘贴 //async resetMart () { //... //} //需要添加的部分 reset () { var that = this wx.showModal({ content: `确定要清零吗？`, success: function (res) { if (res.confirm) { that.resetMart() } } }) }
3、在后端添加路由
（1）创建操作文件resetmart.js
先在后端server/controllers文件夹中创建操作文件resetmart.js
在操作文件中实现：往数据库records表中增加一条分数字段mark为0的记录
（2）添加路由
在路由管理文件server/routes/index.js文件中添加路由
//需要添加的代码 router.post('/resetmart', controllers.resetmart) //参考代码，无需粘贴 //module.exports = router
4、编辑后端操作文件
后端操作文件也就是server/controllers/resetmart.js文件，编辑这个文件，往records数据表中增加一条分数字段mark为0的记录
const {mysql} = require('../qcloud') module.exports = async (ctx) => { const {openid} = ctx.request.body try{ let add = 0 let mark = 0 let note = "清零" //往数据表records中添加一条新的记录，mark字段为0，add为0，note备注为"清零" await mysql('records').insert({ openid, add, mark, note }) //执行成功返回到前端的数据 ctx.state.data = { code: 0, msg: 'success' } console.log("执行成功") }catch(e){ console.log("执行错误:",e) //执行失败返回到前端的数据 ctx.state = { code: -1, data: { msg: '清零失败' + e.sqlMessage } } } }
5、添加点击事件
在index.vue文件中的「清零」按钮上面添加点击事件
//原代码 <div class="btn0">清零</div> //添加后的代码 <div class="btn0" @click='reset'>清零</div>
6、测试
