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

太过爱你忘了你带给我的痛 2023-06-08 06:57 7阅读 0赞

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

![format_png][]

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/da7404685279495493b510fa30819d45.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/5d925fc5caae4785960e2e4435204416.png