云音乐小程序管理系统（五）——HTTP API调用云数据库实现歌单更新

更新查询每一条的数据

在歌单列表可以获取后，面领着新的问题，如何实现歌单的更新，即编辑功能

首先要让编辑有意义，那么肯定就得现有一个编辑的点击事件。

<template slot-scope="scope">
          <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>

VUE中对前端控件添加方法，使用的是@click，因为编辑肯定是需要获取到每一行的信息，所以我们用定义的scope来获取每行的ID

点击事件跳转到一个新的页面，即我们的编辑页

 // 编辑功能
    onEdit(row) {
     
    // 跳转，并且通过row取到对应的值id
      this.$router.push(`/playlist/edit/${
     row._id}`) 
    }

编辑信息，那么我们肯定就需要从数据库中获取到我们需要的信息。所以向后端发送资源请求命令。获取对应资源信息

// 根据ID查询每条指令的详情
export function fetchById(params) {
     
  // 发送请求
  return request({
     
    params,
    url: `${
     baseUrl}/playlist/getById`,
    method: 'get'
  })

在后端我们定义一个工具类，用于存放在云数据库中操作的信息

const getAccessToken = require('./getAccessToken.js')
const rp = require('request-promise')
//fnName为方法名称  query查询条件
const callCloudDB=async(ctx,fnName,query={
     })=>{
     

    const ACCESS_TOKEN=await getAccessToken()
    const options={
     
        method:'post',
        uri:`https://api.weixin.qq.com/tcb/${
     fnName}?access_token=${
     ACCESS_TOKEN}`,
        body:{
     
            query,
            env:ctx.state.env
        },
        json:true
    }
    //返回请求结果
    return await rp(options)
    .then((res) => {
     
        return res
    })
    .catch(function (err) {
     
    })
}

module.exports = callCloudDB

这样我们就可以操作云数据库查询我们所要找的数据

//路由查询编辑时的每一条歌单信息
router.get("/getById", async (ctx, next) => {
     
  // 查询语句
  const query = `db.collection('playlistDB').doc('${ctx.request.query.id}').get()`
  const res=await callCloudDB(ctx,'databasequery',query)
    //将结果返回前端
  ctx.body={
     
    code:20000,
    data:JSON.parse(res.data)

  }
});

后端可以正常返回前端数据，那么在前端编辑页接受调用，测试一下是否可以正常接收到数据

更新信息

首先这个我时候我们应该先把我们的更新点击事件给写上

然后去请求修改数据

// 更新编辑信息，修改数据库内容
export function update(params) {
     
  // 发送请求
  return request({
     
    params,
    url: `${
     baseUrl}/playlist/updatePlaylist`,
    data: {
     
      ...params // 提交数据es6.0写法
    },
    method: 'post'
  })
}

在后端将修改的请求数据提交到数据库，以完成修改，并返回修改结果

//编辑更新数据库中信息
router.post("/updatePlaylist", async (ctx, next) => {
     
    // 请求参数
    const params = ctx.request.body
    // 查询语句
    const query = `db.collection('playlistDB').doc('${params._id}').update({
     
        data:{
     
            name: '${params.name}',
            copywriter: '${params.copywriter}'
        }
    })`
    const res=await callCloudDB(ctx,'databaseupdate',query)
      //将结果返回前端
    ctx.body={
     
      code:20000,
      data:res
  
    }
  });

因为请求的这使用的是post，为了解析post请求，引入一个插件npm install koa-body
并在入口文件中使用中间件启用

//接受post请求参数解析
app.use(koaBady({
     
    multipart: true
}))

在后端成功返回前端数据后，在点击更新中响应

    onSubmit() {
     
      update(this.playlist).then((res) => {
     
        console.log(res.data)
        if (res.data.modified > 0) {
     
          this.$message({
     
            message: '更新成功',
            type: 'success'
          })
        } else {
     
          this.$message.error('更新失败')
        }
        this.$router.push('/playlist/list')
      })
    },

这样我们就可以完成一个针对云数据库的更新操作啦，学会将代码整合，将复用率高的功能做成工具类是真的很节约时间呀。