新手求助：如何根据URL参数在Product.html展示对应相机详情

嘿，作为前端新手能完成列表页的渲染已经超棒啦！我来一步步帮你实现详情页的功能，很简单的，跟着来就行～

1. 先从URL里提取相机ID #

当你点击列表页的“Détails”按钮跳转到Product.html时，URL里已经带上了id参数，我们需要先把这个ID提取出来。用URLSearchParams就能轻松做到，不用手动去解析字符串：

// 获取当前页面URL的查询参数
const urlParams = new URLSearchParams(window.location.search);
const cameraId = urlParams.get('id');

// 先判断一下有没有获取到ID，防止用户直接访问详情页
if (!cameraId) {
  const container = document.getElementById('cameraDetails');
  container.innerHTML = '<p>请从相机列表页面进入详情页哦～</p>';
  // 没有ID的话后面代码就不执行了
  return;
}

// 可以打印看看ID是否正确，方便调试
console.log('当前要展示的相机ID：', cameraId);

2. 根据ID请求对应相机的详情数据 #

接下来就和你在列表页做的类似，用XMLHttpRequest请求API的详情接口（就是在列表接口后面加上ID），然后处理返回的数据：

const request = new XMLHttpRequest();

request.onreadystatechange = function () {
  if (this.readyState === XMLHttpRequest.DONE) {
    // 请求完成后判断状态码
    if (this.status === 200 || this.status === 201) {
      // 解析返回的单个相机数据（注意这里是单个对象，不是数组啦）
      const camera = JSON.parse(this.responseText);
      console.log('相机详情数据：', camera);
      // 调用渲染函数把数据展示到页面上
      renderCameraDetails(camera);
    } else {
      // 处理请求失败的情况，比如ID不存在返回404
      console.error('请求失败，状态码：', this.status);
      const container = document.getElementById('cameraDetails');
      container.innerHTML = '<p>抱歉，无法获取相机详情，请检查链接是否正确。</p>';
    }
  }
};

// 拼接带ID的请求地址
request.open('GET', `http://localhost:3000/api/cameras/${cameraId}`);
request.send();

3. 写渲染函数把数据展示到页面 #

首先你需要在Product.html里准备一个用来放详情的容器，比如：

<div id="cameraDetails"></div>

然后写一个renderCameraDetails函数，把相机数据填充到这个容器里，你可以根据API返回的字段调整展示内容，比如如果相机有镜头选项的话也可以加上：

function renderCameraDetails(camera) {
  const container = document.getElementById('cameraDetails');
  container.innerHTML = `
    <div class="card" style="max-width: 600px; margin: 2rem auto;">
      <img src="${camera.imageUrl}" class="card-img-top" alt="${camera.name}">
      <div class="card-body">
        <h1 class="card-title">${camera.name}</h1>
        <p class="card-text">${camera.description}</p>
        <p class="card-text fw-bold fs-4">${(camera.price / 100).toFixed(2)} EUR</p>
        <!-- 如果API返回了镜头选项，就渲染下拉框 -->
        ${camera.lenses ? `
          <div class="mb-3">
            <label class="form-label" for="lensSelect">选择镜头:</label>
            <select class="form-select" id="lensSelect">
              ${camera.lenses.map(lens => `<option value="${lens}">${lens}</option>`).join('')}
            </select>
          </div>
        ` : ''}
        <button class="btn btn-primary">加入购物车</button>
      </div>
    </div>
  `;
}

一些小提示让代码更健壮 #

• 记得把JS代码放在页面底部，或者用DOMContentLoaded包裹，确保页面元素加载完成后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    // 把上面所有的代码都放在这里面哦
  });
  

• 如果你想尝试更简洁的写法，可以用fetch API替代XMLHttpRequest，代码会更清爽，这里给你个拓展示例：

  document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const cameraId = urlParams.get('id');
  
    if (!cameraId) {
      document.getElementById('cameraDetails').innerHTML = '<p>请从相机列表页面进入详情页哦～</p>';
      return;
    }
  
    fetch(`http://localhost:3000/api/cameras/${cameraId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败');
        }
        return response.json();
      })
      .then(camera => {
        renderCameraDetails(camera);
      })
      .catch(error => {
        console.error(error);
        document.getElementById('cameraDetails').innerHTML = '<p>抱歉，无法获取相机详情，请检查链接是否正确。</p>';
      });
  });
  

这样就能完美实现详情页的功能啦，有问题随时问哦～

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