【音乐App】—— Vue-music 项目学习笔记：推荐页面开发

【音乐App】—— Vue-music 项目学习笔记：推荐页面开发

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

上一篇总结了项目概述、项目准备、页面骨架搭建。这一篇重点梳理推荐页面开发。项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。

---

 

一、页面简介+轮播图数据分析

• 数据：从QQ音乐抓取的真实数据

轮播图	热门歌单推荐

二、JSONP原理介绍

• 一句话解释JSONP原理：动态生成一个JavaScript标签，其src由接口url、请求参数、callback函数名拼接而成；利用js标签没有跨域限制的特性实现跨域请求

• 有几点需要注意：

1. callback函数要绑定在window对象上
2. 服务端返回数据有特定格式要求：callback函数名+’(‘+JSON.stringify(返回数据) +’)’
3. 不支持post，因为js标签本身就是一个get请求

• 什么是Promise：

1. 简单说就是一个容器，里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。
2. 从语法上说，Promise是一个对象，从它可以获取异步操作的消息

• Promise基本用法：

1. ES6规定，Promise对象是一个构造函数，用来生成Promise实例

   var promise = new Promise(function(resolve,reject){
       // ... some code
       if(/* 异步操作成功 */){
          resolve(value);
       }else{
          reject(error);
       }
   });

2. Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不是自己部署。
3. Promise实例生成以后，可以用then方法分别制定Resolved状态和Rejected状态的回调函数：

   promise.then(function(value){
            // sucess
   },function(error){
            // failure
   });

三、JSONP

• github地址：https://github.com/webmodules/jsonp

• 安装JSONP依赖：

  npm install jsonp --save

四、封装JSONP、Primise

• common->js目录下: 创建 jsonp.js

  import originJSONP from 'jsonp'
  
  export default function jsonp(url, data, option) {
            url += (url.indecOf('?') < 0 ? '?' : '&') + param(data);
  
            return new Promise((resolve, reject) => {
                 originJSONP(url, option, (err, data) => {
                      if(!err){
                           resolve(data)
                      }else{
                           reject(err)
                      }
                })
           })
  }
  
  function param(data) {
          let url = ""
          for(var k in data){
               let value = data[k] !== undefined ? data[k] : ''
               url += `&${k}=${encodeURIComponent(value)}`
          }
          return url ? url.substring(1) : ''
  }

五、JSONP的应用+轮播图数据抓取

• api目录下创建 config.js：配置与接口统一的参数

  /**
  * 为了和QQ音乐接口一致，配置一些公用的参数、options和err_num码
  */
  export const commonParams = {
            g_tk: 5381,  //会变，以实时数据为准
            inCharset: 'utf-8',
            outCharset: 'utf-8',
            notice: 0,
            format: 'jsonp'
  }
  
  export const options = {
            param: 'jsonpCallback'
  }
  
  export const ERR_OK = 0

• api目录下创建 recommend.js：

  import jsonp from '@/common/js/jsonp'
  import {commonParames, options} from './config'
  
  export function getRecommend() {
         const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
          
         const data = Object.assign({}, commonParames, {
               platfrom: 'h5',
               uin: 0,
               needNewCode: 1
         })
         return jsonp(url, data, options)
  }

• recommend.vue中调用并获取数据

  import {getRecommend} from '@/api/recommend'
  import {ERR_OK} from '@/api/config'
  
  export default {
      created() {
             this._getRecommend();
      },
      methods: {
             _getRecommend() {
                     getRecommend().then((res) => {
                           if(res.code === ERR_OK) {
                                console.log(res.data.slider)
                           }
                     })
               }
       }
  }

六、 轮播图组件实现

• base目录下： 创建slider.vue组件

• 插槽<slot></slot>：外部引用slider.vue时，<slider></slider>里面包裹的DOM，会被插入到插槽的部分

  <div class="slider-group">
       <slot></slot>
  </div>

• recommend.vue 中编写插槽中的DOM：

  <slider>