Express.js：如何使用等于外键的输入值将数据发布到html？

时间：2016-04-11 18:22:32

标签： javascript html node.js express sqlite

我的论坛应用有主题和评论。每个评论都有自己的topic_id。现在我可以发布第一个主题的评论，但是当我为另一个主题添加新评论时，它不起作用。我想知道如何使用输入隐藏字段，其值等于所有主题的topic_id。

forum.js 

var express = require('express');
var sqlite3 = require('sqlite3');
var fs = require('fs');
var Mustache = require ('mustache');
var morgan = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');

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

app.use(morgan('dev'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(methodOverride('_method'));

app.get('/', function(req, res){
    res.send(fs.readFileSync('./views/topics/index.html', 'utf8'));

});
app.get('/topics', function(req,res) {
    var template = fs.readFileSync('./views/topics/topics.html', 'utf8');

    db.all("SELECT * FROM topics;", function(err, topics){
        var html = Mustache.render(template, {listoftopics: topics});
        res.send(html);
    });


});


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

});

app.post('/topics/new', function(req, res){
    console.log(req.body);
    db.run("INSERT INTO topics(title, creator, date, body) VALUES ('" + req.body.title + "','" + req.body.creator + "','" + req.body.date + "','" + req.body.body + "')");
    res.redirect("/topics")
});





app.get('/topics/:id/comments/new', function(req, res)
{
    res.locals.id = req.params.id
    console.log(res.locals.id)

    var template = fs.readFileSync('./views/comments/newComment.html', 'utf8')

    db.all("SELECT * FROM topics;", function(err, topics) {


        db.all("SELECT * FROM comments where topic_id= " + res.locals.id + ";", function(err, comments){

    var html = Mustache.render(template, {form:topics, test:comments[0]})
    res.send(html);
    console.log(comments[0])

});



    });



});


app.post('/topics/:id/comments/new', function(req, res){
    var id = req.params.id
    res.locals.id = id

    console.log(id)
    console.log(req.body.topic_id)




    db.run("INSERT INTO comments (person_created, input, topic_id) VALUES ('" + req.body.person_created + "','" + req.body.input + "', '" + req.body.topic_id + "')", function(error){ 






        if (error) {
            console.log('Error')
        }

        else {
            console.log('Success')
        }

        console.log(req.body)


    });

    res.redirect("/topics/" + id + "/comments")

});




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


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





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




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





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



app.listen(3000, function(){
    console.log("LISTENING!");
});

newComments.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}}
<form action="/topics/{{id}}/comments/new" method="POST">
{{/form}}


    <center>
    <label>

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


    <br />
<label>
    Comment:

    <br />

    <textarea type="text" name="input">

    </textarea> 

    </label>
    <br />

{{#test}}
<input type="hidden" name="topic_id" value='{{topic_id}}' />
{{/test}}





    <input type='submit' value='Submit' />
    </center>

</form>
</body>
</html>

topics.html 

<!DOCTYPE html>
<html lang='en'>
<head>

<style type="text/css">
body{
    background-image: url("https://2014.spaceappschallenge.org/media/location/nyc.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;

}
a {
    color: black;
}
</style>
    <meta charset='UTF-8'>
    <title>List of Topics</title>
</head>
<body>

<ul>
    {{#listoftopics}}
    <li><a href="/topics/{{id}}/comments"> {{title}} | {{creator}} | {{date}}</a></li>
    {{/listoftopics}}
</ul>
<form action="/topics/new" method="GET">
<button>Create a new topic</button>
</form>
</body>

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}}
<form action="/topics/{{id}}/comments/new" method='GET'>
{{/form}}
<button>Create New Comment</button>
</form>

</center>

</body>
</html>

来自观看源的当前newComments.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/1/comments/new" method="POST">
<form action="/topics/2/comments/new" method="POST">
<form action="/topics/3/comments/new" method="POST">


    <center>
    <label>

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


    <br />
<label>
    Comment:

    <br />

    <textarea type="text" name="input">

    </textarea> 

    </label>
    <br />






    <input type='submit' value='Submit' />
    </center>

</form>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您提交评论的隐藏输入应使用您在路由器中设置的res.locals.id来呈现评论HTML。

<input type="hidden" name="topic_id" value='{{id}}' />

您现在正在使用{{topic_id}}但不存在。就目前而言，您发布的注释的未定义topic_id值为req.body.topic_id，用于将注释输入数据库的下一个路由器。

然后摆脱{{form}} html起始标记周围的form标记，这样就可以了：

<form action="/topics/{{id}}/comments/new" method="POST">

问题是您发送的POST数据错误id。使用一些console.log语句并尝试在必要时进一步隔离问题。

相关问题
最新问题