السلام عليكم
مرحبا بكم في الدرس الخامس من @nodejs في درس اليوم سنتعرف على امور جديدة مثل Static File و Dynamic content وغيرها من المعلومات المفيدة
@khaliidviip @m0kama1 @programmingwa
مرحبا بكم في الدرس الخامس من @nodejs في درس اليوم سنتعرف على امور جديدة مثل Static File و Dynamic content وغيرها من المعلومات المفيدة
@khaliidviip @m0kama1 @programmingwa
لكن قبل ذالك اذا كنت مهتم بمجال البرمجة بصفة عامة او بمجال برمجة المواقع والتطبيقات بصفة خاصة فلا تنسى تعملي فولو @capsuleprog لكي يصلك جديد ثريداتي القادمة .
كيفية تحديد Static folder
اولا لماذا نحتاج ل Static Folder او فولدر ثابث هذا الفولدر غالب ما يكون اسمه static او public هذه الملفات نضع فيه الملفات الثابثة التي لا تتغير كمثال ملفات Bootstrap او ملفات الخطوط او الايقونات او الصور او ملفات جكويري وغيرها من الامور لنقوم بتحديد
اولا لماذا نحتاج ل Static Folder او فولدر ثابث هذا الفولدر غالب ما يكون اسمه static او public هذه الملفات نضع فيه الملفات الثابثة التي لا تتغير كمثال ملفات Bootstrap او ملفات الخطوط او الايقونات او الصور او ملفات جكويري وغيرها من الامور لنقوم بتحديد
ال Static File يجب ان نخبر السيرفر ان هذه الملف ثابث ولتحديده مساره الامر صعب مثلا يمكن تحديد مساره عن طريق __dirname كما راينا في الدروس السابقة , dirname يعطينا مسار الملف الرئيسي وهو server.js وبعدها لتحديد المسار يمكن وضع dirname/stitcs لكن هنا الامر سيشتغل على ويندوز فقط
لان الينكس تعتمد على back slash هذا \ ولم قمنا بعمل هذا فالامر لن يشتغل على ويندوز اذن ما هو الحل , الحل هو الاعتماد على packages تسهل علينا الامر اسمها path , لتنصيبها
npm install path
وسيتم تنصيبها في ملف package.json , الان لتحديد الملفات الثابثة الامر سهل اولا لنقم بعمل
npm install path
وسيتم تنصيبها في ملف package.json , الان لتحديد الملفات الثابثة الامر سهل اولا لنقم بعمل
اسمه مثلا statics قم بانشائه بجانب فايل server.js بعد نقوم باستدعاء path packages بعدها نقوم بعمل middleware عن طريق app.use ونعطيها function في express وهي .static() ثم نقوم بعمل Join لل path ونضيف اليه __dirname وهي تعطينا مسار server.js وبعدها نضيف له statics يعني
ال statics موجود بجانب server.js , الامر جيد الان سنتعرف على كيفية استدعاء ملف Html في اكسبريس اولا لنقم باشناء ملف views بجانب server.js بعدها قم بانشاء فيه ملف index.html وضع فيه مثلا الكود التالي . قمنا بالذهاب الى statics وقمت بانشاء فولدر فيه سميته img ووضعت فيه صورة
اسمها node.png وقمت باستدعائها في ملف Html كما ترون في الصورة اعلاه , هناك سؤال الان يجب ان تقوم بطرحه , لماذا في مصار الصورة وضعت img/node.png وليس statics/img/node.png , الجواب هو انه وضعنا statics كملف ثابث ولا يجب استدعائه في المصار هو يعرف انه هناك فولدر اسمه Img وسط statics
هل فهمت الان اهمية وضع ال Statics folder ؟ اذن لنتمم لاستدعاء ملف Html في Express , كما ترون قمنا بعمل routing من نوع app middleware على مسار / واستخدمنا function في res وهي sendFile تستخدم لارسال الملفات وقمن باستخدمها لارسال ملف index.html وحددنا المسار عن طريق path.join() .
وسيتم تشغيل ملف index.html في مسار / . وفي الدرس القادم سنتعرف على Template Engine وهو EJS لانشاء صفحات دينامكية .
جاري تحميل الاقتراحات...