5.5【微信小程序全栈开发课程】首页完善(五)--撤销功能

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 点击撤销按钮,撤销上一步的操作记录也就是删除records数据表中的最后一条数据

1、添加撤销方法


编辑index.vue文件的script部分,在methods函数中添加撤销方法recall


async recall () {
  try{
    const res = await post('/weapp/deleterecord', {openid:this.userinfo.openId})
    console.log("从后端返回的执行正确的信息是:",res)
    this.mark = res.mark
  }catch(e){
    showModal('失败', e.data.msg)
    console.log("从后端返回的执行错误的信息是:",e)
  }
},


2、在后端添加路由


(1)创建操作文件deleterecord.js


先在后端server/controllers文件夹中创建操作文件deleterecord.js


在操作文件中实现:删除records数据表中最后一条记录


(2)添加路由


在路由管理文件server/routes/index.js文件中添加路由


//需要添加的代码
router.post('/deleterecord', controllers.deleterecord)
//参考代码,无需粘贴
//module.exports = router


3、编辑后端操作文件


后端操作文件也就是server/controllers/deleterecord.js文件,编辑这个文件,删除records数据表中最后一条记录


const {mysql} = require('../qcloud')
module.exports = async (ctx) => {
  const {openid} = ctx.request.body
  try{
    const res = await mysql('records')
        .where("openid",openid)
        .orderBy('id','desc').first()
    if(res){
      await mysql('records')
        .where("id",res.id).del()
      //得到撤销后,最后一条记录的当前分数
      const re_res = await mysql('records')
          .where("openid",openid)
          .orderBy('id','desc').first()
      if(re_res){
        var mark = re_res.mark
      }else{
        var mark = 0
      }
    }else{
      var mark = 0
    }
    // 执行成功返回的数据,将删除的这条记录的add值也传回到前端
    ctx.state.data = {
      code: 0,
      mark:mark,
      msg: 'success'
    }
    console.log("执行成功")
  }catch(e){
    console.log("执行错误:",e)
    // 执行失败返回的数据
    ctx.state = {
      code: -1,
      data: {
        msg: '撤销失败' + e.sqlMessage
      }
    }
  }
}


4、添加点击事件


在index.vue文件中的「撤销」按钮上面添加点击事件


<!-- 原代码 -->
<div class="btn1 right">撤销</div>
<!-- 添加后的代码 -->
<div class="btn1 right" @click='recall'>撤销</div>


5、测试


点击撤销按钮,当前分数恢复为上一步操作之前的的分数。并出现撤销成功的提示框,控制台中返回执行正确的信息。


image.png

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
打赏
0
0
0
0
3311
分享
相关文章
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2598 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
994 7
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
942 1
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
157 12
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
179 0
微信小程序多语言切换神器:简繁体切换功能完全指南
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
341 1
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
773 0
|
4月前
|
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
898 0
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
286 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等