微信小程序全栈开发实战课程--真自律

5-4【微信小程序全栈开发课程】首页完善(四)--清零功能

2019-11-02  本文已影响0人  l猫宁一

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

确认的话,请求后端,在数据库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、测试

作者:猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

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

上一篇下一篇

猜你喜欢

热点阅读