Express.js Pug.js |在获取具有不同内容的 POST 请求后呈现同一页面

Question

我有一个来自数据库的文章预览列表，并使用 Pug.js mixin 在页面上呈现。

  each article in articles
     +articlePreview(article.title, article.text, article.imgSrc)

我想为这些预览启用过滤功能（按标题排序、按类别过滤等），因此我向快速应用程序发送了一个提取 POST 请求。该路由进行了适当的过滤，应该呈现应用了过滤器的同一页面，但该页面不是 re-rendering.

在哈巴狗中我有这样的东西：

        button.filters-btn.filters-title title
            .filters-title-icon
                if (filters.title && filters.title === 'az')
                    span a-z
                else if (filters.title && filters.title === 'za')
                    span z-a
                else 
                    i.arrow.arrow-up 
                    i.arrow.arrow-down
        div(tabindex="0", class="filters-btn filters-category")
            if (filters.category) 
                span= filters.category
                .filters-category-icon
                    button x
            else 
                span category
                .filters-category-icon 
                    i.arrow.arrow-down
            ul(class="filters-category-list")
                li(class=`filters-category-item ${filters.category === 'cooking' ? "filters-category-active" : ''}`) cooking
                li(class=`filters-category-item ${filters.category === 'sport' ? "filters-category-active" : ''}`) sport
                li(class=`filters-category-item ${filters.category === 'travels' ? "filters-category-active" : ''}`) travels
                li(class=`filters-category-item ${filters.category === 'animals' ? "filters-category-active" : ''}`) animals

单击 .filters-title 之间的一个或 .filters-category-list 的元素之一会触发提取调用。

在 express 中，我只是从请求中获取过滤器，过滤文章并通过 res.render():

将它们发回（连同要显示的过滤器）

app.post("/articles", (req, res) => {
  const articles = [...get data from db and apply filters];
  res.render("../articles/index", {
    title: articles,
    articles,
    filters: req.body.filters,
  })
})

我是否应该在不使用 pug 变量的情况下重新执行此操作，并在 express 响应后简单地在 javascript 中创建元素？或者有什么方法可以充分利用 Pug.js?

Answer 1

这里的问题是您正在使用 fetch 发出 POST 请求。 Fetch 用于在不导航的情况下制作 HTTP（或 rendering 在你的情况下）。

相反，使用 XMLHttpRequest 到 post 形式：

var xhr = new XMLHttpRequest();
xhr.open("POST", write_your_uri_here, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    value: value
}));

Express.js Pug.js |在获取具有不同内容的 POST 请求后呈现同一页面

Express.js Pug.js | Render the same page after fetch POST request with different content

javascript

node.js

express

pug