根据输入使用快速车把显示列表

Question

我想根据用户输入在一个简单的网页上显示愿望清单项目的列表1.做某事2.再做一次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 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 });
});