【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（二）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（三）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（四" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（一）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（一）

時(shí)間：2023-04-23 21:45:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-23 21:45:02 來源：網(wǎng)站運(yùn)營(yíng)

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（一）：

目錄

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（一）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（二）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（三）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（四）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（五）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（六）

【個(gè)人練習(xí)】網(wǎng)易云音樂PC端仿站 Vue 2（七）

1 項(xiàng)目介紹

說明：使用Vue2實(shí)現(xiàn)網(wǎng)易云音樂PC端主要頁(yè)面及基本交互功能。

主要實(shí)現(xiàn)的頁(yè)面及模塊：

技術(shù)棧：

  1. vue 2
  2. vue-cli (項(xiàng)目腳手架)
  3. axios (請(qǐng)求接口)
  4. vuex (狀態(tài)管理)
  5. vue-router (路由)

2 創(chuàng)建項(xiàng)目

  1. 使用腳手架創(chuàng)建項(xiàng)目
vue create netease-music2.配置vue.config.js文件

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer: { open: true, // 運(yùn)行項(xiàng)目時(shí)自動(dòng)打開頁(yè)面 host: 'localhost', // 設(shè)置打開地址為localhost:8080 }})3. 運(yùn)行項(xiàng)目

npm run serve4. 網(wǎng)易云音樂API安裝及運(yùn)行

https://binaryify.github.io/NeteaseCloudMusicApi/#/

安裝：

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.gitcd NeteaseCloudMusicApinpm install運(yùn)行：

node app.js出現(xiàn) server running @ http://localhost:3000 即可。

3 路由設(shè)計(jì)

路徑組件（功能）嵌套級(jí)別
/home發(fā)現(xiàn)音樂（首頁(yè)）1級(jí)
/home/discover首頁(yè)-推薦2級(jí)
/home/toplist/:id首頁(yè)-排行榜2級(jí)
/home/playlist首頁(yè)-歌單2級(jí)
/home/djradio首頁(yè)-主播電臺(tái)2級(jí)
/home/artist首頁(yè)-歌手2級(jí)
/home/album首頁(yè)-新碟上架2級(jí)
/my我的音樂1級(jí)
/my/artist我的音樂-我的歌手2級(jí)
/my/mv我的音樂-我的視頻2級(jí)
/my/radio我的音樂-我的電臺(tái)2級(jí)
/my/playlist/:id我的音樂-創(chuàng)建/收藏的歌單2級(jí)
/friend關(guān)注1級(jí)
/album/:id專輯頁(yè)面1級(jí)
/playlist/:id歌單頁(yè)面1級(jí)
/artist/:id歌手頁(yè)面1級(jí)
/artist/song歌手-熱門作品2級(jí)
/artist/album歌手-所有專輯2級(jí)
/artist/mv歌手-相關(guān)MV2級(jí)
/artist/desc歌手-藝人介紹2級(jí)
/song/:id歌曲頁(yè)面1級(jí)
注：使用scrollBehavior，使得路由切換時(shí)，頁(yè)面滾動(dòng)條返回頂部。

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由配置const routes = [ { path: '/', redirect: '/home/discover' }, // "發(fā)現(xiàn)音樂"頁(yè)面（首頁(yè)） { path: '/home', component: () => import('@/views/Home'), children: [ { path: 'discover', component: () => import('@/views/Home/Discover') }, { path: 'toplist/:id?', component: () => import('@/views/Home/TopList') }, { path: 'playlist', component: () => import('@/views/Home/PlayList') }, { path: 'djradio', component: () => import('@/views/Home/DjRadio') }, { path: 'artist', component: () => import('@/views/Home/Artist') }, { path: 'album', component: () => import('@/views/Home/Album') }, ] }, // "我的音樂"頁(yè)面 { path: '/my', component: () => import('@/views/My'), redirect: '/my/playlist', children: [ { path: 'artist', component: () => import('@/views/My/Logged/Artist') }, { path: 'mv', component: () => import('@/views/My/Logged/Mv') }, { path: 'radio', component: () => import('@/views/My/Logged/DjRadio') }, { path: 'playlist/:id?', component: () => import('@/views/My/Logged/PlayList') }, ] }, // "關(guān)注"頁(yè)面 { path: '/friend', component: () => import('@/views/Friend') }, // 專輯頁(yè)面 { path: '/album/:id?', component: () => import('@/views/Album')}, // 歌單頁(yè)面 { path: '/playlist/:id?', component: () => import('@/views/PlayList')}, // 歌手頁(yè)面 { path: '/artist', component: () => import('@/views/Artist'), redirect: '/artist/song', children: [ { path: 'song', component: () => import('@/views/Artist/MainLeft/Song.vue') }, { path: 'album', component: () => import('@/views/Artist/MainLeft/Album.vue') }, { path: 'mv', component: () => import('@/views/Artist/MainLeft/Mv.vue') }, { path: 'desc', component: () => import('@/views/Artist/MainLeft/Desc.vue') }, ] }, // 歌曲頁(yè)面 { path: '/song/:id?', component: () => import('@/views/Song') },]const router = new VueRouter({ routes, // 切換路由時(shí)，將滾動(dòng)條復(fù)位到最頂部和最左側(cè) scrollBehavior(to, from, savedPosition) { // savedPosition當(dāng)且僅當(dāng)通過瀏覽器的前進(jìn)/后退按鈕觸發(fā)時(shí)才可用 if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }})export default router

4 請(qǐng)求工具

基于axios封裝請(qǐng)求工具，調(diào)用接口時(shí)使用。

  1. 創(chuàng)建一個(gè)axios實(shí)例
  2. 請(qǐng)求攔截器：攜帶時(shí)間戳，如果有cookie攜帶cookie
  3. 響應(yīng)攔截器：剝離無效數(shù)據(jù)
  4. 導(dǎo)出一個(gè)函數(shù)，調(diào)用當(dāng)前的axios實(shí)例發(fā)送請(qǐng)求，返回Promise
import axios from 'axios'const instance = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000,})// 請(qǐng)求攔截器instance.interceptors.request.use((config) => { let cookie = localStorage.getItem('COOKIE') if (config.method.toLowerCase() === 'get') { if (!config.params) config.params = {} config.params.timerstamp = Date.parse(new Date()) if (cookie && cookie !== '' && !config.params.cookie) { config.params.cookie = cookie } } else { if (!config.data) config.data = {} config.data.timerstamp = Date.parse(new Date()) if (cookie && cookie !== '' && !config.data.cookie) { config.data.cookie = cookie } } return config;}, (error) => { return Promise.reject(error);})// 響應(yīng)攔截器instance.interceptors.response.use((response) => { return response.data;}, (error) => { return Promise.reject(error);})export default (url, method, submitData) => { return instance({ url, method, [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData })}

關(guān)鍵詞：音樂,練習(xí)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉