Question

我正在使用CRUD操作建立一个博客站点。我可以创建，阅读和删除，但是在弄清楚如何更新创建的帖子时遇到了困难。基本上，我可以在其中单击 home.ejs 中单个条目的“编辑”按钮，并进入 edit.ejs 路由，在该路由中输入字段将被填充当前标题和内容。但是我不知道该怎么做，是单击 edit.ejs 中的“发布”以更新其自己的 post.ejs 标题和内容。完成后，我希望它重定向回主页。在“ app.post（“ / edit /：id”）”路径上，我应该使用“ PUT”请求来更新帖子吗？如果很难遵循，对不起。我不太善于解释事物。

以下是相关代码：

app.js

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

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.";

let app = express();

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

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

mongoose.connect("mongodb://localhost:27017/blogDB", {
  useNewUrlParser: true
});

const postSchema = {
  date: String,
  title: String,
  content: String
}

const Post = mongoose.model("Post", postSchema);

app.get("/", (req, res) => {

  Post.find({}, (err, posts) => {
    res.render("home", {
      posts: posts
    });
  });
});

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

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

app.get("/compose", (req, res) => {
  res.render("compose");
});


app.post("/compose", (req, res) => {
  const postTitle = req.body.postTitle;
  const postBody = req.body.postBody;

  let date = new Date();
  let postDate = date.toLocaleString('en-US');

  const post = new Post({
    date: postDate,
    title: postTitle,
    content: postBody
  });

  post.save(err => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.get("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});



app.get("/posts/:id", (req, res) => {
  const requestedId = req.params.id;

  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("post", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/delete", (req, res) => {
  const deletePost = req.body.delete;

  Post.findByIdAndDelete(deletePost, (err) => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.listen(3000, function () {
  console.log("Server started on port 3000");
});

home.ejs

    <%- include("partials/header") -%>
<h1>Home</h1>
<a href="/compose" class="post-link"><button type="button" class="new-entry btn btn-dark">New Entry</button></a>

<div class="entries-container">
  <% posts.forEach(post => { %>

  <div class="blog-entry">
    <p class="post-date">Posted on
      <%= post.date %>
    </p>
    <h2>
      <%= post.title %>
    </h2>
    <div class="entry-footer">
      <a href="/posts/<%= post._id %>" class="post-link"><button type="button" class="btn btn-outline-primary">VIEW</button></a>
      <form action="/edit" method="POST">
        <a href="/edit/<%= post._id %>" class="post-link" ><button type="button" name="edit" value="<%= post.title %>" class="btn btn-outline-secondary">EDIT</button></a>
      </form>
      <form action="/delete" method="POST">
        <button type="submit" name="delete" value="<%= post._id %>" class="btn btn-outline-danger">DELETE</button>
      </form>
    </div>
  </div>
  <% }) %>
</div>

<%- include("partials/footer") -%>

edit.ejs

<%- include("partials/header") -%>
<h1>Compose</h1>
<form action="/edit" method="PUT">
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input type="text" name="postTitle" class="form-control" id="postTitle" autocomplete="off" value="<%= title %>">
    <label for="postBody">Post</label>
    <textarea name="postBody" class="form-control" autocomplete="off" rows="8"><%= content %></textarea>
  </div>
  <button type="submit" name="button" class="btn btn-primary">Publish</button>
</form>
<%- include("partials/footer") -%>

post.ejs

<%- include("partials/header") -%>
  <h2 class="post-title"><%= title %></h2>
  <p class="post-content"><%= content %></p>
<%- include("partials/footer") -%>

Answer 1

如果您只想通过POST请求更新现有的博客文章标题和内容，则可以使用findOneAndUpdate()进行以下操作：

app.post("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOneAndUpdate({
     _id: requestedId                   // Query Part
  },
  {
    $set: {
       title: req.body.title,           // Fields which we need to update
       content: req.body.content
    }
  },
  { 
     new: true                          // option part ( new: true will provide you updated data in response )
  },(err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});

如何更新猫鼬的博客文章？

1 个答案: