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