給定json資料，將資料與頁面結構進行繫結

yangyycy發表於2020-12-27
JSON

一、json資料

var musics = [
    {
        ablum: "海闊天空",
        artist: "Beyond",
        id: 1,
        name: "大地",
        path: "musics/1592373302464.mp3",
        size: 4147913,
        style: "搖滾",
        uptime: 1592373302000
    },
    {
        ablum: "xxx",
        artist: "GALA ",
        id: 2,
        name: "追夢赤子心",
        path: "musics/1592373330188.mp3",
        size: 8357216,
        style: "搖滾",
        uptime: 1592373330000
    },
    {
        ablum: "123",
        artist: "筷子兄弟",
        id: 3,
        name: "父親",
        path: "musics/1592373363687.mp3",
        size: 12050851,
        style: "懷舊",
        uptime: 1592373363000
    },
    {
        ablum: "xxx",
        artist: "Bruno Mars ",
        id: 4,
        name: "Just The Way You Are",
        path: "musics/1592383891287.mp3",
        size: 3602925,
        style: "搖滾",
        uptime: 1592383891000
    },
    {
        ablum: "xxx",
        artist: "Jason Chen",
        id: 5,
        name: "童話",
        path: "musics/1592383916578.mp3",
        size: 4143707,
        style: "流行",
        uptime: 1592383916000
    },
    {
        ablum: "",
        artist: "",
        id: 6,
        name: "GranVals",
        path: "musics/1592383934192.mp3",
        size: 2360862,
        style: "輕音樂",
        uptime: 1592383934000
    },
    {
        ablum: "",
        artist: "Jason Chen ",
        id: 7,
        name: "See You Again",
        path: "musics/1592383950425.mp3",
        size: 2547494,
        style: "流行",
        uptime: 1592383950000
    },
    {
        ablum: "",
        artist: "Jason Chen ",
        id: 8,
        name: "We Are Young",
        path: "musics/1592383973219.mp3",
        size: 4100784,
        style: "流行",
        uptime: 1592383973000
    },
    {
        ablum: "xxx",
        artist: "愛朵女孩 ",
        id: 9,
        name: "純真年代",
        path: "musics/1592384018043.mp3",
        size: 3938242,
        style: "流行",
        uptime: 1592384018000
    },
    {
        ablum: "xxx",
        artist: "蔡旻佑",
        id: 10,
        name: "我可以",
        path: "musics/1592384080062.mp3",
        size: 4278273,
        style: "流行",
        uptime: 1592384080000
    },
    {
        ablum: "xxx",
        artist: "sdefsdf",
        id: 11,
        name: "不愛我就別傷害我",
        path: "musics/1592384107425.mp3",
        size: 3607533,
        style: "流行",
        uptime: 1592384107000
    },
    {
        ablum: "xxx",
        artist: "sdefsdf",
        id: 12,
        name: "大田後生仔",
        path: "musics/1592384126362.mp3",
        size: 7281893,
        style: "流行",
        uptime: 1592384126000
    },
    {
        ablum: "xxx",
        artist: "梅豔芳 ",
        id: 13,
        name: "親密愛人",
        path: "musics/1592384158997.mp3",
        size: 4782397,
        style: "流行",
        uptime: 1592384159000
    },
    {
        ablum: "",
        artist: "張棟樑 ",
        id: 14,
        name: "當你孤單你會想起誰",
        path: "musics/1592386012188.mp3",
        size: 10247320,
        style: "流行",
        uptime: 1592386012000
    },
    {
        ablum: "",
        artist: "",
        id: 15,
        name: "Various Artists - 魅惑鋼琴",
        path: "musics/1592386023486.mp3",
        size: 608923,
        style: "流行",
        uptime: 1592386023000
    },
    {
        ablum: "xxx",
        artist: "GAI",
        id: 16,
        name: "滄海一聲笑",
        path: "musics/1599124582333.mp3",
        size: 3851520,
        style: "搖滾",
        uptime: 1599124582000
    },
    {
        ablum: "...",
        artist: "..",
        id: 17,
        name: "鎖在輪迴",
        path: "musics/1599124596128.mp3",
        size: 2664190,
        style: "流行",
        uptime: 1599124596000
    },
    {
        ablum: "紅色回憶",
        artist: "韓寶儀",
        id: 20,
        name: "韓寶儀 - 粉紅色的回憶",
        path: "musics/1604671864315.mp3",
        size: 3664387,
        style: "流行",
        uptime: 1604671864000
    }
]

二、歌曲列表需要操作的部分

<div class="list">
            <table>
                <!-- 列表頭 -->
                <thead>
                    <tr class="tb-head">
                      <th class="tb-space"></th>
                        <th>歌曲</th>
                        <th>演唱者</th>
                        <th>專輯</th>
                        <th>大小</th>
                        <th>上傳時間</th>
                        <th class="tb-space"></th>
                    </tr>
                </thead>
                <!-- 列表項 -->
                <tbody>
                <!--寫好的靜態頁面：模板-->
                <tr class="music-item">
                    <td class="tb-space"></td>
                    <td><a href="">像我這樣的人</a></td>
                    <td><a href="">毛不易</a></td>
                    <td><a href="">巨星不易工作室 No.1</a></td>
                    <td>3.5MB</td>
                    <td class="tb-space"></td>
                </tr>

                </tbody>

                <tfoot>
                <!--//動態操作表格時建議加上-->
                </tfoot>

            </table>
        </div>

三、核心js指令碼

//設定語言環境
moment.locale('zh-cn');
//將資料與頁面結構進行繫結（資料繫結）
var html = '';
//對存有資料的js檔案中的物件進行遍歷
musics.forEach((item, index) => {
    //批量生成模板
    html += `<tr class="music-item" data-index="${index}">
                    <td class="tb-space"></td>
<!--//超連結失效:href="javascript：;"-->
                    <td><a href="javascript：;">${item.name}</a></td>
                    <td><a href="javascript：;">${item.artist}</a></td>
                    <td><a href="javascript：;">${item.ablum}</a></td>
                    <td>${(item.size / 1024 / 1024).toFixed(1)}MB</td>
                    <td>${moment(item.uptime).fromNow()}</td>
                    <td class="tb-space"></td>
                </tr>`;

})
//.list>table>tbody:父子選擇器宣告插入的位置
document.querySelector(".list>table>tbody").innerHTML = html;
//建立一個播放器物件
let player = document.createElement('audio');
//獲取所有歌曲列表項(即所有<tr>)
//類選擇器
var items = document.querySelectorAll('.music-item');
//這種寫法能相容各種瀏覽器
for (var i = 0; i < items.length; i++) {
    //items[i]:代表第i個<tr>
    items[i].addEventListener('click', function () {
        //this:代表第i個<tr>
        // dataset：資料集
        var index = this.dataset.index;
        // alert('即將播放' + index);

        //獲取歌曲的播放路徑：伺服器路徑+圖片路徑
        var path = "http://www.softeem.top:8080/music/" + musics[index].path;
        //為播放器設定播放路徑
        player.src = path;
        //播放
        player.play();
    })
}

四、引入檔案

<!--引用資料-->
<script src="js/musics.js"></script>
<!--引用對時間格式化處理的js指令碼-->
<script src="js/moment.js"></script>
<script src="js/moment-with-locales.js"></script>
<!--引入核心js指令碼-->
<script src="js/index.js"></script>

五、結果
在這裡插入圖片描述

相關文章