无法在Node.js Express中发布

Question

Following code is giving me the error

Cannot POST /campgrounds/5b0d6eb8a0f5990b452e8212/comments

When I submit my form from new.js i get an error. I have one more Post Route and it works fine which means that my body-parser has no issue.

The aim here is when the user submit the comment, he should be navigated back to show.ejs where the camps are shown as well as the new comment I am running this app on Cloud9.

App.js

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var mongoose = require("mongoose");
var Campground = require("./models/campground");
var Comment = require("./models/comment");
var seedDB = require("./seeds.js");




mongoose.connect("mongodb://localhost/yelp_camp");

app.use(bodyParser.urlencoded(
    {
        limit: "10mb",
        extended:true

    }));

app.set("view engine", "ejs");
seedDB();






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

app.get("/campgrounds",function(req,res){
    // Get all Campround    from db
    Campground.find({},function(err,allCampgrounds){
       if(err){
           console.log(err);
       } else{
         res.render("campgrounds/index",{campgrounds:allCampgrounds});
       }
    });
//   
});

app.post("/campgrounds", function(req,res){
    //res.send("Hitting the Post ROute");
    var name  = req.body.name;
    var image = req.body.image;
    var description = req.body.description;
    var newCampground = {name: name, image: image,description : description};
    // New Campground and Save to DB..
    Campground.create(newCampground,function(err,newlyCreated){
       if(err){
           console.log(err);
       } else{
        res.redirect("/campgrounds");

       }
    });
    // campgrounds.push(newCampground);
   //get data from form and add them to array...




});

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


//Show More Info on Camps
app.get("/campgrounds/:id",function(req, res) {
    // Find Campground using Id
    Campground.findById(req.params.id).populate("comments").exec(function(err,foundCamp){
       if(err){
           console.log(err);
       }else{
           //render show page
           console.log(foundCamp);
           res.render("campgrounds/show",{campground:foundCamp});
       }
    });
    // req.params.id



});


/*
====================
Comments
+===================*/



app.get("/campgrounds/:id/comments/new", function(req, res) {
   Campground.findById(req.params.id,function(err,campground){
       if(err){
           console.log(err);
       }else{ 
           res.render("comments/new", {campground:campground}); 
       }
   });

});


app.post("campgrounds/:id/comments",function(req,res){
   //luk for campground
   Campground.findById(req.params.id, function(err,campground){
      if(err){
          console.log(err);
          res.redirect("/campgrounds");
      } else {
          Comment.create(req.body.comment, function(err, comment){
               if(err){
                   console.log(err);
               }else{
                //   var text = req.body.text;
                //   var author = req.body.text;
                //   console.log(text);
                  campground.comments.push(comment);
                  campground.save();
                  //console.log(comment);
                 res.redirect('/campgrounds/' + campground._id);
               }
          });
      }
   });
   //create new cpmment

   //comment new comment to 

   //redirect
});





app.listen(process.env.PORT,process.env.IP, function(){
   console.log("Yelp Server Started...") 
});

New.js

<% include ../partials/header %>
<div class="container">
    <h1 style="text-align:center;">Add New Comment to <%= campground.name %></h1>
      <div class="row">

            <div style="width:30%;margin:0 auto;">
                <form action="/campgrounds/<%= campground._id %>/comments" method="POST">
                    <div class="form-group">
                         <input class="form-control" type="text" name="comment[text]"  placeholder="Text">   
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" name="comment[author]"  placeholder="Author">
                    </div>

                    <button class="btn btn-lg btn-primary btn-block">Submit</button>

                </form>
            </div>
       </div>
</div>

<% include ../partials/footer %>

Show.ejs

<% include ../partials/header %>

<h1><%= campground.name %></h1>


<p></p>

<img src="<%= campground.image %>"/>

<p><%= campground.description %></p>

<p>
   <a class="btn btn-success" href="/campgrounds/<%= campground._id %>/comments/new">Comment</a>
</p>


<% campground.comments.forEach(function(comment){ %>
    <p><strong><%= comment.author %></strong> -  <%= comment.text %> </p>

<% }); %>

<% include ../partials/footer %>

Answer 1

Please add a forward-slash character to the start of your route path parameter.

Currently you have "campgrounds/:id/comments"

You are expecting a POST request on "/campgrounds/:id/comments"