時(shí)間：2023-04-21 13:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-04-21 13:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（六）：
在線咨詢
this.$route.path獲取當(dāng)前路由地址，判斷當(dāng)前選中的導(dǎo)航欄項(xiàng)目，賦予選中樣式。Banner使用變量
說(shuō)明 : 調(diào)用此接口 , 可獲取 banner( 輪播圖 ) 數(shù)據(jù)
可選參數(shù) :type:資源類型,對(duì)應(yīng)以下類型,默認(rèn)為 0 即 PC
0: pc, 1: android, 2: iphone, 3: ipad
接口地址 :/banner
imgIndex記錄當(dāng)前展示的圖片索引，imgUrl記錄當(dāng)前展示圖片的url。設(shè)置定時(shí)器，讓輪播圖自動(dòng)播放。當(dāng)鼠標(biāo)移動(dòng)到輪播圖上，停止自動(dòng)播放。底部小圓點(diǎn)，對(duì)應(yīng)所有輪播圖，點(diǎn)擊小圓點(diǎn)，就展示對(duì)應(yīng)的輪播圖圖片。左側(cè)右側(cè)兩個(gè)箭頭可以切換上一張和下一張圖片。 <template> <div class="banner"> <div class="wrap-content"> <div class="banner-box"> <!-- 輪播圖圖片框 --> <div class="banner-frame" @mouseenter="stopPlay" @mouseleave="startPlay"> <!-- 圖片 --> <div class="images"> <transition name="show"> <img v-lazy="imgUrl" v-show="isShow" /> </transition> </div> <!-- 底部小圓點(diǎn) --> <ul class="points"> <li v-for="(point, index) in imgList" :key="index" :class="[imgIndex === index ? 'active' : '']" @click="changeImg(index)" ></li> </ul> <!-- 兩側(cè)箭頭 --> <div class="prev-arrow" @click="prev"></div> <div class="next-arrow" @click="next"></div> </div> <!-- 下載 --> <div class="download"> <a href="javascript:;" class="download-btn"></a> <p>PC 安卓 iPhone WP iPad Mac 六大客戶端</p> </div> </div> </div> <div class="img-blur"> <img v-lazy="imgUrl" class="blur" /> </div> </div></template><script>export default { name: 'Banner', data() { return { imgList: [], // 所有輪播圖圖片 imgUrl: '', // 輪播圖當(dāng)前展示的圖片 imgIndex: 0, // 當(dāng)前展示的圖片在圖片列表中的序號(hào) autoPlay: true, // 是否自動(dòng)播放輪播圖 timer: null, // 定時(shí)器 isShow: true, } }, mounted() { // 獲取輪播圖圖片 this.getBanner() // 啟動(dòng)輪播圖自動(dòng)播放定時(shí)器 this.startPlay() }, methods: { // 獲取輪播圖資源 async getBanner() { let result = await this.$api.reqBanner() result.banners.forEach((item) => { this.imgList.push({ id: item.targetId, url: item.imageUrl }) }) this.imgUrl = this.imgList[0].url }, // 切換圖片 changeImg(index) { this.imgIndex = index this.imgUrl = this.imgList[index].url }, // 自動(dòng)播放輪播圖 startPlay() { this.timer = setInterval(() => { this.next() }, 4000) }, // 停止自動(dòng)播放輪播圖 stopPlay() { clearInterval(this.timer) }, // 切換上一張圖片 prev() { this.imgIndex = (this.imgIndex > 0 ? this.imgIndex : this.imgList.length) - 1 this.imgUrl = this.imgList[this.imgIndex].url }, // 切換下一張圖片 next() { this.imgIndex = (this.imgIndex + 1) % this.imgList.length this.imgUrl = this.imgList[this.imgIndex].url }, },}</script>2. 熱門推薦、新碟上架、榜單數(shù)據(jù)通過(guò)接口獲取。三個(gè)部分的標(biāo)題部分結(jié)構(gòu)和樣式相似，可以提取出Title組件封裝。新碟上架翻頁(yè)功能的實(shí)現(xiàn)，通過(guò)設(shè)置列表相對(duì)于外部盒子的偏移實(shí)現(xiàn)。歌單（網(wǎng)友精選碟）
說(shuō)明 : 調(diào)用此接口 , 可獲取網(wǎng)友精選碟歌單
可選參數(shù) :order: 可選值為 'new' 和 'hot', 分別對(duì)應(yīng)最新和最熱 , 默認(rèn)為 'hot'cat: tag, 比如 " 華語(yǔ) "、" 古風(fēng) " 、" 歐美 "、" 流行 ", 默認(rèn)為 "全部",可從歌單分類接口獲取(/playlist/catlist)limit: 取出歌單數(shù)量 , 默認(rèn)為 50offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 評(píng)論頁(yè)數(shù) -1)*50, 其中 50 為 limit 的值
接口地址 :/top/playlist
最新專輯
說(shuō)明 : 調(diào)用此接口 ，獲取云音樂(lè)首頁(yè)新碟上架數(shù)據(jù)
接口地址 :/album/newest
所有榜單
說(shuō)明 : 調(diào)用此接口,可獲取所有榜單
接口地址 :/toplist
<script>export default { methods: { // 上一頁(yè) prevPage() { let albumlist = this.$refs.albumsList; if (this.page === 0) { albumlist.style.transition = 'none' albumlist.style.left = '-1290px' // 回到page2 this.page = 2 } this.timer = setTimeout(() => { albumlist.style.transition = 'left 1s' this.page -= 1 albumlist.style.left = -645 * this.page + 'px' }, 1100) }, // 下一頁(yè) nextPage() { let albumlist = this.$refs.albumsList; if (this.page === 2) { albumlist.style.transition = 'none' albumlist.style.left = '0px' this.page = 0 } this.timer = setTimeout(() => { albumlist.style.transition = 'left 1s' this.page += 1 albumlist.style.left = -645 * this.page + 'px' }, 1100) }, }}</script>3. 右側(cè)入駐歌手和熱門主播數(shù)據(jù)獲取接口：熱門歌手
說(shuō)明 : 調(diào)用此接口 , 可獲取熱門歌手?jǐn)?shù)據(jù)
可選參數(shù) :limit: 取出數(shù)量 , 默認(rèn)為 50offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*50, 其中 50 為 limit 的值 , 默認(rèn) 為 0
接口地址 :/top/artists
獲取歌手詳情
說(shuō)明 : 調(diào)用此接口 , 傳入歌手 id, 可獲得獲取歌手詳情
必選參數(shù) :id: 歌手 id
接口地址 :/artist/detail
電臺(tái)-最熱主播榜
說(shuō)明 : 調(diào)用此接口,可獲取最熱主播榜
可選參數(shù) :limit: 返回?cái)?shù)量 , 默認(rèn)為 100 (不支持 offset)
接口地址 :/dj/toplist/popular
query的id實(shí)現(xiàn)。// 榜單跳轉(zhuǎn)goto(item) { this.$router.push({ path: '/home/toplist', query: { id: item.id, }, }) this.$bus.$emit('getFreq',item.updateFrequency) // 傳遞當(dāng)前展示榜單的更新頻率}3. 榜單的詳細(xì)信息接口：獲取歌單詳情4. 由于獲取到的歌曲列表信息不包含歌曲排名變化（也可能是沒(méi)有找到T^T），使用以下代碼生成模擬排名變化：
說(shuō)明 : 歌單能看到歌單名字, 但看不到具體歌單內(nèi)容 , 調(diào)用此接口 , 傳入歌單 id, 可 以獲取對(duì)應(yīng)歌單內(nèi)的所有的音樂(lè)(未登錄狀態(tài)只能獲取不完整的歌單,登錄后是完整的)，但是返回的 trackIds 是完整的，tracks 則是不完整的，可拿全部 trackIds 請(qǐng)求一次song/detail接口獲取所有歌曲的詳情
必選參數(shù) :id: 歌單 id
可選參數(shù) :s: 歌單最近的 s 個(gè)收藏者,默認(rèn)為 8
接口地址 :/playlist/detail
num，當(dāng)前的歌曲列表中的排列順序即為當(dāng)前的排名，生成1到num序號(hào)的列表，隨機(jī)打亂，作為之前的排名。同時(shí)，隨機(jī)設(shè)置一些歌曲為新上榜歌曲。// 打亂數(shù)組function shuffle(arr) { let newArr = [...arr] return newArr.sort(() => { let rand = Math.random() if (rand < 0.5) return -1 else return 1 })}// 模擬榜單排名變動(dòng) (num 有多少首歌)function rk_simulation(num) { let newRank = new Array(num) for (let i = 0; i < num; i++) { newRank[i] = i + 1; } let oldRank = shuffle(newRank) let change = new Array(num) for (let i = 0; i < num; i++) { let rand = Math.random() if (rand > 0.5) change[i] = oldRank[i] - newRank[i] else change[i] = num } return change}5. 評(píng)論獲取接口：歌單評(píng)論6. 評(píng)論分頁(yè)：將分頁(yè)器單獨(dú)封裝成一個(gè)組件
說(shuō)明 : 調(diào)用此接口 , 傳入音樂(lè) id 和 limit 參數(shù) , 可獲得該歌單的所有評(píng)論 ( 不需要 登錄 )
必選參數(shù) :id: 歌單 id
可選參數(shù) :limit: 取出評(píng)論數(shù)量 , 默認(rèn)為 20offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 評(píng)論頁(yè)數(shù) -1)*20, 其中 20 為 limit 的值before: 分頁(yè)參數(shù),取上一頁(yè)最后一項(xiàng)的time獲取下一頁(yè)數(shù)據(jù)(獲取超過(guò) 5000 條評(píng)論的時(shí)候需要用到)
接口地址 :/comment/playlist
Pagination，通過(guò)props屬性傳遞當(dāng)前展示的頁(yè)號(hào)pageNo、每頁(yè)評(píng)論數(shù)pageSize、總評(píng)論數(shù)total、分頁(yè)器連續(xù)展示的頁(yè)數(shù)（不被省略號(hào)代替）continues，獲取當(dāng)前頁(yè)數(shù)的函數(shù)getPageNo。當(dāng)點(diǎn)擊分頁(yè)器中某一頁(yè)時(shí)，調(diào)用getPageNo函數(shù)，使得父組件能夠獲取到請(qǐng)求的頁(yè)號(hào)。<template><div clas="comments"> <!-- 分頁(yè)器 --> <Pagination :pageNo="pageNo" :pageSize="pageSize" :total="tolComments" :continues="5" @getPageNo="getPageNo"/></div></template><script>export default { // 獲取當(dāng)前頁(yè)數(shù) getPageNo(pageNo) { this.pageNo = pageNo this.getCommentsList() // 獲取評(píng)論 }} </script><template> <div class="pagination"> <!-- 上一頁(yè) --> <button :disabled="pageNo===1" @click="$emit('getPageNo', pageNo - 1)" class="prev-page">上一頁(yè)</button> <!-- 頁(yè)碼 --> <button v-if="startAndEndPage.start > 1" @click="$emit('getPageNo',1)" class="page">1</button> <span v-if="startAndEndPage.start > 2" class="point">...</span> <button class="page" v-for="(page, index) in parseInt(startAndEndPage.end)" :key="index" v-show="page >= startAndEndPage.start" :class="{active:isPage(page)}" @click="$emit('getPageNo',page)">{{page}}</button> <span v-if="startAndEndPage.end < tolPage-1" class="point">...</span> <button v-if="startAndEndPage.end < tolPage" @click="$emit('getPageNo',tolPage)" class="page">{{tolPage}}</button> <!-- 下一頁(yè) --> <button :disabled="pageNo===tolPage" @click="$emit('getPageNo', pageNo + 1)" class="next-page">下一頁(yè)</button> </div></template><script>export default { name: 'Pagination', props: ['pageNo', 'pageSize', 'total', 'continues'], computed: { // 評(píng)論總頁(yè)數(shù) tolPage() { return Math.ceil(this.total / this.pageSize) }, // 展示按鈕的起始和終止頁(yè)序號(hào) startAndEndPage() { let start = Math.max(1, this.pageNo - Math.floor(this.continues / 2)) let end = Math.min(this.tolPage, this.pageNo + Math.floor(this.continues / 2)) if (end - start < this.continues) { if (start === 1) { end = Math.min(Math.max(end, start + this.continues), this.tolPage) } else if (end === this.tolPage) { start = Math.max(1, Math.min(end - this.continues, start)) } } return { start, end } } }, methods: { // 判斷是否是當(dāng)前頁(yè)面 isPage(page) { return page === this.pageNo } }}</script>歌單分類2. 使用變量
說(shuō)明 : 調(diào)用此接口,可獲取歌單分類,包含 category 信息
接口地址 :/playlist/catlist
category記錄當(dāng)前展示的歌單的類別，從而在切換歌單分類時(shí)，按照分類獲取歌單列表。query的id，判斷當(dāng)前是主播電臺(tái)推薦頁(yè)面（沒(méi)有id，即id為undefined）還是某種電臺(tái)分類的詳情頁(yè)面（id為電臺(tái)類別號(hào)），在切換電臺(tái)分類時(shí)，也是通過(guò)修改路由query的id跳轉(zhuǎn)頁(yè)面。電臺(tái)-分類
說(shuō)明 : 登錄后調(diào)用此接口 , 可獲得電臺(tái)類型
接口地址 :/dj/catelist
推薦節(jié)目
說(shuō)明 : 調(diào)用此接口 , 可獲取推薦電臺(tái)
接口地址 :/program/recommend
電臺(tái)-節(jié)目榜
說(shuō)明 : 登錄后調(diào)用此接口 , 可獲得電臺(tái)節(jié)目榜
可選參數(shù) :limit: 返回?cái)?shù)量 , 默認(rèn)為 100offset: 偏移數(shù)量，用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*100, 其中 100 為 limit 的值 , 默認(rèn)為 0
接口地址 :/dj/program/toplist
電臺(tái)-分類推薦
說(shuō)明 : 登錄后調(diào)用此接口 , 傳入分類,可獲得對(duì)應(yīng)類型電臺(tái)列表
必選參數(shù) :type: 電臺(tái)類型 , 數(shù)字 , 可通過(guò)/dj/catelist獲取 , 對(duì)應(yīng)關(guān)系為 id 對(duì)應(yīng) 此接口的 type, name 對(duì)應(yīng)類型
接口地址 :/dj/recommend/type
電臺(tái)-類別熱門電臺(tái)
可選參數(shù) :limit: 返回?cái)?shù)量 , 默認(rèn)為 30offset: 偏移數(shù)量，用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*30, 其中 30 為 limit 的值 , 默認(rèn)為 0cateId: 類別 id,可通過(guò)/dj/category/recommend接口獲取
接口地址 :/dj/radio/hot
query中包含area和type，area表示歌手區(qū)域分類(華語(yǔ)、歐美、日本、韓國(guó)、其他)，都有對(duì)應(yīng)的編號(hào)；type表示歌手的類型(男歌手、女歌手、組合/樂(lè)隊(duì))。當(dāng)area和type均為undefined時(shí)，展示的是推薦歌手，當(dāng)area和type均為-1時(shí)，展示的是入駐歌手。歌手分類列表
說(shuō)明 : 調(diào)用此接口,可獲取歌手分類列表
可選參數(shù) :limit: 返回?cái)?shù)量 , 默認(rèn)為 30offset: 偏移數(shù)量，用于分頁(yè) , 如 : 如 :( 頁(yè)數(shù) -1)*30, 其中 30 為 limit 的值 , 默認(rèn)為 0initial: 按首字母索引查找參數(shù),如/artist/list?type=1&area=96&initial=b返回內(nèi)容將以 name 字段開(kāi)頭為 b 或者拼音開(kāi)頭為 b 為順序排列, 熱門傳-1,#傳 0type取值:
-1:全部
1:男歌手
2:女歌手
3:樂(lè)隊(duì)area取值:
-1:全部
7:華語(yǔ)
96:歐美
8:日本
16:韓國(guó)
0:其他
接口地址 :/artist/list
全部新碟
說(shuō)明 : 登錄后調(diào)用此接口 ,可獲取全部新碟
可選參數(shù) :limit: 返回?cái)?shù)量 , 默認(rèn)為 30offset: 偏移數(shù)量，用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*30, 其中 30 為 limit 的值 , 默認(rèn)為 0area: ALL:全部,ZH:華語(yǔ),EA:歐美,KR:韓國(guó),JP:日本
接口地址 :/album/new
關(guān)鍵詞：音樂(lè),練習(xí)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
