كيفية إستخدام node.js للتعامل مع البيانات القادمة

محمد هاني3 · 18 مايو 2021

كيف يمكنني الحصول و التعامل مع البيانات القادمة من الفرونت اند من خلال نموذج (form) باستخدام node.js أنا لا أستخدم express فقط node.js

Wael Aljamal · 18 مايو 2021

سوف نحتاج لمكتبة querystring لفصل المدخلات عن طريق parser حيث تكون بالشكل التالي:

fname=Jermaine&age=29&photo=jermaine-photo.png
              ^      ^

يوجد إشارة & تفصل بين المدخلات..

وسنذكر مثال عن طريقة POST:

const http = require('http');
const { parse } = require('querystring');

const server = http.createServer((req, res) => {

    if (req.method === 'POST') {  // اذا كانت الطريقة post
        collectRequestData(req, result => { // معالجة المدخلات
            console.log(result);
            res.end(`Parsed data belonging to ${result.fname}`); // الرد وهو اختياري
        });
    }

وليكن لدينا call back funtion:

function collectRequestData(request, callback) {
    const FORM_URLENCODED = 'application/x-www-form-urlencoded';

    if(request.headers['content-type'] === FORM_URLENCODED) { // التحقق من نوع البيانات
        let body = '';
        request.on('data', chunk => {  // قراءة البيانات
            body += chunk.toString();
        });
        request.on('end', () => {
            callback(parse(body));  // إعادة البيانات
        });
    }
    else {
        callback(null); // حدوث خطأ
    }
}

وكمثال آخر لتحويل البيانات لJSON:

function (req, res) {
    body = '';

    req.on('data', function (chunk) {
        body += chunk;
    });

    req.on('end', function () {

       var postBody = JSON.parse(body);

        var response = {
            "text": "Post Request Value is  " + postBody.value
        };

        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.end(response);
    });
};

لاحظ أن الحدث:

req.on('data'

يدل على وجود بيانات أما الحدث:

req.on('end'

يعني نهاية قراءة المدخلات لذلك نستكمل العمل على منطق البرنامج في هذا الجزء.

يفضل دوما استخدام express لأنه مخدم قوي و سريع ولديه العديد من الميزات، سوف يسهل و ينظم العمل.

محمد أيت لعرايك · 18 مايو 2021

في حالة كنت ترسل البيانات عن طريق ajax request من frontend إلى backend و تود معالجة هده البيانات بواسطة expressJS فعليك أولا إرسال البيانات كالتالي:


var xhr = new XMLHttpRequest();
xhr.open("POST", '/create', true);


xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // استدعاء الدالة عندما تتغير الحالة.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// انتهى الطلب ، والمعالجة هنا.
    }
}
// إرسال الطلب
xhr.send("foo=bar&lorem=ipsum");

ثم على جانب الخادم ، تحتاج إلى إضافة برمجية وسيطة تمكنك من إستقبال ومعالجة البيانات

var express=require("express");
var bodyParser=require("body-parser");

var app=express();


app.use(bodyParser.urlencoded({extended: true}))


app.use(bodyParser.json());

app.post('/create', function(req, res){ 
  
// هنا سيتم إستقبال البيانات اللتي تم إرسالها
// ويمكنك معالجتها بالكيفية اللتي تريد
console.log(req.body); 
});

Salah Eddin Beriani2 · 19 مايو 2021

يمكن أن تكون قراءة البيانات من طلب POST (أي إرسال نموذج) أمرًا صعبًا بعض الشيء في Node.js ، لذلك سنستعرض مثالاً عن كيفية القيام بذلك بشكل صحيح. من الواضح أن الخطوة الأولى هي الاستماع إلى البيانات الواردة و الحيلة هي الانتظار حتى تنتهي البيانات ، حتى تتمكن من معالجة جميع بيانات النموذج دون فقد أي شيء.

const http = require('http');
const postHTML =
  '<html><head><title>Post Example</title></head>' +
  '<body>' +
  '<form method="post">' +
  'Input 1: <input name="input1"><br>' +
  'Input 2: <input name="input2"><br>' +
  '<input type="submit">' +
  '</form>' +
  '</body></html>';

http.createServer(function (req, res) {
  const body = "";
  req.on('data', function (chunk) {
    body += chunk;
  });
  req.on('end', function () {
    console.log('POSTed: ' + body);
    res.writeHead(200);
    res.end(postHTML);
  });
}).listen(8080);

المتغير postHTML عبارة عن سلسلة ثابتة تحتوي على HTML لاثنين من مربعات الإدخال ومربع إرسال - يتم توفير HTML هذا بحيث يمكنك دفع نموذج البيانات. هذه ليست الطريقة الصحيحة لخدمة HTML ثابت يرجى الاطلاع على كيفية خدمة الملفات الثابتة للحصول على مثال أكثر ملاءمة.

مع خروج HTML عن الطريق نقوم بإنشاء خادم للاستماع إلى الطلبات من المهم ملاحظة عند الاستماع إلى بيانات POST أن الكائن req هو أيضًا مصدر حدث. وبالتالي ستصدر req حدث بيانات كلما تم تلقي "جزء" من البيانات الواردة في حالة عدم وجود المزيد من البيانات الواردة يتم إصدار حدث النهاية لذلك في حالتنا نستمع إلى أحداث البيانات بمجرد استلام جميع البيانات نقوم بتسجيل البيانات إلى وحدة التحكم وإرسال الرد.

شيء مهم يجب ملاحظته هو أنه تتم إضافة مستمعي الحدث فور استلام كائن الطلب. إذا لم تقم بتعيينها على الفور ، فهناك احتمال أن تفوت بعض الأحداث. على سبيل المثال ، إذا تم إرفاق مستمع حدث من داخل رد اتصال ، فقد يتم تشغيل البيانات وأحداث النهاية في هذه الأثناء دون إرفاق مستمعين

يمكنك حفظ هذا البرنامج النصي في server.js وتشغيله مع node server.js. بمجرد تشغيله ، ستلاحظ أنه في بعض الأحيان سترى سطورًا بدون بيانات و يحدث هذا لأن طلبات GET العادية تمر عبر نفس مسار الكود. في تطبيق أكثر واقعية ، سيكون من المناسب التحقق من نوع الطلب والتعامل مع أنواع الطلبات المختلفة بشكل مختلف.