无法在 Node.js Express 中发布

里沙夫·辛哈

以下代码给了我错误

Cannot POST /campgrounds/5b0d6eb8a0f5990b452e8212/comments

当我从 new.js 提交表单时,出现错误。我还有一条Post路线,它运行良好,这意味着我body-parser没有问题。

这里的目的是当用户提交评论时,他应该被导航回 show.ejs,其中显示了营地以及我在 Cloud9 上运行这个应用程序的新评论。

应用程序.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...") 
});

新的.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 %>

显示.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 %>
用户3978398

请在路由路径参数的开头添加一个正斜杠字符。

目前你有“campgrounds/:id/comments”

您正在等待“/campgrounds/:id/comments”上的 POST 请求

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章