في التمرين في الدرس السابق،
قمنا ببناء خادم HTTP بسيط يمكن أن يخدم محتوى ثابت،
تم بناء هذا بالكامل باستخدام Node.js.
الآن بعد أن تعلمنا عن Express،
إطار الحد الأدنى الذي يدعم تطوير الخادم على رأس Node.js،
دعونا الآن دراسة كيف يمكننا استخدام Express لبناء نفس الخادم في هذا التمرين.
للبدء، انتقل إلى المجلد Node.js الذي كنا نستخدمه لتخزين
كافة التعليمات البرمجية لهذه الدورة، ثم قم بإنشاء مجلد جديد هناك باسم العقدة express،
ثم انتقل إلى هذا المجلد.
الآن، سنقوم بإنشاء
مجلد عمومي هنا داخل مجلد اكسبرس العقدة.
ثم، سوف نذهب إلى هذا المجلد العمومي HTTP العقدة ومن ثم نسخ هذين الملفين،
index.HTML و aboutus.html إلى المجلد العمومي عقدة إكسبريس.
سنقوم بتقديم هذين الملفين باستخدام
خادم Express الذي سنقوم ببنائه في هذا التمرين.
الآن، الذهاب إلى المحطات.
انتقل إلى مجلد عقدة اكسبرس في المحطة الطرفية ثم في نوع موجه npm init،
لتهيئة تطبيق عقدة.
ثم، بالنسبة لاسم الحزمة، دعنا فقط نستخدم
العقدة express، وللوصف سنقول Node Express Express Express
،
ونقطة الإدخال هي index.js، وكل
ما تبقى من ذلك كما كان من قبل، ودعونا إنشاء ملف package.json.
الآن، اسمحوا لي
أن فتح المشروع باستخدام محرر فيسوال ستوديو كود في
حالتي وبعد ذلك، في ملف package.json دعونا نذهب وإضافة في البرنامج النصي الجديد يسمى بداية،
وهو مؤشر عقدة وحفظ التغييرات.
الآن، بعد أن قمنا بتهيئة وحدة العقدة،
دعنا نمضي قدما وتثبيت إطار Express داخل
المشروع للاستفادة منه لبناء الخادم السريع لدينا.
لذلك، في موجه،
اكتب npm install express.
لذلك هذه هي الطريقة التي سيتم تثبيت
وحدة عقدة طرف ثالث إذا كنت تأخذ هذه
الدورة للمرة الأولى ولم تأخذ الدورات السابقة
ثم وهذا هو الشيء الذي من المهم أن نلاحظ.
هذه هي الطريقة التي سيتم تثبيت وحدة عقدة عن طريق إضافة ناقص حفظ،
ونحن أيضا حفظ المعلومات أن
هذه الوحدة عقدة طرف ثالث هو التبعية
لمشروعنا وسيتم حفظ هذه المعلومات في ملف package.json.
إذا كنت قد أخذت الدورات السابقة من التخصص،
ثم كنت تعرف بالفعل عن هذه المعلومات.
لذلك، دعونا المضي قدما وتثبيت وحدة اكسبرس.
كما يمكنك ملاحظة،
نحن نستخدم الإصدار السريع 4.16.3 في هذه الدورة.
لذلك، دعونا نعود الآن إلى رمزنا.
إلقاء نظرة على ملف package.json،
ترى أنه داخل ملف package.json عن طريق تثبيت Express نرى بالفعل
خاصية أخرى يتم تضمينها في ملف package.json يسمى التبعيات.
تتبع هذه التبعيات جميع الحزم
التي سيعتمد عليها هذا المشروع الحالي.
هنا ترى Express يتم تثبيته
هناك والإصدار المقابل من Express يتم تثبيته هنا،
لذلك هذا يعلن أن هذا المشروع معين
يعتمد على إصدار Express 4.16.3 على الأقل.
بالإضافة إلى ذلك، سترى أيضًا هذا المجلد الذي يسمى وحدات العقدة التي تم إنشاؤها هنا.
لذلك هذا هو المكان الذي
سيتم تخزين جميع وحدات عقدة طرف ثالث التي تم تثبيتها بواسطة التطبيق الخاص بك.
الآن، عندما نقوم بتنفيذ Git،
لا نريد ارتكاب مجلد وحدات العقدة هذا.
لذلك لتجاهل ذلك،
يتيح إنشاء ملف
اسم.gitignore وداخل ملف.gitignore،
دعونا نكتب في وحدات node_.
لذا، هذا هو السماح لـ Git بمعرفة أننا لا نرغب
في الالتزام بمجلد وحدات العقدة إلى مستودع Git.
لذلك، مع هذا دعونا حفظ التغييرات.
حتى الآن عند إنشاء مستودع Git،
سيتم تجاهل مجلد وحدات العقدة.
غير مطلوب لأنه يمكنك دائمًا إعادة إنشاء مجلد وحدات العقدة في أي وقت
تقوم فيه باستنساخ هذا المشروع من مستودع Git الخاص بك ببساطة عن طريق كتابة npm install.
سينظر هذا إلى ملف package.json،
وإلقاء نظرة على جميع التبعيات،
وتبعيات التطوير الموجودة في
ملف package.json ويتم تثبيت جميع هذه الحزم تلقائيًا لك.
الآن، بعد أن
أكملنا هذا، دعونا إنشاء أول مشروع إكسبريس لدينا،
وذلك للقيام بذلك سنقوم بإنشاء ملف باسم index.js وفي index.js
سنعلن عن كونست اكسبرس تتطلب صريحة.
الآن، ستلاحظ أن Express هو وحدة عقدة تابعة لجهة خارجية وقد تم
تثبيته في مجلد وحدات العقدة في الدليل الصحيح.
لذلك، عندما نعلن هذا هنا قائلا أن هذه الوحدة Express مطلوبة،
ثم سيتم تضمينها تلقائيا من مجلد وحدات العقدة في تطبيقنا.
الآن، أيضا تثبيت هتب
الوحدة الأساسية هنا.
الآن، بعد أن قمنا بتثبيت هذا،
دعونا إنشاء اسم الدورة
كمضيف محلي ورقم المنفذ كـ 3000.
لذلك ترى أننا نستخدم بالضبط نفس الطريقة للقيام
بهذا التمرين كما فعلنا في تمرين HTTP في وقت سابق.
الآن، في هذه المرحلة،
سوف نعلن هذا const يسمى التطبيق كما صريحة.
بهذه الطريقة، نحن نقول أن تطبيقنا سيستخدم وحدة عقدة Express.
لذا، بمجرد القيام بذلك
، يوفر Express مجموعة من الطرق التي يمكننا استخدامها لبناء خادم الويب الخاص بنا.
حتى بعد هذا، سوف نقول app.use () وداخل هنا،
وسوف نعلن وظيفة التي سيتم استدعاؤها لإعداد الخادم لدينا.
لذا، تأخذ هذه الوظيفة ثلاث معلمات req،
وهو الطلب؛ res،
وهو الاستجابة، والقادم.
الآن، كما رأينا إكسبريس يستخدم الوسيطة إضافية.
لذلك، يتم استخدام التالي عندما تحتاج إلى
استدعاء برامج وسيطة إضافية لرعاية العمل نيابة عنك.
سنرى استخدام التالي في بعض التدريبات اللاحقة،
ولكن الوظيفة هنا سوف تأخذ ثلاث معلمات req، الدقة، وبعد ذلك.
التالي هو معلمة اختيارية
لا يمكن تضمينها إذا كنت لن تستخدمها داخل شفرتك.
لذلك، في الداخل هنا سوف نقول،
سجل وحدة التحكم وبعد ذلك،
سنقوم بتسجيل تلك الرؤوس،
وسنقوم بالرد مع رمز الحالة تعيين إلى 200.
تعيين نوع محتوى الرأس
كنص HTML.
لذلك، لاحظت أن الكثير من هذا الرمز يبدو مشابهًا جدًا
للطريقة التي قمنا بها بإعداد تطبيق العقدة.
لذلك، سنقول res.end
وهنا هتمل الجسم h1.
سنقول فقط أن هذا هو خادم إكسبريس وإغلاق
الدبابات هناك، وهذا كل شيء.
من فهمك للعقدة HTTP،
فأنت تفهم بالفعل ما يفعله هؤلاء الثلاثة
ويتم نفس الشيء أيضًا في خادم Express.
الآن بعد أن قمنا بإعداد الخادم باستخدام التطبيق،
سنقوم بإعداد الخادم،
ثم هذا هو المكان الذي سنستخدم فيه HTTP CreateServer،
وبالتالي سيأخذ CreateServer الآن التطبيق كما هو معلمة الدالة هناك،
وبعد ذلك، سنقول ببساطة منفذ
server.listen، اسم المضيف و
وظيفة السهم هنا التي سأقوم بطباعتها،
وحدة التحكم، تسجيل خادم معطف الظهر قيد التشغيل في HTTP://اسم المضيف: المنفذ،
هذا كل شيء. لذلك سترى أن هذا الجزء يشبه
إلى حد كبير ما قمت به لممارسة هتب،
إلا أن كريتيسيرفر يأخذ الآن هذا التطبيق،
الذي أعلنا في وقت سابق إكسبريس.
لذلك، يقوم Express بإضافة وظائف إضافية سيتم
استخدامها من قبل خادم HTTP الذي نقوم بإنشائه باستخدام الملاحظة.
بمجرد الانتهاء من ذلك،
دعونا حفظ التغييرات،
وبعد ذلك سوف نمضي قدما وبدء الخادم،
وإلقاء نظرة على ما سيخدم الخادم.
الذهاب إلى المحطة الطرفية، إضافة المحطة،
اكتب بدء NPM وسترى أن الخادم الخاص بك هو قيد التشغيل والتشغيل.
الآن عندما نصل إلى هذا إما من المتصفح أو من ساعي البريد،
سترى ما يخدمه.
لذا، هنا لدي ساعي البريد فوق والمال.
اسمحوا لي أن أرسل طلب جيت إلى لوكالهوست 3،000 تماما كما كان من قبل،
وسوف ترى أن هذا يخدم حتى رمز هتمل التي ندرجها هناك،
وبالتالي هذا هو خادم إكسبريس.
بالنقر على المعاينة،
سيظهر لك هذا ما سيبدو عليه في المتصفح،
وهذا يظهر النسخة الأولية من الشفرة التي تم إرسالها مرة أخرى من جانب الخادم،
ويمكنك أن ترى أن رمز الحالة هو 200، حسنا؟
وتم إرسال متجه معلومات الرأس الأخرى من موقع الخادم.
لاحظ على وجه الخصوص أنه يقول x مدعوم من Express في الرأس.
مع هذا، نكمل الجزء الأول من هذا التمرين حيث رأينا
كيف يمكننا الاستفادة من Express لإعداد خادم ويب بسيط.
اسمحوا لي الآن إيقاف الخادم ثم تهيئة مستودع Git،
لذلك في موجه
سأكتب «git init» ثم «git status»
وسترى أن الملفات التي تم إلغاء تعقبها، لذلك سأقول «الحصول على وإسقاط» ويتم إضافة هذه الملفات الآن في مستودع Git،
وهكذا عندما تقول git،
سترى الملفات التي تمت إضافتها.
لاحظ على وجه الخصوص أنه
لم تتم إضافة مجلد وحدات العقدة إلى مستودع Git لأنه في
ملف.gitignore ذكرنا صراحة أنه
لا ينبغي تضمين مجلد وحدات العقدة في مستودع Git.
حتى الآن، دعونا تحقق في تبادل الالتزام لدينا من خلال قول git
ارتكاب ناقص m Express المثال،
ونحن قد التزمت هذا إلى مستودع Git لدينا.
في الجزء الثاني من هذا التمرين،
سننظر في استخدام البرامج الوسيطة Express تسمى Morgan.
يتم استخدام مورغان لتسجيل المعلومات إلى الشاشة،
لذلك فإنه سيتم تسجيل معلومات حول الطلبات الواردة إلى الشاشة حتى
نتمكن من رؤية بعض المعلومات التي يتم طباعتها في وحدة التحكم لدينا هنا.
أيضا، سنرى كيف يمكننا إعداد خادم Express لدينا لخدمة ملفات HTML ثابتة.
للبدء، في نوع موجه npm
تثبيت مورغان ناقص، ناقص حفظ.
الآن، مورغان ستكون تبعية التي سنستخدمها في تطبيقنا.
لذلك، هذا هو السبب في انها ناقص،
ناقص حفظ وهذا من شأنه الحصول على تثبيت،
ويمكنك أن ترى أن أنا باستخدام مورغان الإصدار 1.9.0 في هذه الدورة.
الآن بعد أن قمنا بتثبيت مورغان،
دعونا نرى كيف يمكننا الاستفادة منه داخل تطبيقنا.
حتى الذهاب إلى التطبيق لدينا،
والطريقة للاستفادة من مورغان هو أن تعلن هنا
const مورغان تتطلب مورغان،
وبعد ذلك سوف نقول،
«استخدام التطبيق مورغان مع التنمية».
لذا، هذه هي نسخة التطوير.
لذلك، فإنه سيتم طباعة معلومات إضافية على الشاشة كما هو مطلوب.
الآن، والخوض في طلبنا.
ضمن طلبنا، لن أقوم بتسجيل الرؤوس بأكملها.
بدلاً من ذلك، دعني أزيل هذا لأن Morgan
سيسجل معلومات كافية لنا للنظر فيها،
وسأقوم بإعداد الخادم الخاص بي لخدمة ملفات HTML من المجلد العمومي.
لذلك للقيام بذلك،
أنا ذاهب إلى الإعلان عن استخدام والتعبير عن ثابت.
هذا يخبر Express لخدمة الملفات الثابتة من dirname تسطير سفلي مزدوج.
لذلك، هذا يقول جذر
هذا المشروع وسوف تجد تلك الملفات
في double_dirname، زائد/العامة.
لذلك، أذكر أننا أنشأنا المجلد العمومي في مجلد العقدة إكسبريس.
لذلك، هذا هو إعلام إكسبريس أنك سوف ننظر إلى
هذا المجلد معين في المجلد الجذر من هذا المشروع وداخل المجلد العمومي.
لذلك، سيكون هذا المجلد الذي
سيتم تقديم ملفات HTML الثابتة من خلال خادم Express الخاص بي.
بعد إجراء هذه التغييرات،
دعنا نحفظ التغييرات،
ثم أعد تشغيل الخادم الخاص بنا،
ثم نرى كيف يعمل.
الذهاب إلى هذه المطالبة،
دعونا اكتب npm start
، لبدء الخادم الخاص بنا،
وبمجرد تشغيل الخادم،
دعنا نفحص ما سيقدمه عندما نرسل طلبات مختلفة إلى هذا الخادم.
باستخدام ساعي البريد، دعنا أولاً نرسل طلب الحصول على إلى المضيف المحلي: 3،000
وستلاحظ أنه يخدم ملف index.html.
لقد قمنا بإعداد خادمنا لخدمة ملفات ثابتة من المجلد العمومي،
وإذا كنا نقول فقط لوكالهوست: 3000 افتراضيا،
فإنه سيتم تقديم ملف index.html.
لذا، هذه هي الطريقة التي يعمل بها خادم الويب النموذجي.
لذلك، هذا ما انتهى بنا الأمر إلى إعداد الخادم السريع لدينا للقيام به.
الآن، دعونا نكتب في localhost: 3000 about.html وإرسال الطلب،
ويقول هذا هو عن استراتيجية HTML لدينا،
وأيضا تم حفظ ملف HTML حول لنا هنا.
حتى في المعاينة،
يمكنك ان ترى الملف الناتج الذي تم تقديمه من موقع الخادم لدينا.
دعونا نحاول الوصول إلى ملف غير موجود
وسترى أنه عند محاولة الوصول إلى ملف غير موجود،
فإنه سيتم الافتراضي إلى الإعداد الثاني الذي قمنا به في التعليمات البرمجية الخاصة بنا،
والذي يقول هذا هو خادم Express.
لم نحدد لخادم Express الخاص بنا كيفية التعامل مع
الحالات التي يواجه فيها ملفًا غير موجود.
لذلك، هذا هو السبب في أنه يستخدم الافتراضي الذي تم إعداده مباشرة أسفل ثابت Express،
وهو لخدمة القيمة الافتراضية، وبطبيعة الحال،
هذا ليس السلوك الأكثر مثالية
ولكن هذا ما لدينا في خادم Express في هذه اللحظة.
في وقت لاحق، سنقوم بتعديل خادم Express للتعامل مع
الأخطاء بمزيد من التفصيل، في تمارين لاحقة.
هذا هو أيضا الوقت المناسب بالنسبة لك للقيام جيت ارتكاب التغييرات.
لذا، دعنا نتحقق من حالة Git بعد إيقاف الخادم،
وسنضيف الملفات المعدلة،
ثم نقوم بتنفيذ Git
ناقص m Express،
ونخدم ملفات ثابتة.
هذا كل شيء مع هذا،
نكمل هذا التمرين.
في هذا التمرين، رأينا كيف يمكننا إعداد
خادم ويب بسيط لخدمة المحتوى نيابة عنا.