เมื่อสร้างเว็บแอปพลิเคชัน การจัดการข้อมูลที่ป้อนเข้าของผู้ใช้เป็นสิ่งสำคัญในการสร้างคุณลักษณะแบบโต้ตอบและยืดหยุ่น ใน Express.js สภาพแวดล้อมการพัฒนา คุณสามารถประมวลผลข้อมูลอินพุตจากแบบฟอร์มและคำขอ HTTP ต่างๆ เช่น GET, POST, PUT, PATCH และ DELETE และ ต่อไปนี้เป็นคำแนะนำโดยละเอียดพร้อมวิธีการและตัวอย่างต่างๆ เพื่อช่วยให้คุณบรรลุเป้าหมายนี้:
รับข้อมูลจาก Form
การสร้าง HTML Form: เริ่มต้นด้วยการสร้าง HTML form ในไฟล์ Pug หรือ EJS ตรวจสอบให้แน่ใจว่าคุณตั้ง 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 ต่างๆ เป็นสิ่งสำคัญในการพัฒนาเว็บ ด้วยการใช้ Express.js มิดเดิลแวร์ เช่น body-parser
คุณสามารถประมวลผลอินพุตจากฟอร์มและจัดการคำขอ HTTP ต่างๆ รวมถึง GET, POST, PUT, PATCH และ DELETE และ สิ่งนี้ทำให้คุณสามารถสร้างคุณลักษณะแบบโต้ตอบและยืดหยุ่นบนเว็บไซต์ของคุณได้