网易云音乐项目核心问题

01_网易云音乐_跨域解决

问题

1. 如何做反向代理解决跨域问题?

答案

1. 如何做反向代理解决跨域问题?
   1. 本地node服务器开启cors, 负责请求的转发和数据接收回传

02_网易云音乐_本地node接口服务

问题

1. Node搭建的服务, 如何把数据请求回来?

答案

1. Node搭建的服务, 如何把数据请求回来?
   1. 收到请求后, 伪造身份, 请求网易云API拿到数据

练习时间：1m

1. 先执行克隆命令去下载node接口服务

03_网易云音乐_前端从0准备项目

问题

1. 从0搭建项目要做什么?

答案

1. 从0搭建项目要做什么?
   1. 创建脚手架项目后, 下载需要的包, 引入需要的东西

练习时间：1m

1. 安装node接口服务依赖包：npm i 或者 yarn
2. 初始化项目：vue create music-demo

04_网易云音乐_页面组件创建

问题

1. 需求分析如何做呢?

答案

1. 需求分析如何做呢?
   1. 根据客户需求, 分解需要完成的模块和大致效果, 创建组件

练习时间：30s

1. 安装依赖包：

   1. yarn add axios vant vue-router

   2. yarn add babel-plugin-import -D

   3. 在babel.config.js - 添加插件配置

      plugins: [
          ['import', {
              libraryName: 'vant',
              libraryDirectory: 'es',
              style: true
          }, 'vant']
      ]
      

05_网易云音乐_路由准备

问题

1. vue-router如何使用?

答案

1. vue-router如何使用?
   1. 下载/引入/注册/规则/路由对象/注入/显示
   2. 改变url的hash值路径, 导致对应组件显示

练习时间：7m

06_网易云音乐_底部导航

问题

1. Tabbar导航集成路由?

答案

1. Tabbar导航集成路由?
   1. 加入route属性和to集成路由切换功能

07_网易云音乐_头部导航

问题

1. NavBar导航如何使用?

答案

1. NavBar导航如何使用?
   1. 引入, 注册, 在响应位置使用, 选择属性使用

08_网易云音乐_切换头部导航文字

问题

1. 路由切换如何确认标题?

答案

1. 路由切换如何确认标题?
   1. 当前路由信息对象里meta中标题
   2. 监测$route改变, 提取当前路由对象信息里meta中标题

练习时间：5m

09_网易云音乐_网络请求封装

问题

1. 为什么要封装api?

答案

1. 为什么要封装api?
   1. 代码分层, 便于以后的修改, 无需触碰逻辑页面

10_网易云音乐_首页_推荐歌单

问题

1. 如何铺设页面呢?

答案

1. 如何铺设页面呢?
   1. 一套标签样式准备好, 然后拿回数据, 循环赋予进去

11_网易云音乐_首页_最新音乐铺设

问题

1. 单元格如何自定义右侧图标?

答案

1. 单元格如何自定义右侧图标?
   1. van-cell组件支持具名插槽设置右侧的内容

练习时间：5m

12_网易云音乐_搜索_热搜铺设

问题

1. 按钮文字填入输入框如何实现?

答案

1. 按钮文字填入输入框如何实现?
   1. 点击获取文字, 给输入框v-model绑定的变量赋值即可

13_网易云音乐_搜索_结果铺设

问题

1. 点击互斥是如何做的呢?

答案

1. 点击互斥是如何做的呢?
   1. v-if加个条件, 对应使用v-else即可

14_网易云音乐_搜索_监测搜索框改变

问题

1. input事件和change事件区别?

答案

1. input事件和change事件区别?
   1. input: 只要内容改变实时触发
   2. change: 失去焦点内容改变才触发

练习时间：5m

15_网易云音乐_加载更多

问题

1. 加载更多的思路是什么?

答案

1. 加载更多的思路是什么?
   1. 触底后, 请求下一页数据, 拼接到当前页面

练习时间：3m

16_网易云音乐_页码bug修复

问题

1. 为什么加载更多以后, 切换数据再搜索, 结果不对?
2. 如何修复呢?

答案

1. 为什么加载更多以后, 切换数据再搜索, 结果不对?
   1. page变量被累加后, 一直在使用
2. 如何修复呢?
   1. 点击关键词/输入框改变 – 把page改回

17_网易云音乐_上下内边距修复

问题

1. 如何避免上下导航盖住内容呢?

答案

1. 如何避免上下导航盖住内容呢?
   1. 给内容套个div, 设置上下内边距, 把内容挤压到中间即可

练习时间：3m

18_网易云音乐_SongItem封装

问题

1. 遇到重复的标签怎么办?

答案

1. 遇到重复的标签怎么办?
   1. 看好封装哪部分, 把标签和样式放到.vue文件中, 然后复用

19_网易云音乐_播放音乐

问题

1. 跳转路由如何传参?

答案

1. 跳转路由如何传参?
   1. name+params 或者path+query方式

练习时间：5m

20_网易云音乐_自动适配

问题

1. 移动端如何适配?
2. 如何让px自动转rem?

答案

1. 移动端如何适配?
   1. 把所有px转成rem
   2. 利用flexible.js – 网页宽度改变 – 自动切换html的font-size
2. 如何让px自动转rem?
   1. 让webpack配合postcss和postcss-pxtorem即可

练习时间：2m