H49-毕设：网易云音乐

这次我们做一个仿手机端网易云音乐

在写代码之前先做好准备工作，需求分析等
首先我们来画图

• 用例图
  • 
• 线框图（草图）
  • 
• 框架图
  • 

接下来搭建 LeanCloud 环境

1. 创建一个新应用 wy-music
2. 在 帮助-快速入门 中按照教程安装 SDK
3. 然后验证-测试代码
4. 添加 Song 和 Playlist 两个 Class

SDK 是什么

软件开发工具包（Software Development Kit, SDK）一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、作业系统等建立应用软件的开发工具的集合。
SDK 与 API 的区别

创建七牛帐号并上传一个mp3成功

注意七牛的版本使用的是 1.0.22,
npm安装的是 2.x，安装后在 package.json中修改后 npm i
代码
方案一：

1. 注册七牛帐号（上传身份证）
2. 创建一个篮子（bucket）
3. 往篮子里上传 mp3 文件
4. 获取 mp3 文件的外链

方案二：

1. 注册七牛帐号（上传身份证）
2. 创建一个篮子（bucket）

3. 创建一个 nodejs server

   1. 进入七牛 SDK 官网，选择 Node.js
   2. npm init -y
   3. npm install qiniu
   4. 添加 /uptoken 路由

   5. 在 /uptoken 中添加代码

      if (path === '/uptoken') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
        // set CORS
        response.setHeader('Access-Control-Allow-Origin', '*')
        // 获取 key，本地文件不上传
        var key = fs.readFileSync('./qiniu-key.json')
        key = JSON.parse(key)
        // 创建各种上传凭证之前，我们需要定义好其中鉴权对象mac
        let { accessKey, secretKey } = key
        var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        // 简单上传
        var options = {
          scope: "wy-music", // 篮子(bucket)名称
        };
        var putPolicy = new qiniu.rs.PutPolicy(options);
        var uploadToken = putPolicy.uploadToken(mac);
        // 返回 uoloadToken,admin.html设置访问获取
        response.write(`
        {
          "uptoken": "${uploadToken}"
        }
        `)
        response.end()
      }

   6. 将 uploadToken 作为响应输出

   7. node server.js 8888，启动 server

4. 管理员页面admin.html,参考七牛的示例，使用 Qiniu.uploader 来上传文件

   1. 引入 moxie 1.x
   2. 引入 plupload 2.x
   3. 引入 qiniu-js 1.x

      <script src="../venders/moxie.min.js"></script>
      <script src="../venders/plupload.min.js"></script>
      <script src="../node_modules/qiniu-js/dist/qiniu.min.js"></script>

5. 初始化上传按钮

   var uploader = Qiniu.uploader({
     disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送
     runtimes: 'html5', // 上传模式,依次退化
     browse_button: 'uploadBtn', // 上传选择的点选按钮，**必需**
     uptoken_url: 'http://localhost:8888/uptoken', 
     get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的 uptoken
     domain: 'https://p6az32xea.bkt.clouddn.com', // bucket 域名，下载资源时用到，如：'http:// xxx.bkt.clouddn.com/' **必需**
      max_file_size: '40mb', // 最大文件体积限制
      flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
      max_retries: 3, // 上传失败最大重试次数
      dragdrop: true, // 开启可拖曳上传
      drop_element: 'uploadContainer', // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
      chunk_size: '4mb', // 分块上传时，每块的体积
      auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
      init: {
        'FilesAdded': function(up, files) {
          plupload.each(files, function(file) {
            // 文件添加进队列后,处理相关的事情
          });
        },
        'BeforeUpload': function(up, file) {
          // 每个文件上传前,处理相关的事情
        },
        'UploadProgress': function(up, file) {
          // 每个文件上传时,处理相关的事情
          uploadStatus.innerText = '上传中……'
        },
        'FileUploaded': function(up, file, info) {
          // 每个文件上传成功后,处理相关的事情
          uploadStatus.innerText = '上传完毕'
          // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
          // {
          //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
          //    "key": "gogopher.jpg"
          //  }
          // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
          // var domain = up.getOption('domain');
          // var res = parseJSON(info.response);
          // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
        },
        'Error': function(up, err, errTip) {
          //上传出错时,处理相关的事情
        },
        'UploadComplete': function() {
          //队列文件处理完毕后,处理相关的事情
        }
      }
    });

本文所使用的依赖：
moxie 版本号：1.5.6
plupload 版本号：2.3.6