雲音樂小程序管理系統（五）——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')
      })
    },

這樣我們就可以完成一個針對雲數據庫的更新操作啦，學會將代碼整合，將複用率高的功能做成工具類是真的很節約時間呀。