做手机端
首页
有顶部栏
有tab栏
有推荐歌单
有最新音乐
下载APP
点进歌单后就会进入歌单,点击歌单也是放一首歌
点击单曲后放一首歌
需求分析
用例图
问题:歌从哪里来
歌曲上传不是普通用户做的,是管理员做的
管理员用例图
管理员线框图草图
用户如果做了重置密码之后
上传歌曲界面
后台是在PC上做
leancloud有一个缺陷,不能存文件,所以用七牛
普通数据存到leancloud
架构图
前端与后端进行交互
leancloud API读leancloud数据库,leancloud数据库存储七牛的URL
leancloud环境搭建
创建应用
创建歌曲列表和歌单列表
也可以用代码去创建
用 User 放管理员用户
Song放所有歌曲
Playlist存所有的歌单
用代码来创建,找到帮助文档,
工具安装
先弄一个项目目录,里面弄一个npm init ,命令下发后,文件里会有一个package.json
安装存储服务
管理页面 admin.html
找到leancloud的存储库
admin.html里引入这个这个库
引入之后应该有AV对象了
初始化AV对象
开http服务,看下结果
要验证下
代码测试
成功了
根据上面的例子来用代码来创建列表
ACL的意思是access control layer
支持数组
简单数据库创建完了
下一步使用七牛保存mp3文件
查看帮助文档
通过npm来引入
npm install qiniu-js
要用到老版本1.0.22,去package.json里改版本
重新npm install下
这样七牛的结构就变了
console.log(Qiniu)就有打印信息。而不是小写的qiniu
引入plupload
之后再npm install
在script中引入
赋值1.x的示例代码
https://github.com/qiniu/js-sdk/tree/1.x
上传模式只要html5
button相关
必须要有uptoken
由于uptoken要在后台,所以不用这种方式
自己手动上传音乐,然后把外链放到audio标签里
本地server方案
我们没有买服务器,可以自己弄个代理,写个node-server,让其产生uptoken
不想上传到github上,则就用ignore来忽略
前面加/是表示只看根目录的
然后继续copy代码
开启node server
在admin里改代码
还需要moxie.js
从github上下一个moxie.min.js的代码
https://github.com/moxiecode/moxie/releases
找到之后在admin中引用它
报了一个错误
无害的
直接在admin里可以上传文件了
如果去掉key,那么上传后就会是默认文件名
如果上传的文件重复了呢?会被覆盖掉
接下里做拖拽上传
支持拖拽上传,直接放到upload那里就可以上传
对upload加点css
上传完毕和上传中加文字提示