前后端关系

1.前后端关系

2.静态页面

3.下面这个url请求就是接口了

4.将前后端结合起来

5.前端通过能够发起HTTP请求的工具，向后端发起请求

　　比如：axios

6..前后端交互拓扑

7.数据渲染

8.通过javascript实现动态数据

<!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>
  </head>
  <body>
    <!--第二步-->
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
          </tr>
        </thead>
        <tbody id="demo"></tbody>
      </table>
    </div>
    <script>
      //发起ajax请求，获得到数据
      let data = [
        { ID: 1, name: "zhangsan1", age: 17, sex: "男" },
        { ID: 2, name: "zhangsan2", age: 18, sex: "男" },
        { ID: 3, name: "zhangsan3", age: 19, sex: "男" },
        { ID: 4, name: "zhangsan4", age: 20, sex: "男" },
        { ID: 5, name: "zhangsan4", age: 20, sex: "男" },

        { ID: 6, name: "zhangsan4", age: 20, sex: "男" },
        { ID: 7, name: "zhangsan4", age: 20, sex: "男" },
        { ID: 8, name: "zhangsan4", age: 20, sex: "男" },
        { ID: 9, name: "zhangsan4", age: 20, sex: "男" },
      ];
      var tbody = document.getElementById("demo");
      for (var i = 0; i < data.length; i++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        for (var k in data[i]) {
          var td = document.createElement("td");
          td.innerHTML = data[i][k];

          tr.appendChild(td);
        }
      }
    </script>
  </body>

  <style>
    th,
    tr,
    td {
      color: blue;
      font: optional;
      margin-left: 50px;
      margin-right: 30px;
      padding: 10px;
    }
  </style>
</html>