模拟后端数据在前端页面上展示电影信息,-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52291147/article/details/129844421

模拟后端传来的电影数据，将其渲染到前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            overflow: hidden;
        }
        li img{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <!-- <li>
            <img src="https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70" alt="">
            <h3>铃芽之旅</h3>
            <p>观众评分 7.6</p>
        </li> -->

    </ul>

    <script>
        // 此数据由后端提供
        var filmList = [
            {
                url:"https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70",
                title:"铃芽之旅",
                grade:7.6
            },
            {
                url:"https://pic.maizuo.com/usr/movie/34abe976a0baf62f0af6d9d41e7ef414.jpg?x-oss-process=image/quality,Q_70",
                title:"保你平安",
                grade:7.3
            },
            {
                url:"https://pic.maizuo.com/usr/movie/7b8c4891b9a8d1d599a158ab49f1708a.jpeg?x-oss-process=image/quality,Q_70",
                title:"忠犬八公",
                grade:8.0
            }
        ]

        var filmItems = filmList.map(function(item){
            return `<li>
            <img src="${item.url}" alt="">
            <h3>${item.title}</h3>
            <p>观众评分 ${item.grade}</p>
                   </li>`
        })
        // 数组转字符串
        console.log(filmItems.join(""))

        var oul = document.querySelector("ul")

        oul.innerHTML = filmItems.join("")
    </script>
</body>
</html>

效果呈现：

渲染页面案例