根据输入使用 express handlebar 显示列表

Question

我想根据用户输入在像这样的简单网页上显示愿望清单项目列表 1.do 某事 2.do另一个 3.blhablha

这就是我想要的 index.js

var wishlist = [];
router.post('/', function (req, res, next) {
    var newTask = req.query.fname;
    wishlist.push(newTask);
    res.redirect('/');
});
router.get('/', function (req, res, next) {
  res.render("index", { task:wishlist });
});

这就是我要 index.hbs

<form action="/" >
    <label for="fname">Enter Your Wish:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <input type="submit" value="Make My Wish Come True">
</form>
<div>
    <ol>
    {{#each task}}
        <li>{{this}}</li>
    {{/each}}
    </ol>
</div>

我正在尝试将所有用户输入添加到列表中，并使用手柄显示它，我是否遗漏了什么？

Answer 1

您需要将方法属性添加到表单 - 如果您不指定方法，您的表单将被提交到 GET / 而不是 POST /、

<form action="/" method='POST'>
  <label for="fname">Enter Your Wish:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <input type="submit" value="Make My Wish Come True">
</form>
<div>
  <ol>
    {{#each task}}
    <li>{{this}}</li>
    {{/each}}
  </ol>
</div>

也使用正文解析中间件express.urlencoded()

   const app = express();

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

最终使用req.body代替req.query

app.post("/", function(req, res, next) {
  var newTask = req.body.fname;
  wishlist.push(newTask);
  res.redirect("/");
});

要在会话中存储任务，请使用 express-session express-session guides:

 const express = require("express");
const session = require("express-session");
const app = express();


app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(session({ secret: "gsvsce6252fsd", cookie: { maxAge: 60000 } })); 

app.post("/", function(req, res, next) {
  var newTask = req.body.fname;

  if (req.session.tasks) {
    req.session.tasks.push(newTask);
  } else {
    req.session.tasks = [newTask];
  }
  // wishlist.push(newTask);
  res.redirect("/");
});
app.get("/", function(req, res, next) {
  let wishList = req.session.tasks;
  res.render("index", { task: wishList });
});

根据输入使用 express handlebar 显示列表

Display a list using express handlebar based on input

html

javascript

express

handlebars.js