Express.js如何携带新数据跳转新页面？点击用户名跳转个人页实现问题问询

方案合理性评估 #

首先你提到的用HTTP Session存用户资料的方案不是最优实现，存在几个明显弊端：

• Session是服务端存储的用户全局状态，若同一用户同时打开多个页签查看不同用户的资料，后存入的Session会覆盖之前的，导致前面的页签展示错误数据
• 会额外占用服务端存储资源，用户量上来后服务端压力会明显上升
• 不符合RESTful接口的无状态设计规范，后续架构扩展、接口复用都会有问题

推荐实现方案 #

根据你的应用类型选择对应方案即可：

• 多页应用（跳转后页面刷新）：跳转时将用户ID作为URL查询参数携带，个人资料页加载完成后，主动拿URL里的用户ID向后端发GET请求获取资料渲染即可，该方案还支持用户直接分享个人资料页链接
• 单页应用（跳转无页面刷新）：可以直接点击后请求用户资料，存到前端状态管理（比如Vuex/Pinia/Redux）里再跳路由，也可以沿用URL参数的方案，通用性更强

代码实现示例 #

首页点击跳转逻辑（完善你的loadProfile函数） #

function loadProfile(el) {
  // 获取点击条目对应的用户ID
  const userId = el.querySelector('#user-id').textContent.trim();
  // 跳转至个人资料页，携带用户ID参数，encodeURIComponent用于避免特殊字符乱码
  window.location.href = `/user/profile?userId=${encodeURIComponent(userId)}`;
}

个人资料页GET请求逻辑（原生fetch实现） #

// 页面加载完成后执行
window.addEventListener('load', async () => {
  // 从URL中提取用户ID参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetUserId = urlParams.get('userId');
  if(!targetUserId) {
    alert('无效的用户ID');
    window.location.href = '/';
    return;
  }

  try {
    // 发送GET请求，携带用户ID作为查询参数
    const res = await fetch(`/api/getUserProfile?userId=${encodeURIComponent(targetUserId)}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    if(!res.ok) throw new Error('请求异常');
    const userProfile = await res.json();
    // 此处将userProfile渲染到个人资料页对应节点即可
    console.log('用户资料：', userProfile);
  } catch (err) {
    console.error('获取用户资料失败：', err);
    alert('获取用户资料失败，请稍后重试');
  }
})

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