对不同的 html 页面使用 href 标记，但在 express 中具有相同的 url id

Question

我正在尝试通过单击每个按钮在同一用户的主页和个人资料页面之间切换。除了 home 和 profile 之间的变化，id 应该保持不变。

但点击个人资料按钮后，只有 id 会被更改，它使用个人资料作为 id （我使用 ejs 作为我的视图/html 页面的格式） 知道如何解决吗？这可能吗？

这是我的导航代码：

<nav>
    <div class="nav-wrapper  teal darken-4">
      <a href="#!" class="brand-logo">BAZAART</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light btn teal lighten-1" href="home"> <i  class="material-icons right">home</i> home</a></li>
        <li><a class="waves-effect waves-light btn teal lighten-1" href="profile">profile <i class="material-icons right">account_box</i></a></li>
        
      </ul>
    </div>
  </nav>

家庭控制器：

exports.sendReqParam = (req, res) => {
    let userHome = req.params.userHome;
    res.render("home", { name: userHome });
    // res.send(`This is the homepage for ${userHome}`);
    
   };
   exports.respondWithName = (req, res) => {
    let paramsName = req.params.myName;
 res.render("profile", { name: paramsName });
   }

main.js

app.get("/profile/:myName",  homeController.respondWithName);
    app.get("/",  homeController.respondInfo);
app.get("/home/:userHome", homeController.sendReqParam)

Answer 1

我最近正在创建一个博客网站，我在其中写了一篇文章，并将其显示在主页上。但是如果我们想进入特定的帖子页面，而不是为每个新帖子创建另一个单独的页面，我们创建了一个post.ejs 页面，然后访问特定的帖子，我们只需使用称为 lodash 的东西。我将向您展示它的一个示例，这样更有意义，并且我将向您展示我们使用的代码。

所以例子是这样的，我去compose.ejs页面，我写了一个随机的帖子：title=Post, content=A random lorem ipsum 假设我们再写一篇文章：title=Another post, content=Another random lorem ipsum

好的，现在每次我们写博客文章时，它都会将我们发送到主页（我们当前所在的位置），它会显示两个博客文章。如果我们想去帖子的具体网址，我们只需写这个链接localhost:3000/posts/Another post回车，它就会把我们带到我们写的第二个帖子。

这是我们在app.js中使用的代码：

app.get("/posts/:postName", function(req, res){
  const requestedTitle = _.lowerCase(req.params.postName);

  posts.forEach(function(post) {
    const storedTitle = _.lowerCase(post.title);

    if (storedTitle === requestedTitle) {
      res.render("post", {title: post.title, content: post.content});
    }
  });
});

在app.js 代码中，我们在app.get 中看到/posts/:postName，这只是将在url 中显示的名称，:postName 就像一个变量，它将存储用户写入的任何内容.

在第二行中，我们使用lodash将用户写的内容重写为我们想要的，例如如果用户写了AnoTheR POst，它会自动将其更改为another-post，我们将其存储在一个名为@的常量中987654333@.

接下来是 posts 数组上的 forEach 循环（我们存储每个帖子），这只是遍历每个帖子并检查名称。

在第 4 行中，我们再次使用 lodash 来表示相同的内容，但这次将每个帖子的标题包围起来，并将其存储在一个名为 storedTitle 的常量中。

最后是一个 if 语句，如果两个名称相同，那么它将呈现 post.ejs 页面，我们只需使用此代码 , {title: post.title, content: post.content} 传递所选帖子的标题和内容。

这是我们在post.ejs中使用的代码：

<%- include("partials/header") -%>


<br>
<div class="card">
  <h2 class="card-header"> <%= title %> </h2>
  <div class="card-body">
    <p class="card-text"> <%= content %> </p>
  </div>
</div>


<%- include("partials/footer") -%>

正如您所见，post.ejs 不难解释，上面写着include("partials 的顶部和底部只是我使用的页眉和页脚模板，只是为了节省编码时间。里面是post.ejs 在被调用时将呈现的内容。

我希望它没有那么令人困惑，我还在学习编码，我希望它可以帮助你找到你想要的东西。我认为这不是您问题的确切答案，但我认为它会帮助您解决问题。

如果您需要更多解释或帮助，这是我的 Instagram：@cemruniversal，如果可以，我总是很乐意提供帮助。

编辑：原帖后 30 分钟

我想我找到了一种可行的方法，我将向您展示来自同一博客网站的一段代码。

每当我想撰写新帖子时，我都会使用以下代码：

app.get("/compose", function(req, res){
  res.render("compose");
});

显然有一个表格供您撰写帖子，提交后，它会将您发送到主页，并保存帖子。为此，我使用了这段代码：

app.post("/compose", function(req, res){
  const post = {
    title: req.body.postTitle,
    content: req.body.postBody
  };
  posts.push(post);
  res.redirect("/");
});

我对您的网站有一个想法，如果您按下“个人资料”按钮，它会在您的网站上呈现一个特定页面，而当您按下另一个按钮时，它会呈现另一个页面。它可以工作，不是吗？

请试一试，告诉我结果如何。

Answer 2

我认为是这样的：

<nav>
    <div class="nav-wrapper  teal darken-4">
      <a href="#!" class="brand-logo">BAZAART</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light btn teal lighten-1" href="/home"> <i  class="material-icons right">home</i> home</a></li>
        <li><a class="waves-effect waves-light btn teal lighten-1" href="/profile">profile <i class="material-icons right">account_box</i></a></li>
        
      </ul>
    </div>
  </nav>