js获取html中div里的标签id_网易云音乐（中）搭建后台管理端（admin页面）

上文中我们已经引入了七牛和LeadCloud数据库，下面来做整个后台页面。

1.基本的页面的html，css布局，js

<div class="page">
        <aside>
            <div class="newSong">
            </div>
            <div id="songList-container">
            </div>
            <div class="uploadArea">
                <div id="uploadContainer" class="draggable">
                    <div id="uploadButton" class="clickable">
                        <p>点击或拖曳文件上传</p>
                        <p>文件不得大于100M</p>
                    </div>
                </div>
            </div>
        </aside>
        <main>
        </main>
    </div>

模块化、MVC封装

• 事件中心——eventHub.js
• 新建歌曲——newSong.js
• 歌曲列表——songList.js
• 上传歌曲——uploadSong.js
• 歌曲编辑表单——songForm
• LeadCloud——av.js

示例：

// newSong.js
{
    let view = {
        el:'.page .newSong',
        template:`
        <h1>新建歌曲</h1>
        `,
        render(data){
            $(this.el).html(this.template)
        }
    }
    let model = {}
    let controller = {
        init(view,model){
            this.view = view
            this.model = model
            this.view.render(this.model.data)
        }
    }
    controller.init(view,model)
}

2.初始化七牛时获取外链

设置domain为七牛存储空间的默认域名，然后获取文件url，并将其url和name发布到eventHub

//uploadSong.js  

3.将上传文件的url、name等数据渲染到页面

//songForm.js

4. 用model操纵数据库（创建、更新）

初始化av，在admin.html引入av.js

//av.js

上文已经提到过了，在LeanCloud我们有了一个Song的class。

监听表单form提交事件

model创建或更新并发布到eventHub

//songForm.js

model的创建保存及更新方法，可以在 LeadCloud文档——对象——保存&更新对象 找到

数据存储开发指南 · JavaScript​leancloud.cn

5.在songList页面循环创建<li>

通过eventHub将获取的data同步生成songList页面的li元素，类似Vue <li v-for>的语法。（加入selectSongId解决了创建后选中li更新后保存，选中li active丢失的bug。）

//songList.js

6.刷新后获取所有数据

//songListjs

7.点击<li>显示其编辑表单

监听点击事件

//songList.js

同时，songForm.js需订阅事件，更新数据

//controller部分

8.上传中加loading

//upload-song.js

//loading.js