对项目进行css布局

我们最终的项目大概想做成这样的.
https://modao.cc/app/7LMoFzAGQXX45EzSw39JEotoeyMrFzo

总体结构

根据图纸, 我们写css布局.
这是大概布局:

对应的html代码为:
(这是admin.html中的片段代码)

<div class="page">
    <!-- 左侧栏 -->
    <aside>
        <div class="newSong"></div> <!-- 新建歌曲 引入./js/new-song.js -->
        <div id="songList-container">
            <!-- 歌曲列表 引入./js/song-list.js-->
        </div>
        <!-- 上传歌曲 -->
        <div class="uploadArea">
            <div id="uploadContainer" class="draggable">
                <div id="uploadButton" class="clickable">
                    <p>点击或拖曳上传</p>
                    <p>文件大小不超过100MB</p>
                </div>
            </div>
            <div id="uploadStatus"></div>
        </div>
    </aside>
    <!-- 右侧主体 -->
    <main>
        <form action="" class="form">
            <!-- 歌曲表单 引入./js/song-form.js-->
        </form>
    </main>
</div>

对于各个部分的细节, 我们可以通过js来渲染. 以<div class="newSong"></div>来说, 这一节只有一个新建歌曲四个字. 我们在js/new-song.js中渲染它:

{
    let view = {
        el: '.newSong',
        template: `
        新建歌曲
        `,
        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)
            window.eventHub.on('upload', (data)=>{
                this.active()
            })
        },
        active(){
            $(this.view.el).addClass('active')
        }
    }
    controller.init(view, model)
}

然后在admin.html中引入即可:

<script src="./js/new-song.js"></script>

对于其他几个部分亦是如此.

<script src="./js/song-form.js"></script>
<script src="./js/song-list.js"></script>

现在的文件结构是这样的.

server.js
qiniu-key.json
src
    js
        new-song.js
        song-from.js
        song-list.js
        upload-song.js
    admin.html

布局

然后对其进行布局:

对应的css代码为, 将其存入css/default.css中:

/* layout */
.page {
    display: flex;
    height: 100vh;
}

.page > aside {
    width: 200px;
    display: flex;
    flex-direction: column;
}

.page > main {
    flex-grow: 1;
    padding: 40px;
}

在admin.html中引入:

<link rel="stylesheet" href="css/default.css">

现在的文件结构是这样的.

扫描二维码关注公众号，回复： 2665897 查看本文章

server.js
qiniu-key.json
src
    css
        default.css
    js
        new-song.js
        song-from.js
        song-list.js
        upload-song.js
    admin.html