zoukankan      html  css  js  c++  java
  • 音乐播放器—笔记和坑

    目录结构

    src

    Api:后端请求相关代码,包括ajax和jsonp

    common:通用的静态资源。

    ——fonts

    ——image

    ——js

    ——stylus

    components:通用组件

    router:路由

    store:存放vuex相关代码

    安装stylus和stylus-loader

    在package.json的dependencies 里面加上下面这两句:

    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1"

    然后:npm install

    关于stylus的更多:npmjs.com

    从qq音乐抓取数据

    jsonp原理,手写jsonp

    在package.json的dependencies 里面加上下面这句:

    "jsonp":"^0.2.1"
    

    然后:npm install

    封装jsonp:

    import originJsonp from 'jsonp'
    
    export default function jsonp(url, data, option) {
      url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    
      return new Promise((resolve, reject) => {
        originJsonp(url, option, (err, data) => {
          if (!err) {
            resolve(data)
          } else {
            reject(err)
          }
        })
      })
    }
    
    export 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) : ''
    }
    

    轮播图

    使用better-scroll

    优化:用到<keep-alive>,解决切换tab回来时重新渲染的问题

    抓取歌单列表

    最新的vue-webpack-template 中去掉了dev-server.js,所以要在webpack.dev.conf.js中写。参考

  • 相关阅读:
    自动刷新页面
    docker 数据卷管理
    docker container(容器)
    docker images
    docker 设计原理
    hbase数据原理及基本架构
    详谈kafka的深入浅出
    django介绍及路由系统
    mysql爱之深探测
    mysql数据库内容相关操作
  • 原文地址:https://www.cnblogs.com/PeriHe/p/8024753.html
Copyright © 2011-2022 走看看