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

目录
打赏
0
0
0
0
3311
分享
相关文章
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2598 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
157 12
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
179 0
微信小程序多语言切换神器:简繁体切换功能完全指南
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
88 7
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
146 5
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
101 5
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能
MacTalk 测评通义灵码,实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
123 2
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能

热门文章

最新文章