2024年最新网易云音乐移动端项目实战(分解上)(1)，裸辞奋战25天三面美团

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

height: auto;

border-radius: 0.1rem;

}

.name {

height: 0.6rem;

width: 100%;

font-size: 0.24rem;

line-height: 0.4rem;

text-align: center;

}

.count {

position: absolute;

right: 0.1rem;

top: 0.1rem;

color: rgb(253, 251, 251);

font-size: 0.2rem;

display: flex;

align-items: center;

.icon {

font-size: 0.2rem;

//svg用fill设置颜色

}

}

}

}

}

使用vue3实现好歌单功能

发现好歌单

查看更多

{{item.name}}

{{changeValue(item.playCount)}}

七、setup中获取路由信息

通过路由获取id值

const router = useRouter()

let id = router.currentRoute._value.query.id

//获取歌单的详情

export async function getMusicContent(id){

return await axios.get(${localhostUrl}/playlist/detail?id=${id})

}

api 下的index.js

import axios from ‘axios’;

//获取轮播图API

/*

0: pc

1: android

2: iphone

3: ipad

*/

let localhostUrl = ‘http://localhost:3000’

export async function ff(type = 2) {

return await axios.get(${localhostUrl}/banner?type=${type});

}

//获取推荐歌单默认十条数据

export async function getMusicList(limit = 10){

return await axios.get(${localhostUrl}/personalized?limit=${limit})

}

//获取歌单的详情

export async function getMusicContent(id){

return await axios.get(${localhostUrl}/playlist/detail?id=${id})

}

router 下的index.js

import { createRouter, createWebHistory } from ‘vue-router’

import Home from ‘…/views/Home.vue’

const routes = [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/listview’,

name: ‘listview’,

component: () => import(‘…/views/listview.vue’)

},

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

views下的listview.vue

listview

views下的home

App.vue

歌单

八、歌单详情内容

从数据中获取

listviewTop

歌单

{{changeValue(playlist.playCount)}}

{{playlist.name}}

{{playlist.creator.nickname}}

{{playlist.description}}

{{playlist.commentCount}}

{{playlist.shareCount}}

下载

多选

listview.vue

详情页的图标列表与返回页面

歌单

{{changeValue(playlist.playCount)}}

{{playlist.name}}

{{playlist.creator.nickname}}

{{playlist.description}}

{{playlist.commentCount}}

{{playlist.shareCount}}

下载

多选

九、播放列表实现

还是基本布局以及循环拿到的数据

playlist.vue

播放全部

(共{{playlist.tracks.length}}首)

+收藏({{playlist.subscribedCount}})

{{i+1}}

{{item.name}}

{{item}}

{{item.al.name}}

public文件夹下的js文件夹的index.js

listview.vue

listviewTop.vue

歌单

{{changeValue(playlist.playCount)}}

{{playlist.name}}

{{playlist.creator.nickname}}

{{playlist.description}}

{{playlist.commentCount}}

{{playlist.shareCount}}

下载

多选