1.movie

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/movie.css">
  9.     <script src="lib/http.js"></script>
  10.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  11. </head>
  13. <body>
  14.     <div class="app">
  15.         <div class="left">
  17.         </div>
  18.         <div class="right">
  20.         </div>
  21.     </div>
  22.     <script>
  23.         /* 1.渲染列表 */
  24.         var listUrl = "http://192.168.4.18:8000/";
  25.         ajax({
  26.             url: listUrl,
  27.             method: "get",
  28.             success: res => {
  29.                 var arr = res.result;
  30.                 arr.forEach((item, index) => {
  31.                     var {pic,title,raiting,slogo,evaluate,labels} = item;
  32.                     var sum =labels.join("/")
  33.                     var htmlItem = `
  34.                     <div class="item">
  35.                         <span>${index+1}</span>
  36.                         <img src=${pic} alt="">
  37.                         <div>
  38.                             <p class="title">${title}</p>
  39.                             <p>${sum}</p>
  40.                             <p><span>评分:${raiting}</span> <span> ${evaluate}人评价</span></p>
  41.                             <p>${slogo}</p>
  42.                          </div>
  43.                    </div>
  44.                     `
  45.                     $(".left").append(htmlItem);
  46.                 })
  47.             }
  48.         })
  49.     </script>
  50. </body>
  52. </html>

1.PNG