网易云案例

跨域、反向代理

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

运行步骤

• 安装到本地网易云 Node.js API , npm i 安装需要的包，node app.js 运行
• 初始化工程
  • 下载所需的第三方包（axios、vant、vue-router）安装自动按需导入插件
  • 配置组件库
  • 环境配置结束

四个页面

• Layout/index.vue
• Home/index.vue
• Search/index.vue
• Play/index.vue

复制样式

• 引入路由

使用TarBar组件

使用 NavBar 组件

• 标题切换

• 搜索

封装网络请求

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

• utils/request.js -对 axios 进行二次封装，制定项目的地址

• api/Home.js - 统一管理所有需要的 url 地址，封装网络请求的方法并导出

  export const recommedMusic = params=>request({
  	url:"/personalized",
  	params
  })
  

• api/index.js -通以导出接口

  import {recommendMusix} from '@/api/Home'
  export const recommedMusicAPI = recommendMusic 
  

具体步骤

1. src/utils/request.js 设置基地址，对axios 二次封装
2. src/api/Home.js 请求方法-请求方法 axios
3. src/api/index.js -把其它请求模块里的函数引入统一导出
4. 具体使用的逻辑页面

推荐歌单

• 使用 组件库栅栏系统（van-row 、van-col）
• 使用 组件库图片系统 (van-image、p)
• 调整间距和属性
• 获取 API 得到的对象 ，封装需要用到的对象
• v-for 循环标签，铺设数据

最新音乐

• 写页面
• 封装请求方法，获取得到的对象，封装需要用到的对象
• v-for 循环标签，铺设数据

搜索页面

• 注册搜索组件（van-search）

热搜关键字

• 使用标题，关键词容器写页面
• 封装请求方法，获取得到的对象，封装需要用到的对象
• 在需要的组件页面，使用
• 循环 hot_item 类 span 给绑定点击事件，将其值输入的搜索框

搜索结果

• 封装方法
• 调用点击事件，获取到 promise 方法
• 铺设页面
• if-else 互斥搜索关键字和搜索结果

输入框搜索

• 绑定 @input 事件
• 将搜索结果保存到 resultList
• 如果关键词为空，阻止网络请求

加载下页数据

• van-list 组件检测执行 onload 事件
• 配合后台接口，传递下一页标识
• 拿到下一页数据后追加数组
• 几个关键词 loading、finishing、offset

loading ：需要在偏移后设置会 false，继续偏移

finished ： 如果没有数据，或数据加载完成 两处地方判断一下阻止网络请求

如果是数据加载完成，finished 需要将值设置为 true，但是需要在重新搜索，或者新加数据里重置回 false

问题以及解决

输入框防抖

每次删除输入框都会发起网络请求

在输入框改变的函数里

if(this.timer)clearTimeout(this.timer)//如果有定时器就删除，不然其发起网络请求
this.timer = setTimeoust(async()=>{...})//如果在一定时间内没有触发输入框改变，就发起请求

页面修复

在onload 函数中对 page++ ，清空输入框后没有对其进行清零操作

• 点击搜索 page重新赋值为1
• 输入框改变 page 重新赋值为 1

上下页面导航边距修复

播放音乐

创建 SongItem 组件

代替最新音乐和搜索结果使用到的 音乐框

播放音乐

• 封装方法
• 路由

vant 适配

postcss 配合 webpakc 翻译 css 代码

插件 postcss-pxtorem ，自动把 px 自动转换为 rem

配置

module.exports{
    plugins:{
        'postcss-pxtorem':{
            rootValue:37.5;//基准值	例如 72px会转换为2rem
            propList:['*'];//
        }
    }
}