使用ajax获取电影接口渲染到页面```js 豆瓣电影热度top10 {{each movieArray}} 排行: {

<!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>
    <!-- axios -->
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
    <!-- art-template -->
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

    <style>
      a {
        text-decoration: none;
      }
      h2 {
        font-weight: normal;
      }
      h2 .rank,
      h2 a {
        font-weight: bold;
      }
      .score {
        font-weight: bold;
        color: red;
      }
      .person-number {
        font-style: italic;
        font-weight: bold;
      }
      p {
        margin-bottom: 50px;
      }
      div.container {
        width: 1000px;
        margin: 50px auto;
      }
      .actor {
        font-style: italic;
        color: blue;
      }
      .show-date {
        font-weight: bold;
        color: orangered;
      }
    </style>
  </head>
  <body>
    <div class="container" id="douban-movie">
      <h1>豆瓣电影热度top10</h1>

      {{each movieArray}}
      <h2>
        <span class="rank">排行: {{$value.info.rank}}</span>
        <a href="{{$value.info.url}}">{{$value.title}}</a> 评分:
        <span class="score">{{$value.info.pingfen}}</span>(<span
          class="person-number"
          >{{$value.info.markCount}}</span
        >人评价)
      </h2>
      <div>
        <img src="{{$value.info.imgurl}}" alt="" />
      </div>
      <h3>上映时间: <span class="show-date">{{$value.info.showTime}}</span></h3>
      <p>
        <b>演员:</b>
        <span class="actor">{{$value.info.actors}}</span>
      </p>
      {{/esch}}
    </div>
  </body>
  <script>
    // 接口地址: http://129.226.179.254/douban/index.php
    // 先定义一个接口地址
    const url = `http://129.226.179.254/douban/index.php`;
    // 走axios获取数据
    axios
      .get(url, {
        params: { format: "json" },
      })
      .then(function (response) {
        // 获取到了电影数组
        let movieArray = response.data.data;
        // 完善一下电影数组数据
        movieArray.forEach((element, index) => {
          console.log(element);
          // 定义上映时间
          const showTimeArray = [];
          // 定义演员信息
          const actorArray = [];
          //   定义评价人数
          const markCount = element.info.pingjia.slice(1, -4);
          //   把评价人数，加到电影信息里面去
          element.info.markCount = markCount;
          //   把原来的演员信息，拆成数组，遍历，进行分组
          const yanyuanArray = element.info.yanyuan.split(" / ");
          //  遍历数组
          yanyuanArray.forEach((el) => {
            // 判断是不是上映日期
            if (el.search(/\d{4}-\d{2}/) !== -1) {
              showTimeArray.push(el);
            } else {
              actorArray.push(el);
            }
          });
          //   把上映日期加到 电影信里面去
          element.info.showTime = showTimeArray.join(" / ");
          // 把演员信息加到电影信里面去
          element.info.actors = actorArray.join(" / ");
          //   把排行信息加到电影信息里面去
          element.info.rank = String(index + 1).padStart(3, "0");
        });
        // 渲染到页面,使用模板引擎填数据
        const tempString = template("douban-movie", { movieArray });
        // 找对象，把数据渲染到页面里面去
        document.querySelector("div.container").innerHTML = tempString;
      })

      .catch(function (error) {
        console.log(error);
      });
  </script>
</html>