Nuxt 个人简介页面优化（一）

最新推荐文章于 2024-08-13 11:12:51 发布

imba97

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量117

点赞数 5

分类专栏：个人开发文章标签：前端 typescript

本文链接：https://blog.csdn.net/imba97/article/details/141089805

版权

个人开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介页面

做了点更新，现在我在听歌的时候简介会显示个小图标，显示歌名

在这里插入图片描述

接口优化

返回格式优化了一下，方便前端获取

部分计算，比如当前是否正在播放以及获取专辑图片的逻辑，都放在了后端

server/api/playing/index.ts

interface MusicInfo {
  playing: boolean
  name: string
  artist: string
  albumCover?: string
}

interface Result {
  success: boolean
  data?: MusicInfo
}

音乐专辑图片加载的优化

图片预加载，封装成了函数。在这个基础上又做了页面的图片的加载效果

composables/utils/useLoadImage.ts

export default async function useLoadImage(url: string, timeout = 5000): Promise<boolean> {
  return new Promise((resolve, reject) => {
    const image = new Image()

    const timer = setTimeout(() => {
      reject(new Error('Image load timeout'))
    }, timeout)

    image.onload = () => {
      clearTimeout(timer)
      resolve(true)
    }

    image.onerror = () => {
      clearTimeout(timer)
      reject(new Error('Image load error'))
    }

    image.src = url
  })
}