javascript - 无法获取/帖子/任何内容。看起来 req.params 不起作用

Question

我是这方面的新手，很抱歉犯了一些愚蠢的错误。快乐学习。每当我使用 URL : localhost:3000/posts/whatever 时，我都会收到无法获取错误。在你问之前，是的，那是在我将内容放入帖子页面之后。 req 似乎存在一些问题。

这是我的代码:

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const _ =require("loadash");

const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing.";
const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

let posts = [];

app.get("/", function(req,res){
  res.render("home", {
    startingContent: homeStartingContent,
    posts:posts
  });
});

app.get("/contact",function(req,res){
  res.render("contact",{contactContent: contactContent});
});

app.get("/about",function(req,res){
  res.render("about",{aboutContent: aboutContent});
});

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("/");

});

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.listen(3000, function() {
  console.log("Server started on port 3000");
});

Answer 1

在您的代码中，您必须在 require 部分中更正 loadash 中的 lodash。

而且我确实相信您的中间件有问题。

我添加了一堆日志行来查看您的代码是如何被操作的。

这是撰写功能:

app.post("/compose", function(req, res){
  console.log('(BODY) compose variables: ', req.body.postTitle, req.body.postBody)
  console.log('(PARAMS) compose variables: ', req.params.postTitle, req.params.postBody)
  console.log('(QUERY) compose variables: ', req.query.postTitle, req.query.postBody)
  const post = {
    title: req.body.postTitle,
    content: req.body.postBody
  };
  console.log('compose variables as object', post)
  posts.push(post);
  console.log('object pushed to array', posts)
  res.redirect("/");

});

这是 GET/posts/:postTitle 函数。

app.get("/posts/:postName", function(req, res){
  const requestedTitle = _.lowerCase(req.params.postName);
  console.log('requestedTitle: ', requestedTitle)
  console.log('Array to loop: ', posts)
  posts.forEach(function(post){
      console.log('current looped object: ', post)
      const storedTitle = _.lowerCase(post.title);
      console.log('looped title: ', post.title)
      console.log('storedtitle: ', storedTitle)

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

这些日志行告诉我，如果我在 Postman 中编写正确的 POST 请求，一切都会正常工作。

POST http://localhost:3000/compose正文:x-www-form-urlencoded，postTitle:测试，postBody:testbody

如果您在 POST 请求中发送信息而不是 urlencoded，则必须加载匹配的 bodyParser middelware。

如果我将数据作为参数 (URL) 或普通格式数据发送，它会使用空对象填充 posts 数组。

<小时/>

使用正确的 Postman 设置记录行:
POST/撰写

(BODY) compose variables: test
(PARAMS) compose variables: undefined undefined
(QUERY) compose variables: undefined undefined
compose variables as object { title: 'test', content: '' }
object pushed to array [ { title: 'test', content: '' } ]

GET/posts/test

requestedTitle: test
Array to loop: [ { title: 'test', content: '' } ]
current looped object: { title: 'test', content: '' }
looped title: test
storedtitle: test

<小时/>

带有表单数据的日志行POST/撰写

(BODY) compose variables: undefined undefined
(PARAMS) compose variables: undefined undefined
(QUERY) compose variables: undefined undefined
compose variables as object { title: undefined, content: undefined }
object pushed to array [ { title: undefined, content: undefined } ]

GET/posts/test

requestedTitle: test
Array to loop: [ { title: undefined, content: undefined } ]
current looped object: { title: undefined, content: undefined }
looped title: undefined
storedtitle:

<小时/>

以及以数据作为参数的日志行(URL 数据)

POST/compose?postTitle=test&postBody=testbody

(BODY) compose variables: undefined undefined
(PARAMS) compose variables: undefined undefined
(QUERY) compose variables: test testbody
compose variables as object { title: undefined, content: undefined }
object pushed to array [ { title: undefined, content: undefined } ]

GET/posts/test

requestedTitle: test
Array to loop: [ { title: undefined, content: undefined } ]
current looped object: { title: undefined, content: undefined }
looped title: undefined
storedtitle:

<小时/>

因此，您应该找出哪些数据进入您的应用程序，并确保加载了正确的中间件。