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

Question

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

但在点击个人资料按钮后，只有 id 会改变，它使用个人资料作为 id （我使用 ejs 作为 views/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

我觉得是这样的：

<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>

Answer 2

我最近在做一个博客网站，我写了一个 post 并显示在主页上。但是如果我们想转到特定的 post 页面，而不是为每个新的 post 创建另一个单独的页面，我们会创建一个 post.ejs 页面，然后访问特定的 post 我们只是简单地使用了一种叫做 lodash 的东西。我将向您展示一个示例，这样它更有意义，我将向您展示我们使用的代码。

所以这个例子是这样的，我去 compose.ejs 页面然后我写了一个随机的 post: title=Post, content=A random lorem ipsum 假设我们写另一个 post: title=Another post, content=Another random lorem ipsum

好的，现在每次我们写博客时 post 它都会将我们发送到主页（我们当前所在的页面）并显示两个博客 post。如果我们想转到 post 的特定 url，我们只需编写此 link localhost:3000/posts/Another post 回车，它会将我们带到第二个 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、[=22] 中显示的名称=] 就像一个变量，它会存储用户写入的任何内容。

第二行，我们使用lodash将用户写的改写成我们想要的，比如用户写了AnoTheR POst会自动改成another-post，我们存储它在一个名为 requestedTitle.

的常量中

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

在第 4 行，我们再次使用 lodash 来做同样的事情，但这次是围绕每个人的标题 post，并将其存储在一个名为 storedTitle 的常量中。

最后，一个 if 语句，如果两个名称相同，那么它将呈现 post.ejs 页面，我们只需使用选定的 post 传递标题和内容此代码 , {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 的顶行和底行只是我使用的 header 和页脚模板，只是以节省编码时间。里面是 post.ejs 在被调用时呈现的内容。

我希望它没有那么令人困惑，我仍在学习编码，我希望它能帮助你找到你正在寻找的东西。我认为这不是您问题的确切答案，但我认为它会帮助您顺利通过。

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

编辑：原版后 30 分钟 post

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

每当我想编写新的 post 时，我都会使用此代码：

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

而且显然有一个表格让你写post，提交后，它会把你带到主页，并保存post。为此，我使用了这段代码：

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

我对你的网站有一个想法，如果当你按下配置文件按钮时，它会呈现你网站上的一个特定页面，当你按下另一个按钮时它会呈现另一个页面。它可以工作，不是吗？

请试一试并告诉我效果如何。

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

use href tag for different html pages but with same url id in express

parameters

url

ejs

node.js

express