Question

我还是Express.js的新手。我有一个关于将表单数据发送到现有模板的问题。我有两个路由，其中包含与之关联的模板视图。一个页面上有一个表单，我想从该表单中获取输入以填充另一个路径的另一个模板。我正在使用Hanglebars作为我的模板引擎。

我在这里找到了很多有用的答案（特别是Cannot POST form node.js - express），但没有一个能够回答我的问题。

我知道如何发布以创建包含表单数据的新页面。像这样：

router.post('/game', function(req, res) {
  res.send(req.body.username);
});

但如何让req.body.username可以使用把手模板？我一直在阅读各种教程，看起来我需要在app.use('/game', game);中使用next（）做一些事情。但我对这究竟是什么感到迷茫。

这是我的代码的简化版本。

我的主服务器文件：

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var http = require('http').Server(app);
var path = require('path');
var io = require('socket.io')(http);
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

var routes = require('./routes/index');
var game = require('./routes/game');

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/game', game);

// view engine setup
app.set('views', path.join(__dirname, 'views'));

http.listen(3000, function(){
  console.log('listening on *:3000');
});

我的路线档案“index.js”：

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', {
      title: 'Pick a Player',
  });
});

module.exports = router;

这是index.handlebars上的表单（只是表单）：

<form method="post" action="/game" novalidate name="pick-a-player" id="pickAPlayer" class="form-box">
 <p>What is your name?</p>
 <input type="text" name="username" placeholder="name">
 <p>Please select a player</p>
 <label>
     <input type="radio" name="player" value="Jane" checked> Jane<br>
     <input type="radio" name="player" value="Sue"> Sue<br>
     <input type="radio" name="player" value="Anne"> Anne<br>
 </label>
 <input type="submit" value="Start the game" id="submitCharacterForm">
</form>

我知道我需要使用post来通过req.body获取数据。但我通过.get（）获取模板。怎么让两人沟通？

这是game.js的路线

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var router = express.Router();

/* GET Game page. */
router.get('/', function(req, res) {
  res.render('game', {
      title: 'Let's Play',
      username: req.body.username,
      player: req.body.player
  });
});

module.exports = router;

当在game.handlebars上调用玩家的值时，它看起来像这样：

<p class="player-card">{{player}}</p>

Answer 1

如果我理解正确，主表单将在请求正文中包含两个值：username和player。

此表单会根据您的表单块向POST发出/game个请求：

<form method="post" action="/game" ...>

您使用以下路由处理程序处理此POST请求：

router.post('/game', function(req, res) {
  res.send(req.body.username);
});

您想要将username和player值发送到game模板吗？

如果我理解正确，您可以res.redirect with data或只是使用数据呈现不同的视图：

router.post('/game', (req, res) => {
  const { username, player } = req.body
  res.render('play-game', { username, player });
});

使用express js将表单数据传递到新页面

1 个答案: