一、豆瓣获取数据

5CYCJOR%2VQB{R~A}YGJO53.png

HTML

  1. <div class="center">
  2.         <div class="left">
  4.         </div>
  5.         <div class="right">
  7.         </div>
  8.     </div>

script

  1.     <script>
  2.         var url_list = "http://192.168.4.18:8000/"
  3.         ajax({
  4.             url: url_list,
  5.             method: "get",
  6.             success: res => {
  7.                 var arr = [];
  8.                 arr.push(...res.result)
  9.                 arr.forEach((item, index) => {
  10.                     var html = `
  11.                     <div class="item">
  12.                         <span class="num">${index + 1}</span>
  13.                         <img src=${item.pic} alt="">
  14.                         <div class="p">
  15.                            <a href="#" class="title">${item.title}</a>
  16.                            <p class="raiting">${item.raiting}</p>
  17.                            <p class="slogo">${item.slogo}</p>
  18.                            <p class="evaluate">${item.evaluate}</p>
  19.                            <p class="labels">${item.labels}</p>
  20.                         </div>
  21.                     </div>
  22.                     `
  23.                     $(".left").append(html)
  24.                 })
  25.             }
  26.         })
  27.     </script>
  29.     <script>
  30.         var url = "http://192.168.4.18:8000/ad"
  31.         ajax({
  32.             url: url,
  33.             method: "get",
  34.             success: res => {
  35.                 var obj = res.result
  36.                 for(let i in obj){
  37.                     var {title,poster,erweima,logo,labels}=obj;
  38.                 }
  39.                 var ad=labels.join("")
  40.                 var htmls= `
  41.                     <div class="items">
  42.                            <p class="titles">${title}</p>
  43.                            <img src=${poster} class="poster">
  44.                            <div class="footer">
  45.                                 <div class="div">
  46.                                   <img src=${erweima} class="erweima">
  47.                                 </div>
  48.                                 <div class="div">
  49.                                   <img src=${logo} class="logo">
  50.                                 </div>
  51.                                 <div class="divs">
  52.                                   <p class="ad">${ad.substring(0,2)}</p>
  53.                                   <p class="ads">${ad.substring(2)}</p>
  54.                                 </div>
  55.                         </div>
  56.                     </div>
  57.                     `
  58.                 $(".right").append(htmls)
  59.             }
  60.         })
  61.     </script>

js

  1. function ajax({
  2.     method,
  3.     url,
  4.     success
  5. }) {
  6.     var xhr = new XMLHttpRequest()
  7.     xhr.open(method, url, true)
  8.     xhr.send()
  9.     xhr.onreadystatechange = function () {
  10.         if (xhr.status == 200 && xhr.readyState == 4) {
  11.             var res = JSON.parse(xhr.responseText)
  12.             success(res)
  13.         }
  14.     }
  15. }

css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .center{
  6.     margin-top: 50px;
  7.     width: 1000px;
  8.     margin-left: auto;
  9.     margin-right: auto;
  10.     display: flex;
  11. }
  12. .left{
  13.     flex:5;
  14. }
  15. .item{
  16.     display: flex;
  17.     border-top: 1px dashed #ccc;
  18.     padding: 20px;
  19. }
  20. .item img{
  21.     margin-left: 10px;
  22.     height: 180px;
  23. }
  24. .p{
  25.     margin-left: 10px;
  26. }
  27. .title{
  28.     font-size: 18px;
  29.     color: rgb(36, 81, 139);
  30.     text-decoration: none;
  31. }
  32. .title:hover{
  33.     background-color: rgb(36, 81, 139);
  34.     color: white;
  35. }
  36. .right{
  37.     margin-left: 20px;
  38.     flex: 2;
  40. }
  41. .titles{
  42.     font-size: 14px;
  43.     color: darkgray;
  44. }
  45. .poster{
  46.     width: 100%;
  47.     margin-top: 10px;
  48. }
  49. .footer{
  51.     height: 100px;
  52.     margin-top: 10px;
  53.     position: relative;
  54.     display: grid;
  55.     grid-template-columns: 100px 90px auto;
  56.     grid-template-rows: 100px;
  57.     justify-items: center;
  58.     align-items: center;
  59.     background-color: rgb(243, 243, 243);
  60. }
  61. .divs{
  62.     justify-self: start;
  63. }
  64. .erweima{
  65.     height: 90px;
  66. }
  67. .logo{
  69.     height: 100px;
  70. }
  72. .ads{
  73.     padding-top: 5px;
  74.     font-size: 13px;
  75. }
  76. .ad{
  77.     font-size: 20px;
  78. }