Node.js+EJS开发博客点击阅读更多链接跳转报错

一共两个核心问题导致跳转失败：

• 路由路径不匹配：首页「Read more」链接的跳转地址前缀是/posts/，但后端配置的文章详情路由前缀是/compose/，请求发送后找不到匹配的后端路由，直接触发服务端错误。
• 路由逻辑存在缺陷：原详情路由没有做「未找到对应文章」的兜底响应，遍历完文章列表如果没有匹配项，服务端不会返回任何响应，会触发请求超时或500错误；同时原链接生成用_.lowerCase()会把标题转成空格分隔的字符串，不符合URL规范，容易出现参数匹配失败的问题。

按以下步骤修改代码即可：

1. 统一路由路径
   把后端原有的详情路由app.get('/compose/:newPost', ...)改为app.get('/posts/:postLink', ...)，和前端跳转路径保持一致；同时把首页模板里的链接从相对路径改为绝对路径，避免多级路径下跳转异常：

   <a href="/posts/<%=post.link%>">Read more</a>
   

2. 统一文章链接生成规则
   发布文章时，把生成link的逻辑从_.lowerCase()改为_.kebabCase()，生成短横线连接的标准URL slug，避免空格、特殊符号、大小写导致的匹配失败：

   app.post("/compose", function(req, res){
     const post = {
       cTitle: req.body.postTitle,
       cBody: req.body.postBody,
       link: _.kebabCase(req.body.postTitle)
     }
     posts.push(post);
     res.redirect("/");
   })
   

3. 补全详情路由的兜底逻辑
   重写详情路由逻辑，匹配到文章就渲染详情页，匹配不到就返回404提示，避免请求无响应：

   app.get('/posts/:postLink', function(req,res){
     const targetSlug = _.kebabCase(req.params.postLink);
     const matchedPost = posts.find(post => _.kebabCase(post.cTitle) === targetSlug);
     
     if(matchedPost){
       res.render("post",{
         title: matchedPost.cTitle,
         body: matchedPost.cBody
       });
     }else{
       res.status(404).send("你访问的文章不存在");
     }
   })
   

修改完成后重启服务，点击「Read more」即可正常跳转到对应文章详情页。

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