雲音樂小程序管理系統（四）——歌單列表前後端交互與跨域問題

讓我們的後端獲取到的歌單信息，在我們前端VUE框架上顯示出來。

前後端分離交互

所以我們前端要發送一個請求src-api-新建文件playlist.js

使用request中封裝的import axios from 'axios'來發送請求

獲取地址，進行數據請求。

在我們的文件中引用請求文件

import { fetchList } from '@/api/playlist'

並且通過他獲取歌單列表的信息

export default {
  data() { // 定義數組值
    return {
      playlist: [],
      count: 50
    }
  },
  // 生命週期函數
  created() {
    this.getList()
  },
  methods: {
    // 獲取歌單列表
    getList() {
      fetchList({
        start: this.playlist.length, // 開始長度
        count: this.count // 每次長度
      }).then((res) => {
        console.log(res)
      })
    }
  }
}

啓動前端VUE npm run dev，啓動後端KOA node app.js 來看一下能不能獲取到值

報了錯誤信息，顯示了一個跨域問題

跨域問題

因爲是前後端分離，使得前後端的地址不同造成跨域問題

解決跨域的方法：cors或jsonp

cors:

在對應後端配置上允許哪個域向“我”發送請求

在後端下載koa包來解決跨域問題npm install koa2-cors

在入口文件中引用包，

使用類似於中間件的功能指向前端域名

app.use(cors({
    //傳遞對應的參數
    origin: ['http://localhost:9528'], //數組
    credentials:true, //證書
}))

這個時候還有一個錯誤信息，因爲我們前端模板請求數據時，要求後端必須有一個屬性爲code,且值爲20000纔是一直正式需求

所以我們後端在返回值得時候，也需要返回一個狀態碼，滿足前端要求

前端顯示使用了Element組件

然後在我們獲取到請求數據後，對他們進行賦值。

因爲每次數據很多，使用異步加載。

所以使用了一個封裝工具utrls-scroll.js來異步加載歌單信息

const scroll = {
  isEnd: false,
  start(callback) {
    let timer = null
    callback && window.addEventListener('scroll', () => {
      if (timer) {
        clearTimeout(timer)
      }
      // 函數防抖，使用計時器防止用戶一直刷新造成頁面卡頓
      timer = setTimeout(() => {
        // 瀏覽器向上滾動的高度
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        // 文檔的真實高度
        const scrollHeight = document.documentElement.scrollHeight
        // 瀏覽器窗口（文檔）的可視高度,就是肉眼可見的那部分全屏高度
        const clientHeight = document.documentElement.clientHeight
        if (!this.isEnd && scrollHeight == scrollTop + clientHeight) {
          window.scrollTo(0, scrollTop - 100)
          // 請求數據
          callback()
        }
      }, 300)
    })
  },
  // 滾動到最下邊不再請求數據
  end() {
    this.isEnd = true
  }
}

export default scroll

在我們的前端文件中引用該文件以備使用。

import scroll from '@/utils/scroll'

讓我們的生命週期按說檢測當前請求數據，在請求數據小於當前要獲取條數是，執行最後一次指令，並結束數據請求

並且對後端每次請求的數量count既然是前端決定，那麼我們就需要讓我們後端每次調用的數據，都可以使用前端的要求，所以在後端獲取前端請求的開始start和數量count

在後端對應視圖文件中先獲取到數據

// 獲取前端發送過來的請求數據
    const query = ctx.request.query

並且修改我們的數據請求，因爲獲取到的數據是字符型的，所以需要轉換一下parseInt

這樣我們獲取數據就是成功的了

歸類數據請求文件

因爲每個數據請求連接內容都是一樣的，所以想着將數據文件進行歸類，有助於代碼的簡潔性和複用性。

將雲函數請求函數進行歸類

const getAccessToken = require('./getAccessToken.js')
const rp = require('request-promise')
//fnName 雲函數名稱 params發送請求時的參數  env作爲全局變量，便於使用
const callCloudHS = async (ctx, fnName, params) => {
    const ACCESS_TOKEN = await getAccessToken()
    const options = {
        method: 'POST',
        uri: `https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=${ACCESS_TOKEN}&env=${ctx.state.env}&name=${fnName}`,
        body: {
            ...params
        },
        json: true // Automatically stringifies the body to JSON
    }

    return await rp(options)
        .then((res) => {
            return res
        })
        .catch(function (err) {
        })
}

module.exports = callCloudHS

因爲雲開發的環境ID是唯一的，使用率也很高，所以設置成全局變量app.js中

//全局中間件 ENV設置爲全局中間件變量，通過next傳給其他中間件中
app.use(async (ctx,next)=>{
    ctx.state.env=ENV
    await next()  
})

這樣在使用時直接調用就OK了

修改前邊的歌單列表的數據請求

是不是一下簡潔了超級超級多呢