معالجة بيانات الإدخال بتنسيق Express.js

عند إنشاء تطبيقات الويب ، يعد التعامل مع بيانات إدخال المستخدم جانبًا مهمًا لإنشاء ميزات تفاعلية ومرنة. في بيئة التطوير ، 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 الطلبات ، استخدم أيضًا المسار والبرمجيات الوسيطة لتحديد المعرّف وإجراء الحذف.

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