vue(3)音乐页面 书籍页面

213 阅读1分钟

一、 音乐页面

  1. 设置musiclist空数组
  2. 在created中通过axios请求数据,请求成功后将返回的信息(.data.albums)赋值给musiclist数组
  3. 将musiclist数组中每个曲类的图片展示在页面中,点击图片,触发点击事件,进入到该曲类的音乐列表中。通过点击事件方法传id值给音乐页面详细信息的路由

一、 音乐详细信息页面

  1. 引入音乐组件
  2. 设置list空数组
  3. 在created中通过axios请求数据,但返回的信息中,有一些数据的名字与组件中要求的不同,请求成功后可通过遍历将添加进正确的数据名,改好后,将返回的信息(.data.musicData)赋值给list数组
  4. 在组件中设置一系列属性, :list代表将要播放的音乐列表,:music代表正在播放的音乐

下载组件时要加--save 将其记录在package.json中 以便删除node_modules时,仍能通过 npm install 命令将相应依赖下载下来

若下载组件后 报错显示版本有误,则可删除node_modules,通过 npm install 重新下载

三、书籍页面

  1. 引入滚动轮播图组件
  2. 在data中设置booklist数组,数组中放入书籍图片地址
  3. 在组件中设置一系列属性