如何基于JSON数据为每个对象生成独立页面（JavaScript实现）

嘿，我看到你已经搞定了学生列表的展示，现在要做单个学生的详情页面对吧？作为JS新手，这一步其实没你想的那么难，咱们一步步来：

第一步：给列表里的学生添加跳转链接 #

首先得让用户能从列表页点进详情页，修改你现有的getStudent函数，给每个学生信息加上指向详情页的链接：

function getStudent() {
  fetch('https://myjesondatas123211.herokuapp.com/v/students')
    .then((res) => res.json())
    .then((data) => {
      let output = '<h2>Students</h2>'
      data.forEach(function (student) {
        // 添加跳转链接，指向对应学生的详情页
        output += `
          <div class="col-md-4">
            <a href="/student/${student.code}">
              <h4>${student.name}</h4>
            </a>
            <p>${student.id}</p>
            <p>${student.code}</p>
          </div>
        `;
      });
      document.getElementById('output').innerHTML = output;
    })
};

第二步：处理详情页的路由与渲染 #

接下来要实现当用户访问/student/ZO这类地址时，渲染对应的学生信息。咱们需要完成这几件事：

1. 解析URL里的code参数
2. 根据code匹配对应的学生数据
3. 渲染详情页面内容

先写一个获取单个学生的函数，再添加路由监听逻辑：

// 根据code获取并渲染单个学生信息
function getStudentByCode(code) {
  fetch('https://myjesondatas123211.herokuapp.com/v/students')
    .then((res) => res.json())
    .then((data) => {
      // 从数据中筛选出对应code的学生
      const student = data.find(s => s.code === code);
      if (student) {
        // 渲染详情内容
        let output = `
          <h2>${student.name}的详情</h2>
          <div class="student-detail">
            <p>ID: ${student.id}</p>
            <p>Code: ${student.code}</p>
            <a href="/">回到学生列表</a>
          </div>
        `;
        document.getElementById('output').innerHTML = output;
      } else {
        // 未找到学生时显示提示
        document.getElementById('output').innerHTML = '<h2>学生不存在</h2><a href="/">回到列表</a>';
      }
    })
};

// 检查当前URL，判断显示列表还是详情页
function checkRoute() {
  const path = window.location.pathname;
  // 匹配/student/xxx格式的路径
  const studentRouteMatch = path.match(/^\/student\/([A-Z]+)$/);
  if (studentRouteMatch) {
    // 提取路径中的code参数
    const code = studentRouteMatch[1];
    getStudentByCode(code);
  } else {
    // 非详情页则显示学生列表
    getStudent();
  }
};

// 页面加载时检查路由
window.addEventListener('load', checkRoute);
// 监听浏览器前进后退事件，动态更新页面
window.addEventListener('popstate', checkRoute);

新手友好小提示 #

• 如果你不想每次打开详情页都重新请求整个学生列表，可以把获取到的学生数据存在全局变量里，详情页直接从全局变量查找，能减少网络请求、提升加载速度。
• 如果你用静态服务器（比如live-server）测试，可能需要配置让所有路由都指向你的index.html，否则刷新详情页会出现404错误。

内容的提问来源于stack exchange，提问作者batman