• 0

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

سوف نحتاج لمكتبة 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 لأنه مخدم قوي و سريع ولديه العديد من الميزات، سوف يسهل و ينظم العمل. 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

في حالة كنت ترسل البيانات عن طريق 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); 
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكن أن تكون قراءة البيانات من طلب 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 العادية تمر عبر نفس مسار الكود. في تطبيق أكثر واقعية ، سيكون من المناسب التحقق من نوع الطلب والتعامل مع أنواع الطلبات المختلفة بشكل مختلف.

Animation.thumb.gif.ba6dd44e6fceafec5d009b4df3fea2da.gif

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن