如何使用 Express.js post 数据到 HTML？

Question

我正在完成我的开发训练营课程的一个项目，但我无法通过表单post将新数据发送到我的html。我有 HTML 所有设置，但每当我 post 新数据时，什么也没有显示！我还希望将页面重定向到特定主题。

app.js

app.get('/comments/new', function(req, res){
res.send(fs.readFileSync('./views/comments/newComment.html', 'utf8'));
});


app.post('/topics/:id', function(req, res){
var id = req.params.id;
console.log(req.body);
db.run("INSERT INTO comments(person_created, input) VALUES ('" + req.body.person_created + "','" + req.body.input + "')");
res.redirect("/topics/ "  + id)

});

app.get('/topics/:id', function(req, res){
var id = req.params.id;

db.all("SELECT * FROM topics WHERE id = " + id + ";", {}, function(err, topic){
    console.log(topic)

    var body = topic.body;

db.all("SELECT * FROM comments WHERE topic_id = " + id + ";", {}, function(err, comment){

    var person_created = comment.person_created;
    var input = comment.input

    fs.readFile('./views/topics/show.html', 'utf8', function(err, html){
        var renderedHTML = Mustache.render(html, {body:topic, person_created:comment, input:comment});
        res.send(renderedHTML);
        console.log(comment);

    });
    });
});
});

schema.js

var sqlite3 = require ('sqlite3');
var db = new sqlite3.Database('./forum.db');


db.serialize(function(){
db.run("CREATE TABLE topics(id integer primary key AUTOINCREMENT, title  varchar, creator varchar, date varchar, body varchar);")
db.run("CREATE TABLE comments(person_created varchar, input varchar, topic_id integer, FOREIGN KEY (topic_id) references topics(id));")

db.parallelize(function(){
db.run("INSERT INTO topics(title, creator, date, body) VALUES ('Top R&B Hits of the 80s', 'Michael', '4/15/15', 'Please share some of your favorite R&B Hits from the decade!' );")
db.run("INSERT INTO comments(person_created, input, topic_id) VALUES ('Sheila', 'Bille Jean by Michael Jackson', 1);")
db.run("INSERT INTO comments(person_created, input, topic_id) VALUES ('George ', 'Gett Outta of My Dreams by Billy Ocean', 1); ")
   });
   });

newComment.html

<!DOCTYPE html>
<html lang='en'>
<head>
     <style type="text/css">
    body{
    background-color: gray;

     }
      </style>
    <meta charset='UTF-8'>
    <title>Create New Comment</title>
</head>

<body>
<form action="/topics/:id" method="POST">

<center>

<label>

    Name:
      <br />
      <input type="text" name="name" rows="10" cols="50" />
</label>

<label>

       <br />
       <p></p>

    Comment:

       <br />

       <textarea type="text" name="name" rows="10" cols="50">
       </textarea>
       </label>
       <br />
        <button>Submit</button>
        </center>
  </form>
  </body>
  </html>

show.html

  <!DOCTYPE html>
  <html lang='en'>
  <head>
  <style type="text/css">
  body{
  background-image: url("http://blog.paradizo.com/wp- content/uploads/2010/03/nyc-empire-room.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% auto;

   }


   </style>
   <meta charset='UTF-8'>
   <title>Topic ID</title>
   </head>
   <body>
   <center>

  {{#body}}
  <h1>{{body}}</h1>
  {{/body}}


 <h2>Comments<h2>

 <h3>
 <ol>
 {{#person_created}}
 <li>
 {{person_created}} - {{input}}

 </li>
 {{/person_created}}
 </ol>
 </h3>







<form action="/comments/new" method='GET'>
<button>Create New Comment</button>
</form>
</center>

</body>
</html>

Answer 1

你的form action不应该是/topics/:id因为:id是express计算的参数值，所以你会传入实际值。

因此，如果您的表单操作是 /topics/505，那么 505 将是 req.params.id

的值

Answer 2

您正在将 POST 数据与您的表单一起发送到 /topics/:id，用于 /topics/:id 上的 POST 路由器。您应该 POST 到 URL 以及您要用于路由器逻辑的 ID。然后可以通过 req.params.id.

使用此 ID

当您使用表单呈现页面时，您可以使用 res.locals 将当前 ID 作为局部变量传递，然后使用此动态局部变量构建您的表单 action 属性。然后，这将通过 req.params.

将正确的 ID 传递给您的路由器

附带说明一下，您正在尝试访问 req.body 上的 person_created 和 input，但您表单中的输入只能通过他们的 name 输入获得值。您的 name 值目前都是 name。您应该将它们命名为 uniquely 并确保您启用了 body-parser 中间件。

如何使用 Express.js post 数据到 HTML？

How to post data to HTML using Express.js?

javascript

sqlite

node.js

mustache

express