javascript - 根据输入使用快速车把显示列表
问题描述
我想根据用户输入在一个简单的网页上显示愿望清单项目列表 1.do sth 2.do another 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>
我正在尝试将所有用户输入添加到列表中,并使用句柄栏显示它,我错过了什么吗?
解决方案
您需要在表单中添加方法属性 - 如果您不指定方法,您的表单将被提交到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 });
});
推荐阅读
- sql - 选择具有唯一列值的行
- ios - 用颤振在 iPhone 上运行程序
- android - MacOS Catalina 更新后 AVD 崩溃 qemu-system-i386 意外退出
- javascript - SVG没有得到类或转换
- python - 用于跟踪多个变量的 Tkinter 回调函数
- javascript - 当客户端不在范围内时如何在 NodeJS 中更新 mongoDB
- html - css 打字眨眼动画
- c - 使用冒泡排序对结构数组进行排序时的警告
- azure-devops - 为什么多阶段 Azure Devops 管道中的环境下的更改和工作项页面为空?
- javascript - Material ui - 无法设置从选择验证器打开的弹出菜单的高度