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

Bertha 。 2023-06-08 06:56 26阅读 0赞

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

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

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

清零功能不删除历史记录

#### 1、添加页面部分 ####

编辑src/pages/index/index.vue文件的template部分，将清零、撤销按钮添加到页面上面

<div class="button">
        <div class="btn1 right">撤销</div>
        <div class="btn0">清零</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、测试 ####

![format_png][]  
![format_png 1][]

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

![format_png 2][]

[format_png]: /images/20230531/81fe8db2e920436a94eb50715597d2d5.png
[format_png 1]: /images/20230531/8cf3ce2e3d9e44d3829bb6288c65854e.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230531/8d1ff46623234816a570d38a61a7d923.png