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


image.png


image.png

目录
相关文章
|
21天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2776 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
5月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1026 7
|
5月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
959 1
|
25天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
239 12
|
4天前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
5月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
187 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
5月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
345 1
|
5月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
806 0
|
5月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
908 0
|
5月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
314 7

热门文章

最新文章