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

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

image.png

image.png

image.png

image.png

image.png

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

image.png

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

image.png

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

image.png

然后继续copy代码

image.png

开启node server

image.png

image.png

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

image.png

image.png

image.png

image.png

image.png

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

image.png

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

image.png

image.png