6.6【微信小程序全栈开发课程】记录页面（六）--修改备注

1、引入工具函数

编辑RecordList.vue文件，引入util.js文件中的post、showModal这两个工具函数

//参考代码，无需粘贴
//<script>


//需要添加的部分
import {post,showModal} from '@/util'

2、添加撤销方法

编辑RecordList.vue文件的script部分，在methods函数添加修改备注的方法addNote

async addNote () {
  const data = {
    id: this.record.id,
    note:this.note
  }
  try{
    const res = await post('/weapp/updatenote', data)
    console.log("从后端返回的执行正确的信息是：",res)
    //点击添加或者修改按钮，隐藏掉文本框
    this.ellipsis = false
    // 将从父组件传过来的record中的note值更新为修改后的值
    this.record.note = this.note
  }catch(e){
    showModal('失败', "请重新提交哦~")
    console.log("从后端返回的执行错误的信息是：",e)
  }
}

3、在后端添加路由

（1）创建操作文件updatenote.js

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

在操作文件中实现：查找出需要修改的record数据，并修改这条数据的note字段

（2）添加路由

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

//需要添加的代码
router.post('/updatenote', controllers.updatenote)


//参考代码，无需粘贴
//module.exports = router

4、编辑后端操作文件

编辑server/controllers/updatenote.js文件

查找出需要修改的record数据，并修改这条数据的note字段

const {mysql} = require('../qcloud')

module.exports = async (ctx) => {
  const {id,note} = ctx.request.body
  try{
    const res = await mysql('records')
        .where("id",id)
        .update("note",note)
    // 执行成功返回的数据
    ctx.state.data = {
      code: 0,
      msg: 'success'
    }
  }catch(e){
    // 执行失败返回的数据
    ctx.state = {
      code: -1,
      data: {
        msg: '撤销失败' + e.sqlMessage
      }
    }
  }
}

5、添加点击事件

在RecordList.vue文件中的「修改」或者「添加」按钮上面添加点击事件，点击触发addNote方法

<!--原代码-->
<button class="btn">
  <label v-if="record.note">修改</label>
  <label v-else>添加</label>
</button>


<!--修改后的代码-->
<button class="btn" @click='addNote'>
  <label v-if="record.note">修改</label>
  <label v-else>添加</label>
</button>

6、测试

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~