如何从JSON文件提取路径在Express中实现动态路由配置

问题修正方案 #

现有代码核心问题整理 #

• 动态路由参数获取错误，未正确匹配路由中的link参数
• 文章筛选逻辑错误，没有从已发布文章中匹配对应link的单篇文章
• 存在重复发送响应的错误，res.render后调用res.send会抛出响应头重复发送错误
• EJS模板中超链接路径与路由定义不匹配，且存在多余的标签嵌套问题
• 本地数组操作使用了不必要的await关键字，本地同步数据不需要异步等待

1. 路由代码调整 #

const router = express.Router()
const Articles = require('../articles/articles');

// 文章列表页路由
router.get("/", (req, res) => {
    // 筛选所有已发布文章，本地数据不需要await
    const articles = Articles.articles.filter(article => article.publish === 'True');
    res.render("theme", {articles: articles});
});

// 单篇文章动态路由
router.get("/:link", (req, res) => {
    // 正确获取路由中的link参数
    const targetLink = req.params.link;
    // 筛选已发布且link匹配的单篇文章
    const targetArticle = Articles.articles.find(article => 
      article.publish === 'True' && article.link === targetLink);
    
    // 匹配不到返回404
    if(!targetArticle) {
        return res.status(404).send('文章不存在');
    }
    
    // 渲染单篇文章页，传入匹配到的单篇文章数据
    res.render("blog_articles", {article: targetArticle});
});

2. theme.ejs模板调整 #

<!DOCTYPE html>
<html lang="en">
    <body>
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <!-- Post preview-->
                    <div class="post-preview">
                        <object data="README.md" type="text/html"></object>
                        <% articles.forEach(article => { %>
                            <h2 class="post-title" style="margin-bottom: -1.41rem">
                                <!-- 调整链接前缀为/theme，和需求的路由格式一致 -->
                                <a href="/theme/<%=article.link %>" id="Android"><%= article.title %></a>
                            </h2>
                            <br class="post-gap-title-description" style="margin-bottom: 0.25rem">
                            <h4 class="post-description" style="font-weight: 300"><%= article.description %></h4>
                            <p class="post-meta">
                            Posted by
                            <a href="#!">
                                <%= article.creator %>
                            </a>
                             on
                             <a href="#"><%= article.createdAt %></a>
                            </p>
                            <hr class="my-4" />
                        <% }) %>
                    </div>
                    <!-- Divider-->
                    <hr class="my-4" />
                    <!-- Pager-->
                    <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
                </div>
            </div>
        </div>
    </body>
</html>

3. blog_articles.ejs使用示例 #

你可以在blog_articles.ejs中直接使用传入的article变量渲染内容：

<h1><%= article.title %></h1>
<p>作者：<%= article.creator %></p>
<p>发布时间：<%= article.createdAt %></p>
<div><%= article.text || '该文章暂无正文内容' %></div>

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