Question

我正在从我的dev bootcamp课程完成一个项目，而且我在通过表单将新数据发布到我的html时遇到了麻烦。我有HTML all设置，但每当我发布新数据时，都没有显示！我还希望将页面重定向到特定主题。

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

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

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

Answer 2

您要将POST数据与/topics/:id路由器POST路由器/topics/:id一起发送至POST。您应req.params.id到具有您要用于路由器逻辑的ID的URL。然后可以通过res.locals获取此ID。

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

作为旁注，您尝试访问input上的req.body和name，但表单中的输入仅可通过其name输入值获得。您的name值目前均为uniquely。您应该将它们命名为body-parser并确保已启用menuState = { update: function() { //... } } settingsState = { update: function() { //... } } playState = { update: function() { this.clear(); this.move(); this.draw(); }, clear: function() { //... }, move: function() { //... } draw: function() { //... } }中间件。

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

2 个答案: