目录
- 一、项目技术
- 二、准备工作
- 1、初始化Vue项目
- 2、配置Vant UI组件库
- 3、下载并使用vue-router库
- 4、接口API
- 5、postcss插件
- 三、分析页面实现功能
- 1、路由页面准备
- 2、封装axios网路请求
- 3、公共组件
- 四、具体页面实现
- 1、Layout组件相关
- 2、Home组件相关
- ① 封装home相关axios请求
- ② Home组件代码
- 3、Search组件相关
- ① 封装search相关axios请求
- ②Search组件代码
- 4、Comment组件相关
- ① 封装comment相关axios请求
- ②Comment组件代码
- 5、Play组件相关
- ① 封装play相关axios请求
- ②Play组件代码
- 6、API统一出口
- 五、Play和Comment组件详解
一、项目技术
基于 Vue + Vant UI组件库 实现网易云音乐
Vant UI （有赞团队打造的移动端Vue组件库）地址：https://vant-contrib.gitee.io/vant/#/zh-CN
共项目共实现四个功能：主页Home、搜索页Search、评论页Comment、播放页Play
网易云手机端地址：https://y.music.163.com/m
二、准备工作
1、初始化Vue项目
① 安装Vue脚手架
npm i @vue/cli -g② 切换到要创建项目的目录，然后创建music项目
vue create music③ 启动项目
npm run serve2、配置Vant UI组件库
① 下载vant ui库
注意项：Vant组件库要下载配合Vue2版本的使用
npm i vant@latest-v2② 配置按需引入样式
在基于 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。
安装插件
npm i unplugin-vue-components -D配置插件：在 vue.config.js 文件中配置插件
const { VantResolver } = require('unplugin-vue-components/resolvers');const ComponentsPlugin = require('unplugin-vue-components/webpack');module.exports = { configureWebpack: { plugins: [ ComponentsPlugin({ resolvers: [VantResolver()], }), ], },};优点：减少代码体积
缺点：使用起来会变得繁琐一些
3、下载并使用vue-router库
① 下载vuex库（vue2中必须使用vue-router3版本）
npm i vue-router@3② 引入
import VueRouter from "vue-router"③ 使用VueRouter
Vue.use(VueRouter)④ 使用VueRouter之后，在创建vm的时候就可以传入一个router配置项
new Vue({//使用VueRouter之后，创建vm的时候可以传入一个router配置项 router, render:h=>h(App),}).$mount("#app")4、接口API
项目地址：https://neteasecloudmusicapi.js.org/#/
文档地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/
① 安装项目
// 从github上克隆项目到本地git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git// 安装依赖包npm install② 运行项目
node app.js③ 本地地址
http://localhost:3000
5、postcss插件
webpack的一个插件，将要px转化为rex插件
中文官网：https://www.postcss.com.cn/
① 安装postcss
npm install postcss② 安装postcss-pxtorem（最新版本6.0与Vant不兼容，因此安装5.1.1版本）
postcss-pxtorem是postcss插件，把px转换成rem
npm install postcss-pxtorem@5.1.1 --s-d③ 根目录下创建postcss.config.js文件
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 已设计稿宽度375px为例 vant用的是375的设计稿 propList: ['*'], }, },};三、分析页面实现功能
分析：
① 根据项目页面构成，我们要创建4个vue组件，分别是views/Home、views/Search、views/Comment、views/Play
② 页面之间通过路由跳转，因此要创建文件夹 router/index.js
③ 页面所需要的数据是通过发送网络请求获取的，因此要创建untils/request.js文件，api/index.js作为统一出口
④ 首页和搜索页的顶部和底部一样，可以将这部分提取为一个组件，因此要创建views/layout.vue
⑤ 首页最新新闻和搜索页最佳匹配样式结构一样，因此也可以提取出来，创建components/songItem.vue组件
1、路由页面准备
layout属于一级路由，home和search属于二级路由；comment、play属于一级路由
src/router/index.js文件代码
import Vue from "vue";import VueRouter from "vue-router";import Layout from "@/views/Layout";import Home from "@/views/Home";import Search from "@/views/Search";import Play from "@/views/Play";import Comment from "@/views/Comment"Vue.use(VueRouter);export default new VueRouter({ routes:[ { path:"/", redirect:'/layout', }, { path:"/layout", redirect:'/layout/home', component:Layout, children:[ { name:'home', path:'home', component:Home, meta:{ title:'首页' } },{ name:'search', path:'search', component:Search, meta:{ title:'搜索' } } ] }, { name:'play', path:'/play', component:Play, }, { name:'comment', path:'/comment', component:Comment } ]})2、封装axios网路请求
新建untils/request.js
import axios from "axios";// axios.create()创建一个axios对象const request = axios.create({ //基础路径，发请求的时候，路径当中会出现api，不用你手写baseURL:'http://localhost:3000',//请求时间超过5秒timeout:5000});export default request3、公共组件
components/songItem.vue组件
<template> <van-cell :id="id" :title="name" :label="autor" @click="getComment(id)"> <template #right-icon> <van-icon name="play-circle-o" class="search-icon" @touchstart ="playFn(id)"/> </template> </van-cell></template><script>export default { name:'SongItem', props:{name:String,autor:String,id:Number}, methods:{ playFn(id){ this.$router.push({ name:'play', query:{ id:id } }); console.log(id); }, getComment(id){ this.$router.push({ name:'comment', query:{ id } }) } }}</script>四、具体页面实现
1、Layout组件相关
views/Layout/index.vue
<template> <div> <van-nav-bar :title="activeTitle" fixed/> <div class="main"> <keep-alive include="Home,Search"> <router-view></router-view> </keep-alive> </div> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" to="/layout/home">首页</van-tabbar-item> <van-tabbar-item icon="search" to="/layout/search">搜索</van-tabbar-item> </van-tabbar> </div></template><script>import { ref } from 'vue';export default { name:'Layout', data(){ return { activeTitle:this.$route.meta.title, } }, setup() { const active = ref(0); return { active, }; }, // 通过监听路由切换 watch:{ $route(){ this.activeTitle = this.$route.meta.title } }}</script><style scoped> .main { padding-top: 56px; padding-bottom: 66px; }</style>2、Home组件相关
① 封装home相关axios请求
api/home.js
import request from "@/untils/request";// 推荐音乐export const hotMusic = (params)=>request({url:'/personalized',params})// 最新音乐export const newMusic = (params)=>request({url:'/personalized/newsong',params})② Home组件代码
views/Home/index.vue
<template> <div> <p class="title">推荐歌单</p> <van-row gutter="10" > <van-col span="8" v-for="m in hotMusic" :key="m.id"> <van-image width="100%" height="3rem" :src="m.picUrl"/> <p class="song_name">{{m.name}}</p> </van-col> </van-row> <p class="title">最新音乐</p> <SongItem v-for="n in newMusic" :key="n.id" :name="n.name" :autor="n.song.artists[0].name + n.name" :id="n.id"></SongItem> </div></template><script>import SongItem from "@/components/songItem.vue";import {hotMusicAPI,newMusicAPI} from "@/api";export default { name:'Home', data(){ return { hotMusic:[], newMusic:[], } }, components:{SongItem}, async created(){ // 获取推荐歌曲 const resHot= await hotMusicAPI({limit:6}) this.hotMusic = resHot.data.result; // 获取最新音乐 const resNew = await newMusicAPI({limit:20}); this.newMusic = resNew.data.result; },}</script><style>/* 标题 */.title { padding: 0.266667rem 0.24rem; margin: 0 0 0.24rem 0; background-color: #eee; color: #333; font-size: 15px;}/* 推荐歌单 - 歌名 */.song_name { font-size: 0.346667rem; padding: 0 0.08rem; margin-bottom: 0.266667rem; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/}</style>3、Search组件相关
① 封装search相关axios请求
import request from "@/untils/request";//热词export const hotSearch = ()=>request({url:'/search/hot/detail'});// 关键词搜索export const keywordSearch = (params) => request({url:"/cloudsearch",params})②Search组件代码
<template> <div> <van-search v-model="searchValue" placeholder="请输入搜索关键词" shape="round"/> <div class="search_wrap" v-if="searchValue.length==0"> <p class="hot_title">热门搜索</p> <div class="hot_name_wrap"> <span class="hot_item" v-for="h in hotSearch" :key="h.score" @click="btn(h.searchWord)">{{h.searchWord}}</span> </div> </div> <div class="search_wrap" v-else> <p class="hot_title">最佳匹配</p> <SongItem v-for="k in keywordSearch" :key="k.id" :name="k.name" :autor="k.ar[0].name + ' / '+ k.al.name" :id="k.id"></SongItem> </div> </div></template><script>import {hotSearchAPI,keywordSearchAPI} from "@/api";import SongItem from "@/components/songItem.vue";export default { name:'Search', data() { return { searchValue:'', // 搜索框的值 hotSearch:[], // 热词 keywordSearch:[] //关键词搜索结果 } }, components:{SongItem}, async created(){ //获取热搜词 const hotSearch = await hotSearchAPI(); this.hotSearch = hotSearch.data.data; }, methods:{ async btn(str){ this.searchValue = str; const keywordSearch = await keywordSearchAPI({keywords:this.searchValue,type:1}); this.keywordSearch = keywordSearch.data.result.songs; //点击热词不需要等待立即执行 setTimeout(()=>{ clearTimeout(this.timer); }) }, }, watch:{ // 通过监视searchValue的变化来获取输入框的内容 searchValue(){ if(this.searchValue.length==0) { return this. keywordSearch = [] }else{ //设置防抖减少向服务器发送请求。类似于王者荣耀回车 clearTimeout(this.timer); this.timer = setTimeout(async()=>{ const keywordSearch = await keywordSearchAPI({keywords:this.searchValue,type:1}); this.keywordSearch = keywordSearch.data.result.songs; },3000) } } }}</script><style scoped> /* 热门搜索容器的样式 */ .search_wrap { padding: 0.266667rem; } /*热门搜索文字标题样式 */ .hot_title { font-size: 0.32rem; color: #666; } /* 热搜词_容器 */ .hot_name_wrap { margin: 0.266667rem 0; } /* 热搜词_样式 */ .hot_item { display: inline-block; height: 0.853333rem; margin-right: 0.213333rem; margin-bottom: 0.213333rem; padding: 0 0.373333rem; font-size: 0.373333rem; line-height: 0.853333rem; color: #333; border-color: #d3d4da; border-radius: 0.853333rem; border: 1px solid #d3d4da; }</style>4、Comment组件相关
① 封装comment相关axios请求
import request from "@/untils/request";// 获取评论export const getComment = (params) =>request ({url:"/comment/hot",params})②Comment组件代码
<template> <div> <van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()"/> <div> <div class="main" > <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="(c,index) in list" :key="index"> <div class="wrap" > <div class="img_wrap"> <img :src="c.user.avatarUrl" alt=""> </div> <div class="conent_wrap"> <div class="header_wrap" > <div class="info_wrap"> <p>{{c.user.nickname}}</p> <p>{{c.time}}</p> </div> <div>{{c.likedCount}}点赞</div> </div> <div class="footer_wrap"> {{c.content}} </div> </div> </div> </van-cell> </van-list> </van-pull-refresh> </div> </div> </div></template><script>import {getCommentAPI} from "@/api";export default { name:'Comment', data(){ return { id : this.$route.query.id, commentsInfo:[], // 每次接收20个评论数据 page:1, // 页码 loading:false, // 下拉加载状态 finished:false, // 所有数据是否加载完成状态 refreshing:true, // 上拉加载状态 list:[] // 所有数据 } }, methods: { //获取数据 async getList(){ const getComment = await getCommentAPI({id:this.id,type:0,limit:20,offset:(this.page -1 )*20}); this.commentsInfo = getComment.data.hotComments; this.commentsInfo.forEach(obj=>this.list.push(obj)) this.loading = false; }, // 上拉刷新 async onLoad(){ console.log(this.list.length) if(this.loading){ this.getList(); this.page++; this.refreshing = false; } if(this.list.length %20 != 0) { this.loading = false; this.finished = true; } }, // 下拉刷新 async onRefresh(){ this.finished = false; this.loading = true; this.onLoad(); } },}</script><style scoped> .main { padding-top: 46px; } .wrap { display: flex; } .img_wrap { width: 0.8rem; height: 0.8rem; margin-right: 0.266667rem; } .img_wrap img { width: 100%; height: 100%; border-radius: 50%; } .conent_wrap { flex: 1; } .header_wrap { display: flex; } .info_wrap { flex: 1; } .info_wrap p:first-child { font-size: 0.373333rem; color: #666; } .info_wrap p:last-of-type { font-size: 0.24rem; color: #999; } .header_wrap div:last-of-type { color: #999; font-size: 0.293333rem; } .footer_wrap { font-size: 0.4rem; color: #333; }</style>5、Play组件相关
① 封装play相关axios请求
import request from "@/untils/request";//获取音乐播放地址export const getSongById = (params)=>request({url:"/song/url/v1",params});//获取歌词export const getLyricById = (params)=>request({url:'/lyric',params});//获取歌曲详情export const getMusicById = (params)=>request({url:'/song/detail',params})②Play组件代码
<template> <div class="play"> <div class="song-bg" :style="`background-image: url();`"></div> <div class="header"> <van-icon name="arrow-left" size="20" class="left-incon" @click="$router.back()"/> </div> <div class="song-wrapper"> <div class="song-turn ani" :style="`animation-play-state:${playState " />; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; right: 0; bottom:0;}.song-wrapper { position: fixed; width: 247px; height: 247px; left: 50%; top: 50px; transform: translateX(-50%); z-index: 10001;}.song-turn { width: 100%; height: 100%; background: url("./img/bg.png") no-repeat; background-size: 100%;}.start-box { position: absolute; width: 156px; height: 156px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center;}.song-start { width: 56px; height: 56px; background: url("./img/start.png"); background-size: 100%;}.needle { position: absolute; transform-origin: left top; background: url("./img/needle-ab.png") no-repeat; background-size: contain; width: 73px; height: 118px; top: -40px; left: 112px; transition: all 0.6s;}.song-img { width: 154px; height: 154px; position: absolute; left: 50%; top: 50%; overflow: hidden; border-radius: 50%; transform: translate(-50%, -50%);}.m-song-h2 { margin-top: 20px; text-align: center; font-size: 18px; color: #fefefe; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.lrcContent { margin-top: 50px;}.lrc { font-size: 14px; color: #fff; text-align: center;}.left-incon { position: absolute; top: 10px; left: 10px; font-size: 24px; z-index: 10001; color: #fff;}.ani { animation: turn 5s linear infinite;}@keyframes turn { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}</style>6、API统一出口
API/index.js
// 统一出口import {hotMusic,newMusic} from "@/api/home";import {hotSearch,keywordSearch} from "@/api/search";import { getSongById,getLyricById,getMusicById} from "@/api/play";import {getComment} from "@/api/comment";//导出推荐歌单方法export const hotMusicAPI = hotMusic//导出新歌方法export const newMusicAPI = newMusic//导入热搜export const hotSearchAPI = hotSearch;//导入关键词搜索export const keywordSearchAPI = keywordSearch;//播放音乐export const getSongByIdAPI = getSongById;//获取歌词export const getLyricByIdAPI = getLyricById;//获取歌曲详情export const getMusicByIdAPI = getMusicById;//获取评论export const getCommentAPI = getComment;五、Play和Comment组件详解
在做项目的过程中，感觉Play组件歌词同步逻辑有点复杂，还有Comment组件上拉和下拉刷新也有点难，因此专门写了两篇详解，可以看一下~~~
Play组件详解：Play组件播放音乐并实现同步一次显示一行歌词
Comment组件详解：Comment组件评论页上拉和下拉刷新
觉得有用，记得点赞收藏哦~~