2016-04-11 21 views
0

Forumumda konu ve yorum var. Her yorum için kendi topic_id vardır. Şu anda ilk konu için yorum gönderebiliyorum, ancak başka bir konu için yeni yorumlar eklediğimde işe yaramıyor. Tüm konular için topic_id değerine eşit bir değere sahip giriş gizli alanının nasıl kullanılacağını bilmek isterim.Express.js: Yabancı anahtarla eşit bir girdi değeri kullanarak html'ye veri nasıl gönderilir?

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!"); 
}); 

<!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 görünümü kaynağından

Güncel 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> 
+0

'topic.html' mesajını gönderir misiniz? – roflmyeggo

+0

Evet Yeni konular yayınlayabiliyorum, ancak yeni konu başlığındaki herhangi bir yorumu ilk başlığa ekleyemiyorum. 'Id' değişkeni tüm konulardaki yorumları göndermeme izin vereceğini düşündüm. –

+0

Yayınınızı "topics.html" içeriğinizle düzenleyebilir misiniz? – roflmyeggo

cevap

0

comments HTML işlemek için yönlendirici res.locals.id ayarladığınız kullanmalıdır açıklama sunulması için senin gizli girdi.

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

Şu anda mevcut değil hangi {{topic_id}} kullanıyor. Bu durumda, veritabanına yorumu girecek bir sonraki yönlendirici için tanımlanmamış bir topic_id değeri ile değeriyle yorum gönderiyorsunuz.

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

sorunu yanlış id ile POST verileri gönderme olmasıdır: bu sadece bu yüzden

Sonra form html başlangıç ​​etiketi etrafında {{form}} etiketleri kurtulmak. Bazı console.log ifadelerini kullanın ve gerekirse sorunu daha fazla yalıtmaya çalışın.

+0

Giriş alanımı tıpkı yukarıdaki gibi ayarladım. Hangi konu için yeni bir yorum oluşturduğum önemli değil, her zaman birinciye gönderilecek. –

+0

Orijinal postanızı 'show.html' göstermek için düzenleyebilir misiniz? – roflmyeggo

+0

Eklendi –

İlgili konular