网易云音乐播放器项目实现步骤部分（1）
网易云音乐播放器项目实现步骤LCW
项目后端搭建
下载项目所需要的文件
项目源码NeteaseCloudMusicApi-master（后端api源代码）
下载地址：https://binaryify.github.io/NeteaseCloudMusicApi
运行项目需要的后端文件
项目创建
通过vue-cli脚手架创建项目：
vue create music001
//项目名称：music001
选择自定义模板
选取并下载所需要的依赖包文件
选择vue版本
通过终端指令 npm run serve 运行项目
页面创建之发现页面的实现
首先创建发现页面，然后在页面中分别以组件形式引入：
分为以下几个组件：
导航栏，轮播图，发现歌单列表
前置:引入文件rem.js
在项目中的public/index.html文件中引入
作用：以控制项目中的文本大小 //物联网2003李春伟202004870349
rem.js : 文件控制文件大小方法通过侦测设备屏幕宽度，依靠特定函数动态调整
function remSize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
document.querySelector('body').style.fontSize = 0.3 + 'rem'
// 设计稿是750px.
// 设置1半的宽度，那么就是375px
// 1rem == 100px的设计稿宽度
// 表达一半的宽度就是3.75rem
//物联网2003李春伟202004870349
}
remSize()
// 在不同屏幕宽度下，html的font-size大小也会跟着改变
window.onresize = function() {
remSize()
}
导航栏
将导航栏已组件形式添加到页面上，以此优化项目结构方便后期的开发工作
具体实现步骤
在components中创建组件 topNav.vue
将组件topNav.vue引入默认显示页面view文件夹下的HomeView.vue文件并注册，使用
网页编写（html+css）
使用html5+css3编写网页
在特定地方使用阿里巴巴矢量图标以实现特定图标的渲染（阿里巴巴矢量图标库地址：https://www.iconfont.cn/）
1，先搜索需要的图标，将其添加到你的库里
2.点击你的库，新建一个图标库项目，并将你选择的图标添加到你的项目里
3.进入我的项目查看图标
4.复制Font class和Symbol中的代码 ，引入到项目中的public/index.html文件
<script src="//at.alicdn.com/t/font_3349348_31hro141hsm.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_3349348_31hro141hsm.css">
5.特定图标的渲染
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
xlink:href="图标名称"
</svg>
轮播图
下载并使用依赖包 swiper@5与 vue-awesome-swiper以快速简洁的创建组件
引入swiper.css与swiper文件
通过swiper.css 与less文件快速创建组件的css样式
<style lang="less">
.swipercom {
width: 7.5rem;
#swiperIndex.swiper-container {
width: 7.1rem;
height: 2.6rem;
border-radius: 0.1rem;
.swiper-slide img {
width: 100%;
}
.swiper-pagination-bullet-active {
background-color: orangered;
}
}
}
</style>
通过Swiper对象函数 绑定操作对象并对对象下的元素进行轮播
//与id名为swiperIndex的标签绑定
var mySwiper = new Swiper('#swiperIndex',{
//配置分页器内容
pagination:{
el:'.swiper-pagination', //分页器与那个标签关联
clickable:true //分页器是否可以点击
}
})
<div class="swiper-container" id="swiperIndex">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
<img :src="item.pic" alt="">
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
API
轮播的图片等一系列数据需要使用Ajax向后端请求，后端传输数据，前端接收（vue项目中使用axios来使用ajax）为此需要创建一个文件api/index.js用于使用axios与后端交互
引入axios
import axios from 'axios'
对外抛出访问相对应接口的函数,例如
export function getBanner(type=0){
return axios.get(`${baseUrl}/banner?type=${type}`)
}
//引入axios
import axios from 'axios'
let baseUrl = 'http://localhost:3000'
//获取轮播图的api, /banner?type=2 , type:资源类型，默认为0即PC，
//0：pc 1：android 2：iphone ， 3：ipad
export function getBanner(type=0){
return axios.get(`${baseUrl}/banner?type=${type}`)
}
export function getGeDan(limit=30){
return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}
在组件中调用axios方法
先引入
import { getBanner } from '@/api/index.js'
在data里面先创建一个数组用于存放数据,可以给默认值
data() {
return {
imgs: [
{ pic: require("../assets/swiper1.jpg") },
{ pic: require("../assets/swiper2.jpg") },
{ pic: require("../assets/swiper3.png") },
{ pic: require("../assets/swiper2.jpg") },
{ pic: require("../assets/swiper3.png") },
],
}
在调用异步函数
async mounted() {
let { data:res } = await getBanner(1)
this.imgs = res.banners.slice(0,5)
}
icon列表
iconList组件是个静态组件
直接用html加css构建就可以代码如下：
<template>
<div class="iconList">
<div class="iconItem">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tuijian"></use>
</svg>
<span>每日推荐</span>
</div>
<div class="iconItem">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fm"></use>
</svg>
<span>私人FM</span>
</div>
<div class="iconItem">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gedan"></use>
</svg>
<span>歌单</span>
</div>
<div class="iconItem">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paihang"></use>
</svg>
<span>排行榜</span>
</div>
</div>
</template>
<script>
export default {
name:'iconList',
data(){
return {}
}
}
</script>
<style lang="less" scoped>
.iconList{
width: 7.5rem;
display: flex;
justify-content: space-between;
padding: 0.4rem;
.iconItem{
display: flex;
flex-direction: column;
align-items: center;
.icon{
width: 1.2rem;
height: 1.2rem;
}
span{
font-size: 0.26rem;
}
}
}
</style>
发现歌单（歌单列表）
和swiper异曲同工，方法一样
先下载相关依赖，由于和swiper一样使用swiper所以不用下载直接引用
import "swiper/css/swiper.min.css";
import Swiper from "swiper";
通过swiper.css和less样式编写css样式
<style lang="less" scoped>
.musicList {
width: 7.5rem;
padding: 0 0.4rem;
.musicList-top {
display: flex;
justify-content: space-between;
height: 1rem;
align-items: center;
.title {
font-size: 0.4rem;
font-weight: 900;
}
.more {
border: 1px solid #ccc;
border-radius: 0.2rem;
font-size: 0.24rem;
height: 0.5rem;
width: 1.2rem;
text-align: center;
line-height: 0.5rem;
}
}
.mlist {
.swiper-container {
width: 100%;
height: 3rem;
.swiper-slide {
display: flex;
flex-direction: column;
position: relative;
img {
width: 100%;
height: auto;
border-radius: 0.1rem;
}
.name {
height: 0.6rem;
width: 100%;
font-size: 0.24rem;
line-height: 0.4rem;
}
.count {
position: absolute;
right: 0.1rem;
top: 0.1rem;
font-size: 0.24rem;
color: #ccc;
display: flex;
align-items: center;
.icon {
width: 0.3rem;
height: 0.3rem;
fill: #ccc;
}
}
}
}
}
}
</style>
由于musicList组件与swiper组件的创建步骤相似所以以下步骤整合在一起使用setup( )函数来实现
在api/index.js中创建getGeDan这个方法( 地址是查找网易云api文档获得)
let baseUrl = 'http://localhost:3000'
export function getGeDan(limit=30){
return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}
先引入相关依赖和axios方法
import { getGeDan } from "@/api/index.js";
import { reactive, onMounted, onUpdated } from "vue";
在setup( )调用axios方法和配置swiper
setup() {
let musics = reactive({
musicList: [], // 保存获取的歌单列表
});
// view与model绑定成功之后生命周期函数
onMounted(async () => {
let { data: res } = await getGeDan(10);
musics.musicList = res.result;
});
//view或者model发生改变后触发生命周期函数
onUpdated(() => {
var swiper = new Swiper("#musicSwiper", {
slidesPerView: 3, //每一屏展示多少块内容
spaceBetween: 10, //每个内容之间的间距
});
});
return { musics };
},
