参考文档：

• 网易云音乐接口下载地址：GitHub - Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service网易云音乐 Node.js API service. Contribute to Binaryify/NeteaseCloudMusicApi development by creating an account on GitHub.https://github.com/Binaryify/NeteaseCloudMusicApi
• vant移动组件库：Vant 2 - Mobile UI Components built on VueMobile UI Components built on Vuehttp://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

1.0 本地接口部署

目标：下载网易云音乐node接口项目，在本地期待，为我们vue项目提供数据支持

如何做反向代理解决跨域问题？

本地node服务器开启cors,负责请求的转发和数据接收回传

1.1 本地接口准备

原理：跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API

• 文档地址：网易云音乐 NodeJS 版 API网易云音乐 NodeJS 版 APIhttps://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi

1 安装

$ git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
$ cd NeteaseCloudMusicApi
$ npm install // yarn 

在要下载的目录文件夹下，拉去github的分支,然后自己下载第三方的包用(npm 或者 yarn)

2 运行

在对应目录下启动终端

$ node app.js

1.2 前端项目准备

目标：初始化项目，下载必备包，引入初始文件，配置按需自动引入Vant

• 初始化工程(vue create music-demo)

vue create music-deom

• 下载这三个包(注意下载的路径)

yarn add axios vant vue-router@3

• 下载Vant自动按需引入插件babel-plugin-import

// 这个是在开发(development)环境用的
yarn add babel-plugin-import -D

• 在babel.config,js配置-看Vant文档

 // 从Vant手册拿plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]

• 引入提前准备好的reset.css,flexible.js到main,js使用
  • reset:Normalize.css: Make browsers render all elements more consistently.http://necolas.github.io/normalize.css/
  • flexible: https://download.csdn.net/download/qq_42316056/87221654?spm=1001.2014.3001.5503https://download.csdn.net/download/qq_42316056/87221654?spm=1001.2014.3001.5503

1.3 需求分析

• 根据需求创建4个页面组件
  • views/Layout/index.vue
  • views/Home/index.vue
  • views/Search/index.vue
  • views/Play/index.vue

1.4 路由准备

目标:准备路由配置，显示不同路由页面

• router/index.js - 配置路由规则和对应路由页面

// 配置路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 定义的页面
import Layout from '@/views/Layout'
import Home from '@/views/Home'
import Play from '@/views/Play'
import Search from '@/views/Search'
import Not404 from '@/components/Not404'Vue.use(VueRouter)
// 定义规则
const routes = [{path: '/',redirect: '/layout' // 重定向},{path: '/layout',component: Layout,children: [//儿子里面不用再加/了{path: 'home',component: Home},{path: 'search',component: Search},]},{path: '/play',component: Play},{path: '*',component: Not404},
]
// 生成路由对象
const router = new VueRouter({routes,//ES6 简写// mode: 'history'// 默认不写是 'hash'
})
// 使用
// 向外导出
export default router 

• main.js - 引入路由对象注入到vue中

// 引入路由模块
import router from '@/router'
new Vue({router,//路由模块注入render: h => h(App),
}).$mount('#app')

• App.vue - 留好router-view显示路由页面

1.5 Tabbar组件

目标：点击底部导航，切换路由页面显示

使用：根据图示，把Tabbar组件在Layout.vue底部显示出来

功能：点击以后，需配合路由切换页面功能

1.6 NavBar导航组件

目标：实现顶部标题展示

使用：把NavBar注册引入使用，静态效果

template部分：

    <van-nav-bar :title="activeTitle" />

1.7 NavBar导航切换

• 网页打开默认显示
• 侦听路由切换显示对应标题

在router/index.js路由规则里：(先定义一个meta添加一个额外信息对象)

children: [{path: 'home',component: Home,meta: { //meta保存路由对象额外信息的title: '首页'}},

在Layout/indx.vue 的script部分：

 data() {return {activeTitle: this.$route.meta.title,//默认情况 顶部显示（默认获取当前路由对象里的meta中的title值）};},

 watch: {$route() {// console.log(this.$route);// 提取切换后路由信息对象里的titlethis.activeTitle = this.$route.meta.title}}

1.8 网络请求封装

目标：网络请求，不散落在各个逻辑页面里，封装起来方便以后修改

代码分层，便于以后的修改，无需触碰逻辑页面

• src/utlis/request.js - 设置基地址，导出axios函数

// 引入axios 创建网络请求,方便散落vue各地，不方便修改
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:3000'
export default axios

• src/api/Home.js - 请求方法 axios({url:'具体地址'})

import request from '@/utils/request'
// 首页 - 推荐歌单数据
export const recommendMusic = params => request({url: '/personalized',params//  params: params// 将来外面可能传入params的值 params = {limit:20} //取20行数据
})

• src/api/index.js - 把Home.js里函数引入过来 统一导出

import { recommendMusic } from './Home'
export const recommendMusicAPI = recommendMusic //请求推荐歌单的方法导出去

• 具体逻辑页面，引入api/index.js请求方式，async+await等待 axios 的结果回来

// 在 main.js页面下：
// 测试封装的API方法-按需导入
import { recommendMusicAPI } from '@/api'
async function fn() {const res = await recommendMusicAPI()//api 方法原地会得到 axios 请求在原地的Promise 对象(里面有一个ajax请求)console.log(res)
}
fn()//执行一下试试看

1.9 首页  推荐歌单

• 布局van-row和van-col
• van-image显示图片，p标签显示歌名
• 引入api里的网络请求方法，把数据请求回来，循环铺设

铺设页面思路：

一套标签样式准备好，然后拿回数据，循环赋予进去

<p class="title">推荐歌单</p><van-row gutter="10"><van-col span="8" v-for="obj in reList" :key="obj.id"><van-image radius=".75rem" width="100%" fit="cover" height="7.5rem" :src="obj.picUrl" /><p class="song_name">{{ obj.name }}</p></van-col></van-row>

1.10 首页 - 最新音乐

目标：完成最新音乐单元格列铺设

• 引入注册使用van-cel,并且设置一套标签和样式准备
• 在api/Home,js一最新音乐的接口方法
• 引入到Home/index.vue中，数据铺设到页面

单元格定义右侧图标：

van-cel组件支持具名插槽设置右侧的内容

1.11 热搜词关键字

• 搜索框 - van-search 组件
• api/Search.js - 热搜关键字 - 接口方法
• Search/index.vue引入获取热搜关键字 - 铺设页
• 点击文字填充到输入框

给输入框 v-mode 绑定变量，然后给他赋值就可以实现，按钮文字填入输入框

1.12 搜索结果 - 点击获取

• api/Search,js - 搜索结果，接口方法
• Search/index.vue引入-获取搜索结果-铺设页面
• 和热搜关键字容器-互斥显示

• 点击文字填充到输入框，请求搜索结果铺设

1.13 搜索结果 - 输入框

目标：监测输入框改变

• 观察van-search组件是否支持和实现input事件
• 绑定@input事件和方法（说明书有）
• 在事件处理方法中获取对应的值使用

1.14 网易云音乐-搜索结果-加载更多

目标：触底后加载下一页数据

• van-list组件监测触底执行onload事件
• 配合后台接口，传递下一页的标识
• 拿到下一页数据后追加到当前数组末尾即可

高级的写法：原数组等于原数组展开加上新加载的数组也展开，再合并成一个数组

this.resultList = [...this.resultList, ...res.data.result.songs]

1.15 网易云音乐-防抖使用

目标：修复输入框删除过快-效果错误

• 输入框输入"asdfghjkl"
• 接着快速的删除
  • 每次改变-马上发送网络请求

1.16 页码bug修复

• 加载更多时，page已经往后计数了
• 重新获取时，page不是从第一页获取的
• 点击搜索/输入框搜索时，把page改回1

async fn(str) { // 点击热搜关键词this.page = 1 // 点击重新获取第一页数据this.finished = false // 点击新关键词 - 可能有新的数据了this.value = str//选中的词赋值给搜索框绑定的变量上const res = await this.getListFn()this.resultList = res.data.result.songsthis.loading = false// console.log(this.resultList);},

1.17 Songitem封装

目标：搜索结果和首页使用相同标签结构

• 首页的最新音乐和搜索结果的音乐

• 标签样式功能相同
• 封装Songltem.vue到这2处复用即可

 // 让他们走的时候去播放页面，并且带走id参数methods: {playFn() {// 点击跳转路由this.$router.push({path: '/play',query: {id: this.id  //歌曲id，通过路由跳转传递过去}})}}

重复的标签尽量封装成组件，然后去复用

1.18 跳转播放

• 组件SongItem.里-点击事件
• api/Play.js-提前准备好-接口方法
• 跳转到Play页面-把歌曲id带过进去

 let id = this.$route.query.id//接收路由跳转过来的id

1.19 Vant 组件适配

• postcss-配合webpack翻译css代码
• postcss-pxtorem-配合webpack,自动把px转成rem
• 新建postcss.config.js-设置相关配置

module.exports = {plugins: {"postcss-pxtorem": {//能够把所有元素的px单位转成Rem//rootValue:转换px的基准值//例如一个元素宽是24px,则换成rem之后就是1rem。rootValue: 18,//18px为...和你自己自定义的flexjs有关propList: ["*"]}}
}