5.4【微信小程序全栈开发课程】首页完善（四）--清零功能

点击清零按钮，出现提示框，提示是否确认清零

确认的话，请求后端，在数据库records表中增加一条新的记录，这条记录的分数字段mark为0

取消的话，不进行任何操作

清零功能不删除历史记录

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、测试

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

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