2017-01-27 5 views
1

Ich versuche, eine einfache Webanwendung in node.js zu schreiben, die es einem Benutzer ermöglicht, Daten in eine Suchleiste einzugeben und dann die Eingabe an den Server zu senden, der die Datenbank mit der vom Benutzer generierten Eingabe abfragt . Ich habe bereits meine Datenbank eingerichtet und verbunden, aber hier ist mein Code:Suchdatenbank | NodeJS, Express, HTML

SERVER

var express = require('express'); 
var sql = require('mysql'); 
var app = express(); 

//Configure application 
app.set('views',__dirname + '/views'); //Set views directory 
app.use(express.static(__dirname + '/JS')); 
app.set('views engine', 'ejs'); //Set view engine to ejs 
app.engine('html', require('ejs').renderFile); 
app.use(function(req, res, next){ //Set no cache for the server 
    res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate'); 
    res.header('Expires', '-1'); 
    res.header('Pragma', 'no-cache'); 
    next(); 
}) 

//Connect to mySQL database 
var db = sql.createConnection({ 
    host: 'localhost', 
    user: 'root', 
    password: 'root', 
    database: 'homeDB' 
}); 
db.connect(function(err){ 
    if(err){console.log('there was an error connecting to the database' + err);} 
}) 

//Set up routers (request handlers) 

//Return home page when root('/') is requsted 
app.get('/', function(req, res){ 
    res.render('index.html'); 
}); 

app.get('/search', function(req, res){ //GET method to access DB and return results in JSON 
    db.query('SELECT * FROM products WHERE product LIKE "%' + req.query.key + '%"', 
    function(err, rows, fields){ 
    if(err) throw err; 
    var data = []; 
    for(i=0;i<rows.length;i++){ 
     data.push(rows[i].product); 
    } 
    res.end(JSON.stringify(data)); 
    }); 
}); 

app.get('/typeahead.bundle.js', function(req, res){ //When typeahead is requested, send it to client 
var fileName = './typeahead.bundle.js'; 
    var options = { 
    cacheControl: false, 
    root: __dirname 
    } 
    res.sendFile(fileName, options, function(err){ 
    if(err){ 
     console.log('there was an error sending ' + fileName + err); 
     res.status(err.status).end(); 
    }else{console.log('Sent! ' + fileName);} 
    }); 
}); 

app.post('/search', function(req, res){ //POST method to access DB and return results in JSON 
    db.query('SELECT * FROM products WHERE product LIKE "%' + req.params.input + '%"', 
    function(err, rows, fields){ 
    if(err) throw err; 
    var data = []; 
    for(i=0;i<rows.length;i++){ 
     data.push(rows[i].product); 
    } 
    res.end(JSON.stringify(data)); 
    console.log(req.params.input); 
    }); 
}); 

var server = app.listen(3000, function(){ //Start the server on port 3000 
    console.log('server has started on localhost:3000...') 
}); 

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Express Application</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="/typeahead.bundle.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <h1>Thank you for connecting to my server!</h1> 

    <form class="search" action="typeahead" method="post"> 
     <input class="form-control typeahead tt-query" type="text" name="input" placeholder="Search"> 
     <input class="btn btn-primary" type="submit" name="input" value="Submit"> 
    </form> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('input.typeahead').typeahead({ 
      name: 'typeahead', 
      remote: 'http://localhost:3000/search?key=%QUERY', 
      limit: 10 
     }); 
     }); 
    </script> 
    </body> 
</html> 

Jetzt habe ich alle meine Router und Middleware-Setup in Knoten, aber ich kann nicht herausfinden, wie einfach die Benutzereingaben an den Server gesendet werden. Ich habe versucht, den "req.query.key" zu verwenden, um den Wert der Sucheingabe zu erhalten, der aber in meinem Fall als undefiniert zurückkommt. Gibt es also tatsächlich den Text über die Variable 'req.query.key', auch gibt es eine 'konventionelle' Methode, eine einfache Datenbanksuchleiste zu erstellen?

P.S. Ich bin immer noch sehr neu in der Programmierung in Express und Node.js als Ganzes, also wenn Sie irgendwelche üblichen Fehler oder "schlampigen" Code sehen, würde ich gerne Ihre Rückmeldung hören. mit npm Körper-Parser, anstelle von req.params.key

Antwort

0

Sie bekommen können Sie req.body.input setzen (wo Eingang der Name des Eingabeelements). diesen

Put:

app.use(bodyParser.urlencoded({ 
    extended: true 
})); 

Bevor Sie Ihre Template-Engine-Konfiguration (vor Ihren Ansichten Einstellung)

+0

Dies funktioniert, sah den Körper-Parser docs auf, bekam es einrichten und meine Anwendung ist jetzt Rückgabe von Feldern aus meiner Datenbank. Vielen Dank! –

0

Haben Sie versucht, die params in der folgenden Art und Weise versuchen

var key = request.options.key || (request.options.where && request.options.where.key) || request.param('key');