无法获取 /posts/whatever 。 看起来 req.params 不起作用

Question

I am newbie at this, so sorry for some silly mistakes. Happy to learn. Whenever I use URL : localhost:3000/posts/whatever I get a cannot GET error. Before you ask, yes that is after I put content in posts page. It looks like there is some problem with req .

This is my code:

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

In your code you'll have to correct lodash from loadash in the require section.

Also I do believe it's your middelware that's a problem.

I added a bunch of log lines to see how your code is manipulated.

This is the compose function:

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

});

And this is the GET /posts/:postTitle function.

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,
        });
      }
  });
});

These log lines showed me that everything works just fine if I compose the right POST request in Postman.

POST http://localhost:3000/compose Body: x-www-form-urlencoded, postTitle: test, postBody: testbody

If you're sending your information in the POST request other than urlencoded you'll have to load the bodyParser middelware that matches.

If I send data as params (URL) or normal form data it populates the posts array with empty objects.

---

Log lines with correct Postman settings:
POST /compose

(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

---

Log lines with form-data POST /compose

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

---

And log lines with data as params (URL data)

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:

---

So you should find out what data comes into your application and make sure you have the correct middleware loaded.