2018-02-28 云音乐2

做管理页面(admin页面)
先看下七牛上上传的MP3的外链

image.png

URL规定了不能用中文

image.png

我们试着用前缀+key来试试

image.png

MP3出现了

image.png

用encode把中文转换下

image.png

要把七牛的默认外链域名填到这里

image.png

获取的是中文，要转成URL

image.png

这样就出来了

image.png

这里不能用encodeURI，因为
如果这个域名不是个网址，而是网址的一部分

image.png

image.png

image.png

var sourceLink = 'http://'+domain +'/'+ encodeURIComponent(response.key); //获取上传成功后的文件的Url
uploadStatus.textContent=sourceLink+' '+ response.key
上传成功了，把外链+文件名显示出来

image.png

接下来CSS布局

image.png

买书《写给大家的设计书》

问题：点击第二行文字上传无效

image.png

image.png

xxx就是点击区域，提升一下

需求：光标在上传区域显示不对，要变成手形

xxx{

cursor: pointer;

}

样式好了，写js
用MVC思想
左边的“新建歌曲”点击之后，应该显示新建歌曲页面
点击左边的“歌曲”，右边显示对应的歌曲信息
把右边做成一个MVC

左上角的新建歌曲也做个MVC
下面的是歌列表的MVC

因为在原来songList外面加了一层div（为了MVC）

image.png

所以影响了CSS（上传区域又跑到紧挨着songList了），这里要把flex-grow提升到div那一层

image.png

接下来上传区域的MVC
做个例外，不给upload-song.js的view里的template

问题：一个MVC的数据怎么通知另外一个MVC

方法一：用命名空间
在主页面admin.html里引入app.js
里面写window.app={}
让每一个模块里的部分需要的东西暴露给app
比如song-form.js模块里，写一个句 window.app.songForm=controller（把song-form.js模块里的controller暴露给了app）
比如new-song.js模块里，写一个句 window.app.newSong=controller（把new-song.js模块里的controller暴露给了app）
谁需要另外一个模块的东西，直接在代码里加window.app.xxx.xxx
其弊端：模块之间耦合了

方法二：用发布订阅模式，用来解耦合
再写一个模块事件中心

image.png

让upload-song.js来发布

image.png

new-song.js和song-form.js来订阅

image.png

image.png

image.png

es6语法
如果data为空或者为undefined，则默认执行data等于空对象

image.png

有数据更新（upload有更新）了，就通知下song-form.js更新数据

用了3个编程思想：模块化、MVC、eventHub发布订阅思想

接下来保存功能的实现

设计模式就是套路
把上传的音乐按照name singer url的形式保存下来

image.png

把得到的数据保存下来，copy代码

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

上传文件，然后右边显示，然后点击保存，然后右边清空，左边新增歌曲

image.png

image.png

用JSON字符串的形式显示出来，因为如果直接显示，浏览器是异步的，push之前的显示出来的是最新的（push之后的）

问题：新增加的歌曲会把以前保存的给覆盖掉，

image.png

第1次歌曲是1，第2次歌曲是2，但是在2保存的那一刻，1被改变成2了

image.png

在song-form里改动了data

改过来

image.png

内存地址问题