Question

所以我试图在同一帖子上提交表单（有点像在facebook或youtube上的评论，在帖子上您有一个字段，然后填充该字段并提交，然后将您重定向到同一页面，但该帖子有评论或添加标签）。

架构

Tag schema

var mongoose = require("mongoose");


var tagSchema = new mongoose.Schema({
    tagDescription: String
});

module.exports = mongoose.model("Tag", tagSchema);

Note Schema

var mongoose = require("mongoose");
var noteSchema = new mongoose.Schema({
    title: String,
    body: String,
    category: String,
    created: { type: Date, default: Date.now },
    tags: [
        {
            type: mongoose.Schema.Types.ObjectId,
            ref: "Tag"
        }
    ]
});

module.exports = mongoose.model("note", noteSchema);

因此，我尝试了以下代码，但是每当我提交标签时，标签只会添加到第一篇文章中，并且如果我删除findOne并将其替换为find的undefined属性，则会出现未定义的推送。

这是index.ejs页面

<div class="card-body">
  <h2 class="card-title"><%= note.title %></h2>
   <div class="card-text-center">
     <p><%= note.category %></p>
       <p><%= note.body.substring(0,20)%>...</p>
         <% note.tags.forEach(function(tag){ %>
             <p><%= tag.tagDescription %></p>
                 <% }) %>
               <div class="float-right card-footer">
        <small><%= note.created.toDateString() %></small>
  </div>
   <p><a href="/notes/<%= note._id %>" class="btn btn-info">Read More</a></p>
     <form action="/" method="post">
       <input class="col-md-2 form-control" type="text" name="tag[tagDescription]" placeholder="Tag" />
     <button class="btn btn-primary">Submit</button>
  </form>

路线

app.post("/", function (req, res) {
    Note.findOne({}, function (err, note) {
        if (err) {
            console.log(err);
            res.redirect("/notes");
        } else {
            Tag.create(req.body.tag, function (err, tag) {
                if (err) {
                    console.log(err);
                } else {
                    note.tags.push(tag);
                    note.save();
                    res.redirect("/notes");
                }
            });
        }
    });
});


app.get("/notes", function (req, res) {
    Note.find({}).populate("tags").exec(function (err, notes) {
        if (err) {
            console.log(err);
        } else {
            res.render("index", { notes: notes/*, tags: i */});
            //console.log(i);

        }
    });

});

app.get("/notes/new", function (req, res) {
   res.render("new");
})
app.post("/notes", function (req, res) {
    Note.create(req.body.note, function (err, newNote) {
        if (err) {
            console.log(err);
        } else {
            res.redirect("/notes");
        }
    });

});

提交新笔记/帖子的表单

<form action="/notes" method="post">
                <div class="form-group">
                    <label>Title</label>
                    <input class="form-control" type="text" name="note[title]" placeholder="Title" />
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <input class="form-control" type="text" name="note[category]" placeholder="Category" />
                </div>
                <div class="form-group">
                    <label>Note content</label>
                    <textarea class="form-control" name="note[body]" placeholder="Add a new Note..."></textarea>
                </div>
                <div class="form=group">
                    <button class="btn btn-primary btn-large btn-block">Submit</button>
                </div>

            </form>

Answer 1

发布标签时，路线需要知道标签所属的注释。除了使用findOne（）之外，我更喜欢通过路由到notes /：id / tag并调用

使用的原始解决方案

Note.findById(req.params.id, ...);

如果您坚持要发布到“ /”作为路线，则可以将noteId作为参数传递

<form action="/?noteId=<%= note.id %>" method="post">

然后在您的路线上接住

Note.findById(req.body.noteId, ...);

here讨论了在REST中使用嵌套资源的权衡问题。

Answer 2

索引

  <% note.tags.forEach(function(tag){ %>
                                    <div  class="badge">
                                        <div class="badge badge-pill badge-info">
                                        <form action="/notes/<%= note._id %>/tags?_method=DELETE" method="post" style="display: inline">
                                            <button class="btn btn-sm">x</button>
                                        </form>
                                        <%= tag.tagDescription %>
                                        </div>
                                    </div>
                               <% }) %>
                               <p><a href="/notes/<%= note._id %>" class="btn btn-info">Read More</a></p>
                               <div class="float-right card-footer">
                                   <small><%= note.created.toDateString() %></small>
                               </div>
                               <form action="/notes/<%= note.id %>/tags" method="post">
                                   <input class="col-md-2 form-control" type="text" name="tag[tagDescription]" placeholder="Tag" />
                                   <button class="btn btn-primary">Add Tag</button>
                               </form>

路线

app.post("/notes/:id/tags", function (req, res) {
    Note.findById(req.params.id, function (err, note) {
        if (err) {
            res.redirect("/notes");
        }
        else {
            Tag.create(req.body.tag, function (err, tag) {
                if (err) {
                    console.log(err);
                }
                else {
                    note.tags.push(tag);
                    note.save();
                    res.redirect("/notes");
                }
            });
        }
    });
});

Note.find({}).populate("tags").exec(function (err, notes) {
        if (err) {
            console.log(err);
        } else {
            res.render("index", { notes: notes });


        }
    });

如何在同一页面的同一职位上提交表格

2 个答案: