EJS动态超链接失效问题：基于post_id生成链接点击无响应

你遇到的问题是：通过EJS基于数据库post_id生成的文章链接，点击后无任何跳转反应。结合你提供的代码，从以下几个方向逐一排查：

1. 验证前端生成的链接有效性 #

打开浏览器开发者工具（按F12），找到页面中生成的<a>标签，查看href属性值：

• 如果显示为/article/undefined或/article/，说明userPosts数组里的post对象未包含post_id字段。需要检查查询userPosts的SQL语句，确保post_id被正确查询并返回给前端。
• 如果链接格式正常（比如/article/1），继续排查后端问题。

整理后的posts.ejs代码：

<% for (let post of userPosts) { %>
    <% if (currentTopic !== post.name) { %>
        <li><strong><%= post.name %></strong></li>
        <% currentTopic = post.name; %>
    <% } %>
    <li>
        <a href="/article/<%= post.post_id %>"><%= post.post_name %> - <%= post.username %></a>
    </li>
<% } %>

2. 确认后端路由是否被触发 #

在main.js的路由处理函数中添加日志，判断请求是否到达后端：

app.get('/article/:postId', function(req, res) {
    const postId = req.params.postId;
    console.log('收到文章请求，postId:', postId); // 新增日志，用于验证请求是否到达
    const sqlQuery = 'SELECT * FROM posts WHERE post_id = ?';

    db.query(sqlQuery, [postId], (err, result) => {
        if (err) {
            console.error('数据库查询错误:', err); // 打印错误信息，定位问题
            return res.send('服务器错误');
        }
        if (result.length === 0) {
            return res.send('Post not found.');
        }
        const post = result[0];
        res.render('article.ejs', { post });
    });
});

• 点击链接后查看终端控制台：
  • 若无日志输出，说明路由未被匹配：检查该路由是否定义在通配路由（如app.get('*', ...)）之后，通配路由会优先匹配导致此路由失效，需调整路由顺序，将具体路由放在通配路由之前；同时确认Node.js服务已重启，代码修改后需重启生效。
  • 若有日志输出，继续排查数据库查询环节。

3. 排查数据库查询问题 #

• 数据库中post_id为int类型，req.params.postId是字符串，虽然MySQL参数化查询会自动转换，但可手动转为数字避免潜在问题：

  const postId = parseInt(req.params.postId, 10);
  if (isNaN(postId)) {
      return res.send('无效的文章ID');
  }
  

• 查看终端打印的数据库错误信息，确认是否存在连接异常、SQL语法错误，或posts表结构与查询逻辑不匹配。

整理后的posts表结构：

CREATE TABLE `posts` (
  `post_id` int NOT NULL AUTO_INCREMENT,
  `user_id` int NOT NULL,
  `topic_id` int NOT NULL,
  `post_name` varchar(45) NOT NULL,
  `article` varchar(1000) NOT NULL,
  PRIMARY KEY (`post_id`),
  UNIQUE KEY `post_id_UNIQUE` (`post_id`)
) 

4. 检查前端是否存在阻止跳转的代码 #

查看页面其他JS代码，是否有监听<a>标签点击事件并调用event.preventDefault()，或返回false，从而阻止了默认跳转行为。

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