云音乐需求分析
利用LeanCloud用来存取数据
利用七牛云存储保存静态文件(图片、mp3、视频、js文件、css文件)

需求分析

用例图use-cases

用户能够：

查看首页
歌曲列表页
- 评论
播放页
- 播放
- 暂停
- 歌词
搜歌
- 按歌名搜
- 按歌手搜
后台能够：
- 登录
- 注册
- 忘记密码
- 上传歌曲
- 拖拽上传
- 编辑歌曲
- 删除

线框图Sketch

xiaopiu:网易云音乐原型图

架构图

LeanCloud的使用

LeanCloud只能用来存数据/字符串，无法存文件(比如mp3、视频等)
ACL(Access Control Layer)访问控制层：控制可读/可写
SDK(api套件)：给你一堆api

用LeanCloud创建数据库

登录LeanCloud

创建应用(等同于创建了个数据库)
点开，选择创建Class,User用来存管理员信息，Song用来存歌曲信息，Playlist用来存歌单信息

使用 npm 的包管理工具安装 SDK

 # 存储服务（包括推送和统计）
$ npm install leancloud-storage --save
等同于
$ npm i leancloud-storage -S

Git Bash创建本地仓库

git --version：查看git Bash 版本号
ll -a:罗列当前目录下的文件，包括隐藏的
tree:展开当前目录下所有文件
cd ..:返回上一级目录

新建一个目录，mkdir src文件夹放初始源码，mkdir dist文件夹用来放编译之后的代码

在当前目录下打开命令行，输入npm init -y:模块初始化
忽略node_modules文件夹，touch .gitignore新建忽略文件 –>
vi .gitignore用vi打开 –> /node_modules填入要忽略的文件,这样这个文件夹就不会上传到github
退出vim: esc + : + w + q
git init：初始化本地仓库
git status -sb,这个 ?? 表示 git 一脸懵逼，不知道你要怎么对待这些变动。另外，可以看到没有node_modules,说明成功ignore了
git add:你可以一个一个地add git add index.html,git add css/style.css，也可以add整个目录git add .
git commit -m:你可以一个一个地 commit,git commit index.html -m '添加index.html',git commit css/style.css -m "添加 css/style.css",你也可以一次性 commit git commit . -m "添加了几个文件"
- git commit -v提交时显示所有diff信息
在src下新建index.html,开始写代码

初始化LeanCloud并验证

初始化

var APP_ID = 'uTQBfXRvG7xxxxxxxxxxx-gzGzoHsz';
var APP_KEY = 'xKkNrIrxxxxxxxxxxxxxxxfvNS';
AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

验证

测试代码：
//在数据库中创建Class，名为TestObject
var TestObject = AV.Object.extend('TestObject');
//获取名为TestObject的Class
var testObject = new TestObject();
testObject.save({
	//保存 words: 'Hello World!'到该Class中
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

存数据save

//在数据库中创建Class，名为Song
var Song = AV.Object.extend('Song');
//获取名为Song的Class
var song = new Song();
song.save({
  songName:'小幸运',
  singer:'田馥甄'
}).then(function(response) {
	console.log("response:",response)
  alert('上传成功!');
})

批量获取数据find

数据存储开发指南

选择开发指南中的对象 –> 批量操作
获取数据：

var query = new AV.Query('Song');//对应数据库中的Class名称
query.find().then(function(datas) {
    console.log(datas);//获取全部数据
    datas.forEach(function(value) {
    	console.log(value); //遍历数据
    });
});

更新数据

打开文档 –> 对象 –> 更新对象

// 第一个参数是 className，第二个参数是 objectId
var todo = AV.Object.createWithoutData('Todo', '5745557f71cfe40068c6abe0');
// 修改属性
todo.set('content', '每周工程师会议，本周改为周三下午3点半。');
// 保存到云端
todo.save();

通过id获取某个数据

var query = new AV.Query('Todo');
  query.get('57328ca079bc44005c2472d0').then(function (todo) {
    // 成功获得实例
    // todo 就是 id 为 57328ca079bc44005c2472d0 的 Todo 对象实例
  }, function (error) {
    // 异常处理
  });

用七牛云存储存文件

利用七牛云存储保存静态文件(图片、mp3、视频、js文件、css文件)

创建存储空间：打开七牛 –> 管理控制台 –> 对象存储 –> 新建存储空间 –> 存储空间名称:cloud_music –> 如果超过免费访问量时，就将访问控制改成“私有空间” –> 确定创建

点击SDK（软件开发套件）&工具 –> javascript SDK

用catbox存储文件

用catbox存储文件

利用form表单的post实现跨域
form的traget=xxx指向页面中的iframe[name=xxx]，从而实现页面不跳转

🔒 JQuery版云音乐