在用户输入表单后显示数据(mysql-nodejs)
Display data after user input form (mysql-nodejs)
我有一个页面,其中有一个表单,用户将在其中填写输入。然后,我重定向到另一个页面,其中根据用户的选择将显示一些数据(数据将来自 mysql 数据库)。这是我的代码:
index.js(这是我的路线)
var express = require('express');
var router = express.Router();
// Controllers
const airTicketsController = require('../controllers/airTicketsController');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('home', { title: 'Express' });
});
// Air tickets page
router.get('/air_tickets', function(req, res, next) {
res.render('air_tickets', { title: 'Air tickets' });
});
router.post('/form-submit', airTicketsController.airForm);
router.get('/air_ticketsSelect', airTicketsController.displayFlights);
module.exports = router;
airTicketsController.js(将执行 mysql 查询的控制器)
const mysql = require('mysql');
// DB connection
const connection = mysql.createConnection({
host: 'localhost',
user: 'myuser',
password: 'mypassword',
database: 'mydatabase'
});
connection.connect(function(error) {
if (!!error) console.log(error);
else console.log('CONGRATS! Database Connected! (airTicketsController)');
});
var variable1, variable2;
exports.airForm= (req, res) => {
variable1 = req.body.from_destination;
variable2 = req.body.to_destination
res.redirect('/air_ticketsSelect');
}
exports.displayFlights= (req, res) => {
variable1 = req.body.from_destination;
variable2 = req.body.to_destination
connection.query("SELECT * FROM flight WHERE from_destination=? AND to_destination=?", [variable1, variable2], function(err, results, fields) {
if (err) throw err;
res.render('air_ticketsSelect', {
title: 'flightdata',
data: results
});
});
}
air_tickets.ejs(表格页面)
<form id="form-submit" method="post" action="form-submit">
<div class="container" id="air-form-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="from_destination">From: </label>
<br>
<input type="text" name="from_destination" class="form-control" placeholder="City or airport">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="to_destination">To: </label>
<br>
<input type="text" name="to_destination" class="form-control" placeholder="City or airport">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-btn">
<button type="submit" class="btn btn-primary" id="submit-btn">Search flights
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</form>
air_ticketsSelect.ejs(显示数据的页面)
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Id</th>
<th>Airline</th>
<th>From</th>
<th>To</th>
<th>Depart date</th>
<th>Arrival date</th>
<th>Depart time</th>
<th>Arrival time</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<% data.forEach(function(flight){ %>
<tr>
<td>
<%= flight.flight_id %>
</td>
<td>
<%= flight.airline %>
</td>
<td>
<%= flight.from_destination %>
</td>
<td>
<%= flight.to_destination %>
</td>
<td>
<%= flight.depart_date.toLocaleDateString('el-GR') %>
</td>
<td>
<%= flight.arrival_date.toLocaleDateString('el-GR') %>
</td>
<td>
<%= flight.depart_time %>
</td>
<td>
<%= flight.arrival_time %>
</td>
<td>
<%= flight.flight_price + ' €' %>
</td>
</tr>
<% }); %>
</tbody>
</table>
总的来说,我认为这应该可行。但是,它不显示数据,只有一个空 table。如果我手动进行查询(例如 SELECT * FROM flight WHERE from_destination = 'Paris' AND to_destination = 'London'),它将正常工作。
当我 console.log 查询时,它说:
sql: 'SELECT * FROM flight WHERE from_destination=NULL AND to_destination=NULL',
值:[未定义,未定义]
你错误地重复定义了变量。
在 exports.displayFlights
中,无需再次初始化变量,删除这两行即可解决您的问题。
因为 exports.displayFlights
中没有 req.body
,您的变量正在初始化为 undefined
。
我有一个页面,其中有一个表单,用户将在其中填写输入。然后,我重定向到另一个页面,其中根据用户的选择将显示一些数据(数据将来自 mysql 数据库)。这是我的代码:
index.js(这是我的路线)
var express = require('express');
var router = express.Router();
// Controllers
const airTicketsController = require('../controllers/airTicketsController');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('home', { title: 'Express' });
});
// Air tickets page
router.get('/air_tickets', function(req, res, next) {
res.render('air_tickets', { title: 'Air tickets' });
});
router.post('/form-submit', airTicketsController.airForm);
router.get('/air_ticketsSelect', airTicketsController.displayFlights);
module.exports = router;
airTicketsController.js(将执行 mysql 查询的控制器)
const mysql = require('mysql');
// DB connection
const connection = mysql.createConnection({
host: 'localhost',
user: 'myuser',
password: 'mypassword',
database: 'mydatabase'
});
connection.connect(function(error) {
if (!!error) console.log(error);
else console.log('CONGRATS! Database Connected! (airTicketsController)');
});
var variable1, variable2;
exports.airForm= (req, res) => {
variable1 = req.body.from_destination;
variable2 = req.body.to_destination
res.redirect('/air_ticketsSelect');
}
exports.displayFlights= (req, res) => {
variable1 = req.body.from_destination;
variable2 = req.body.to_destination
connection.query("SELECT * FROM flight WHERE from_destination=? AND to_destination=?", [variable1, variable2], function(err, results, fields) {
if (err) throw err;
res.render('air_ticketsSelect', {
title: 'flightdata',
data: results
});
});
}
air_tickets.ejs(表格页面)
<form id="form-submit" method="post" action="form-submit">
<div class="container" id="air-form-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="from_destination">From: </label>
<br>
<input type="text" name="from_destination" class="form-control" placeholder="City or airport">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="to_destination">To: </label>
<br>
<input type="text" name="to_destination" class="form-control" placeholder="City or airport">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-btn">
<button type="submit" class="btn btn-primary" id="submit-btn">Search flights
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</form>
air_ticketsSelect.ejs(显示数据的页面)
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Id</th>
<th>Airline</th>
<th>From</th>
<th>To</th>
<th>Depart date</th>
<th>Arrival date</th>
<th>Depart time</th>
<th>Arrival time</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<% data.forEach(function(flight){ %>
<tr>
<td>
<%= flight.flight_id %>
</td>
<td>
<%= flight.airline %>
</td>
<td>
<%= flight.from_destination %>
</td>
<td>
<%= flight.to_destination %>
</td>
<td>
<%= flight.depart_date.toLocaleDateString('el-GR') %>
</td>
<td>
<%= flight.arrival_date.toLocaleDateString('el-GR') %>
</td>
<td>
<%= flight.depart_time %>
</td>
<td>
<%= flight.arrival_time %>
</td>
<td>
<%= flight.flight_price + ' €' %>
</td>
</tr>
<% }); %>
</tbody>
</table>
总的来说,我认为这应该可行。但是,它不显示数据,只有一个空 table。如果我手动进行查询(例如 SELECT * FROM flight WHERE from_destination = 'Paris' AND to_destination = 'London'),它将正常工作。
当我 console.log 查询时,它说:
sql: 'SELECT * FROM flight WHERE from_destination=NULL AND to_destination=NULL',
值:[未定义,未定义]
你错误地重复定义了变量。
在 exports.displayFlights
中,无需再次初始化变量,删除这两行即可解决您的问题。
因为 exports.displayFlights
中没有 req.body
,您的变量正在初始化为 undefined
。