【发布时间】:2021-03-18 05:30:43
【问题描述】:
我正在使用带有 Express 和 EJS 作为模板引擎的 Node.js 开发一个网站,但我无法从网站上的表单中获取数据。这是我的代码:
app.js
//app.js
'use strict';
var debug = require('debug');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
var app = express();
const { getSearchPage, search } = require('./routes/search');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function () {
debug('Express server listening on port ' + server.address().port);
});
app.get('/search', getSearchPage);
app.post('/search', search);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
搜索.js
//search.js (in routes folder)
module.exports = {
getSearchPage: (req, res) => {
res.render('search.ejs');
},
search: (req, res) => {
var artist = req.body.searchArtist;
var song = req.body.searchSong;
var genre = req.body.searchGenre;
var decade = req.body.searchDecade;
console.log("The variables from the page: ", req.body, artist, song, genre, decade); //logs "{} undefined undefined undefined undefined"
if (song) {
//query the database and return some results
}
res.render('search.ejs', { outputArray: outputArray });
}
}
搜索.ejs
<!DOCTYPE html>
<html lang="en" and dir="Itr">
<head>
<meta charset="utf-8">
<title>Home</title>
<!--link rel="stylesheet" href="css/search.css"-->
<script src="https://kit.fontawesome.com/9b28d88510.js" crossorigin="anonymous"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div class="search-box">
<input class="search-txt" type="text" name="searchSong" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="search-box2">
<input class="search-txt2" type="text" name="searchArtist" placeholder="Type to search">
<a class="search-btn2" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="search-box3">
<input class="search-txt3" type="text" name="searchGenre" placeholder="Type to search">
<a class="search-btn3" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="search-box4">
<input class="search-txt4" type="text" name="searchDecade" placeholder="Type to search">
<a class="search-btn4" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<button type="submit">Search!</button>
</form>
<% if(typeof outputArray != 'undefined'){%>
<ul>
<% outputArray.forEach(function(song) { %>
<li><%= song %></li>
<% }); %>
<% } %>
</ul>
</body>
</html>
我尝试将 urlencoded({extended: }) 设置为 true 和 false,我尝试将表单类型更改为 application/x-www-form-urlencoded,我尝试将帖子更改为 get ,我已经确定我已经安装了 body-parser,我已经尝试将路由放在服务器声明之前。我已经阅读了这里关于同一问题的大部分页面,但这些修复都没有对我有用。更令人困惑的是,我几乎完全关注this tutorial,而且我认为我没有错过他们所做的任何事情。这是我第一次使用 Node.js/Express.js/EJS,但我已经阅读了无数关于这个确切主题的论坛帖子,但我仍然无法弄清楚哪里出了问题。
【问题讨论】:
-
你能显示来自浏览器开发工具的请求正文吗?
-
通常顺序如下:模块、设置、中间件、路由、监听器。它可能会解决问题。
-
@Anatoly 我不太确定你的意思。当我 console.log req.body 我只是得到 {}.
-
@MRB 我的意思是行的顺序。所以首先你导入诸如
require('express')之类的模块,然后是app.set(),然后是app.use(),然后是app.get()(路由),最后是app.listen() -
@kmp 我原来是这样的,但我只是试着把所有东西都放回去,还是没有运气
标签: javascript node.js express ejs body-parser