专综实例json文件数据引用

拥有冯·诺依曼的智慧

已于 2023-03-31 09:13:37 修改

阅读量303

点赞数

于 2023-03-31 09:10:19 首次发布

本文链接：https://blog.csdn.net/m0_62802836/article/details/129871440

版权

win+R ———>cmd————>监听

在引用前前启动json-server监听：

json-server --w students.json

students.json:

{
  "students": [
    {
      "id": 1,
      "name": "张三",
      "gender": "男",
      "birthday": "1999-05-23",
      "address": "北京市海淀区",
      "email": "zhangsan@example.com",
      "phone": "13333333333"
    },
    {
      "id": 2,
      "name": "李四",
      "gender": "女",
      "birthday": "1998-09-12",
      "address": "北京市朝阳区",
      "email": "lisi@example.com",
      "phone": "15555555555"
    },
    {
      "id": 3,
      "name": "王五",
      "gender": "男",
      "birthday": "2000-01-01",
      "address": "北京市东城区",
      "email": "wangwu@example.com",
      "phone": "17777777777"
    }
  ],
  "courses": [
    {
      "id": 1,
      "name": "计算机基础",
      "credit": 4
    },
    {
      "id": 2,
      "name": "高等数学",
      "credit": 5
    },
    {
      "id": 3,
      "name": "数据库系统",
      "credit": 3
    }
  ],
  "enrollments": [
    {
      "id": 2,
      "studentId": 1,
      "courseId": 2,
      "grade": "A"
    },
    {
      "id": 3,
      "studentId": 2,
      "courseId": 2,
      "grade": "C+"
    },
    {
      "studentId": 1,
      "courseId": 1,
      "grade": "A+",
      "id": 4
    },
    {
      "studentId": 2,
      "courseId": 3,
      "grade": "B",
      "id": 5
    }
  ]
}

监听：

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>选课数据展示</title>
  </head>
  <script src="./axios.js"></script>
  <body>
    <form style="display: flex" id="addEnrollmentForm">
      <label for="studentId">学生:</label>
      <input type="number" id="studentId" name="studentId" required />
      <label for="courseId">课程:</label>
      <input type="number" id="courseId" name="courseId" required />
      <label for="grade">成绩:</label>
      <select id="grade" name="grade" required>
        <option value="A+">A+</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <button type="submit" id="addEnrollments">新增</button>
    </form>
    <table id="enrollments">
      <thead>
        <tr>
          <th>报名ID</th>
          <th>学生ID</th>
          <th>学生姓名</th>
          <th>课程ID</th>
          <th>课程名称</th>
          <th>学分</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <script>
      const baseUrl = "http://localhost:3000/enrollments";
      // 使用js xmlhttprequest方法从json-server获取选课数据
      function getEnrollments() {
        const xhr = new XMLHttpRequest();
        const url = baseUrl + "?_expand=student&_expand=course"; // 要获取数据的URL
        xhr.open("GET", url);
        axios
          .get(url)
          .then((res) => {
            const jsonData = res.data; // 响应数据
            // const jsonData = JSON.parse(data);
            console.log(jsonData); // 打印响应数据
            const enrollmentsTable = document.getElementById("enrollments");
            enrollmentsTable.tBodies[0].innerHTML = "";
            var trs = "";
            jsonData.forEach((enrollment) => {
              // 从关联表中获取学生姓名和课程名称
              const studentId = enrollment.student.id;
              const studentName = enrollment.student.name;
              const courseId = enrollment.course.id;
              const courseName = enrollment.course.name;
              const courseCredit = enrollment.course.credit;
              // 创建一行表格，并将选课数据添加到其中
              const row = `<tr>
                                <td>${enrollment.id}</td>
                                <td>${studentId}</td>
                                <td>${studentName}</td>
                                <td>${courseId}</td>
                                <td>${courseName}</td>
                                <td>${courseCredit}</td>
                                <td>${enrollment.grade}</td>
                                <td><button class='delete' id = ${enrollment.id}>删除</button></td>
                            </tr>`;
              // 将这一行添加到表格中
              trs += row;
            });
            enrollmentsTable.tBodies[0].innerHTML = trs;
            handleOper();
          })
          .catch((err) => {
            console.error(err);
          });

        xhr.onload = function () {
          if (xhr.status === 200) {
            const data = xhr.response; // 响应数据
            const jsonData = JSON.parse(data);
            console.log(jsonData); // 打印响应数据
            const enrollmentsTable = document.getElementById("enrollments");
            enrollmentsTable.tBodies[0].innerHTML = "";
            var trs = "";
            jsonData.forEach((enrollment) => {
              // 从关联表中获取学生姓名和课程名称
              const studentId = enrollment.student.id;
              const studentName = enrollment.student.name;
              const courseId = enrollment.course.id;
              const courseName = enrollment.course.name;
              const courseCredit = enrollment.course.credit;
              // 创建一行表格，并将选课数据添加到其中
              const row = `<tr>
                                <td>${enrollment.id}</td>
                                <td>${studentId}</td>
                                <td>${studentName}</td>
                                <td>${courseId}</td>
                                <td>${courseName}</td>
                                <td>${courseCredit}</td>
                                <td>${enrollment.grade}</td>
                                <td><button class='delete' id = ${enrollment.id}>删除</button></td>
                            </tr>`;
              // 将这一行添加到表格中
              trs += row;
            });
            enrollmentsTable.tBodies[0].innerHTML = trs;
            handleOper();
          } else {
            console.log("Error:", xhr.statusText); // 打印错误信息
          }
        };
        xhr.send();
      }

      getEnrollments();

      function handleOper() {
        const delButtons = document.querySelectorAll(".delete");
        delButtons.forEach((one) => {
          one.addEventListener("click", function (e) {
            console.log(e.target);
            const id = e.target.getAttribute("id");
            const xhr = new XMLHttpRequest();
            xhr.open("delete", baseUrl + `/${id}`);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.onload = function () {
              if (xhr.status == 200) {
                console.log(xhr.responseText);
                getEnrollments();
              } else {
                console.log("post Error:", xhr.statusText); // 打印错误信息
              }
            };
            xhr.send();
          });
        });
      }

      // 增加按钮点击事件
      const addEnrollmentForm = document.getElementById("addEnrollmentForm");
      const enrollmentsTable = document.getElementById("enrollments");

      addEnrollmentForm.addEventListener("submit", (event) => {
        event.preventDefault();

        const studentId = document.getElementById("studentId").value;
        const courseId = document.getElementById("courseId").value;
        const grade = document.getElementById("grade").value;

        const xhr = new XMLHttpRequest();
        const url = baseUrl;

        xhr.open("POST", url);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onload = function () {
          if (xhr.status === 201) {
            console.log(xhr.responseText);
            // 重置表单
            addEnrollmentForm.reset();
            getEnrollments();
          }
        };

        xhr.send(
          JSON.stringify({
            studentId: parseInt(studentId),
            courseId: parseInt(courseId),
            grade: grade,
          })
        );
      });
    </script>
  </body>
</html>

实现效果：