如何实现点击首页MySQL存储的帖子跳转至动态加载详情的新页面？

我现在做了一个网站，首页展示MySQL数据库test表的帖子列表，点击单个帖子想在singlePost.html显示详细内容，不需要为每个帖子单独建HTML文件。目前已经完成的步骤：

1. 从数据库渲染首页帖子：创建class为singlePost的div，把标题（title）和描述（description）加进去；
2. 给每个div加点击事件，点击时跳转到singlePost.html，但现在不知道怎么把当前帖子的内容传递到新页面。

附参考代码：
后端（node server.js）：

app.get('/showposts', (req,res) => {
 console.log('will shows all posts in database');
 connection.query(`select * from test`, (error, results) => {
 if (error) console.log(error);
 console.log('got data from database');
 res.send(results)
 } )
})

前端（main.js）：

document.addEventListener( 'DOMContentLoaded', () => {
 fetch('http://localhost:4000/showposts')
 .then(response => response.json())
 .then(data => {
 for (i in data) {
 singlePost = document.createElement('div');
 singlePost.className = 'singlePost';
 titleTextNode = document.createTextNode(data[i].title);
 descriptionTextNode = document.createTextNode(data[i].description);
 postHeading = document.createElement('h2');
 postHeading.appendChild(titleTextNode);
 singlePost.appendChild(postHeading);
 singlePost.appendChild(descriptionTextNode);
 allPosts.appendChild(singlePost);
 clickableSinglePost = document.getElementsByClassName('singlePost');
 }
 for (let k = 0 ; k < clickableSinglePost.length; k++) {
 clickableSinglePost[k].addEventListener(
 'click', () => {
 console.log(clickableSinglePost[k]);
 location.href = "http://localhost:4000/singlePost.html";
 } )
 }
})

嘿，这个问题其实很常见，不用为每个帖子单独建HTML完全可行，核心思路要么是传递帖子的唯一标识去后端拉取对应数据，要么是前端暂存数据，下面给你几个实用的实现思路：

思路1：URL参数传递帖子ID（最推荐） #

这是Web开发里的标准方案，既符合URL设计规范，也能保证刷新页面不丢失数据：

1. 修改首页点击事件：给每个帖子div绑定对应的数据库ID，跳转时把ID拼到URL里：

   // 渲染帖子时，把ID存到div的dataset属性里
   singlePost.dataset.postId = data[i].id;
   
   // 点击事件里获取ID并跳转
   clickableSinglePost[k].addEventListener('click', function() {
     const postId = this.dataset.postId;
     location.href = `http://localhost:4000/singlePost.html?id=${postId}`;
   });
   

2. 后端新增单帖子接口：写一个根据ID获取单个帖子的接口：

   app.get('/post/:id', (req,res) => {
     const postId = req.params.id;
     // 用参数化查询避免SQL注入
     connection.query(`select * from test where id = ?`, [postId], (error, results) => {
       if (error) {
         console.log(error);
         res.status(500).send('获取帖子失败');
         return;
       }
       res.send(results[0]); // 返回单个帖子数据
     })
   })
   

3. 详情页加载并渲染数据：页面加载时从URL提取ID，调用接口获取数据：

   document.addEventListener('DOMContentLoaded', () => {
     // 解析URL参数
     const urlParams = new URLSearchParams(window.location.search);
     const postId = urlParams.get('id');
     
     if (postId) {
       fetch(`http://localhost:4000/post/${postId}`)
         .then(response => response.json())
         .then(post => {
           // 把数据渲染到页面对应元素
           document.querySelector('.post-title').textContent = post.title;
           document.querySelector('.post-description').textContent = post.description;
         });
     }
   });
   

优点：刷新详情页数据不会丢失，支持用户直接通过URL访问帖子，搜索引擎也能更好收录内容。

思路2：用sessionStorage/localStorage暂存帖子数据 #

如果不想额外写后端接口（临时场景可用），可以在点击时把帖子数据存在前端存储：

1. 首页点击事件修改：

   clickableSinglePost[k].addEventListener('click', function() {
     // 确保能拿到当前帖子的完整数据（这里要注意闭包作用域，避免k值错误）
     const postData = data[k];
     sessionStorage.setItem('currentPost', JSON.stringify(postData));
     location.href = "http://localhost:4000/singlePost.html";
   });
   

2. 详情页读取数据：

   document.addEventListener('DOMContentLoaded', () => {
     const postData = JSON.parse(sessionStorage.getItem('currentPost'));
     if (postData) {
       // 渲染内容
       document.querySelector('.post-title').textContent = postData.title;
       document.querySelector('.post-description').textContent = postData.description;
       // 用完清除数据，避免残留
       sessionStorage.removeItem('currentPost');
     }
   });
   

缺点：刷新详情页后数据会丢失（sessionStorage关闭页面即失效），用户直接输入详情页URL会无数据显示，只适合临时场景。

总结一下，优先选择URL参数+后端接口的方案，这是最健壮、符合Web最佳实践的实现方式。

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