如何使用 Express.js 将数据发布到 HTML

How to post data to HTML using Express.js?

本文关键字：HTML 数据 何使用 Express js      更新时间：2023-09-26

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

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

架构.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); ")
   });
   });

新评论.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>

显示.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>

您的表单操作不应为/topics/：id，因为 ：id 是由 express 计算的参数值，因此您将传入实际值。

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

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

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

作为旁注，您正在尝试访问person_created和input req.body ，但表单中的输入只能通过其name输入值获得。您的name值当前均为name 。您应该将它们命名uniquely并确保已启用body-parser中间件。

相关文章：