构建 Web 应用程序时,处理用户输入数据是创建交互式和灵活功能的关键方面。 在 Express.js 开发环境中,您可以轻松处理来自表单的输入数据以及各种 HTTP 请求,例如 GET、 POST、 PUT、 PATCH、 DELETE。 以下是包含多种方法和示例的详细指南,可帮助您实现这一目标:
接收信息来自 Form
创建 HTML Form: form 首先在 Pug 或 EJS 文件中 创建 HTML。 确保您 action
在 <form>
标记中设置属性以指定请求将发送到的路由。
<form action="/process" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
处理 POST 请求: 在路由处理程序中,利用 body-parser
中间件从请求中提取数据 POST。
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/process',(req, res) => {
const username = req.body.username;
const password = req.body.password;
// Process data and return results
});
使用登录示例处理各种请求类型
从登录发送 POST 请求 Form: 在 HTML 中 form,确保设置 post
方法和属性来指定 发送请求的 action
路由。 POST
<form action="/login" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
处理 POST 登录请求: 在路由处理程序中,使用 body-parser
中间件从请求中提取数据 POST 并执行登录处理。
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/login',(req, res) => {
const username = req.body.username;
const password = req.body.password;
// Check login information
if(username === 'admin' && password === '123') {
res.send('Login successful!');
} else {
res.send('Login failed!');
}
});
处理 PUT 和 DELETE 请求
处理 PUT 请求: 为了处理 PUT 请求,您可以使用路由和中间件从请求中提取数据并执行相应的更新。
app.put('/update/:id',(req, res) => {
const id = req.params.id;
const updatedData = req.body;
// Perform data update with corresponding ID
});
处理 DELETE 请求: 处理 DELETE 请求,同样需要使用路由和中间件来识别ID并进行删除。
app.delete('/delete/:id',(req, res) => {
const id = req.params.id;
// Perform data deletion with corresponding ID
});
结论
了解如何处理用户输入数据和各种 HTTP 请求对于 Web 开发至关重要。 通过使用 Express.js 和 等中间件 body-parser
,您可以轻松处理表单输入并处理不同的 HTTP 请求,包括 GET、 POST、 PUT、 PATCH 和 DELETE。 这使您能够在网站上创建交互式且灵活的功能。