2018-02-26 云音乐

做手机端
首页
有顶部栏


image.png

有tab栏


image.png

有推荐歌单


image.png

有最新音乐


image.png

下载APP


image.png

点进歌单后就会进入歌单,点击歌单也是放一首歌

点击单曲后放一首歌

需求分析
用例图


image.png

问题:歌从哪里来
歌曲上传不是普通用户做的,是管理员做的

管理员用例图


image.png

管理员线框图草图


image.png

用户如果做了重置密码之后


image.png

上传歌曲界面
后台是在PC上做


image.png

leancloud有一个缺陷,不能存文件,所以用七牛
普通数据存到leancloud

架构图


image.png

前端与后端进行交互

leancloud API读leancloud数据库,leancloud数据库存储七牛的URL


image.png

leancloud环境搭建
创建应用


image.png
image.png

创建歌曲列表和歌单列表
也可以用代码去创建
用 User 放管理员用户
Song放所有歌曲
Playlist存所有的歌单
用代码来创建,找到帮助文档,


image.png
image.png

工具安装

先弄一个项目目录,里面弄一个npm init ,命令下发后,文件里会有一个package.json


image.png

安装存储服务


image.png

image.png

image.png

管理页面 admin.html
找到leancloud的存储库


image.png

admin.html里引入这个这个库
引入之后应该有AV对象了
初始化AV对象
image.png

开http服务,看下结果


image.png

要验证下


image.png

image.png

代码测试
image.png

image.png

成功了


image.png

根据上面的例子来用代码来创建列表


image.png

image.png

image.png

ACL的意思是access control layer

支持数组


image.png

简单数据库创建完了
下一步使用七牛保存mp3文件


image.png

image.png

查看帮助文档


image.png

image.png

通过npm来引入
npm install qiniu-js


image.png

要用到老版本1.0.22,去package.json里改版本
重新npm install下
这样七牛的结构就变了

image.png

console.log(Qiniu)就有打印信息。而不是小写的qiniu
引入plupload
image.png

之后再npm install
在script中引入
image.png

赋值1.x的示例代码
https://github.com/qiniu/js-sdk/tree/1.x
上传模式只要html5
image.png

button相关
必须要有uptoken
由于uptoken要在后台,所以不用这种方式
自己手动上传音乐,然后把外链放到audio标签里
image.png

image.png

本地server方案
我们没有买服务器,可以自己弄个代理,写个node-server,让其产生uptoken


image.png

不想上传到github上,则就用ignore来忽略


image.png

前面加/是表示只看根目录的

image.png

然后继续copy代码


image.png

开启node server


image.png

在admin里改代码
image.png

还需要moxie.js
从github上下一个moxie.min.js的代码
https://github.com/moxiecode/moxie/releases
找到之后在admin中引用它
报了一个错误

image.png

image.png

无害的
直接在admin里可以上传文件了
image.png

image.png

如果去掉key,那么上传后就会是默认文件名
image.png

如果上传的文件重复了呢?会被覆盖掉
接下里做拖拽上传
支持拖拽上传,直接放到upload那里就可以上传
对upload加点css


image.png

上传完毕和上传中加文字提示


image.png

image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,046评论 25 707
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,582评论 1 180
  • 以為手機里存儲的照片都寫過了,“壯壯的故事”徹底結尾。晚上驚現微信朋友圈里還有壯壯的照片,豈能錯過! 過年嘍!壯壯...
    生活是奮進的詩篇阅读 203评论 0 0
  • 在python中,单独的一个py文件可以作为一个模块,把功能有些联系的模块放在一起,组成一个文件夹,再加上__in...
    LittlePy阅读 2,006评论 0 0
  • 上周末是今年到明年中旬最后一个假期,终于能够给自己空间,放下手中的工作,尽情嗨。周六起床快走半小时,中午吃了一碗米...
    得玲阅读 114评论 0 0