إنشاء أبسط مشروع ويب في IntelliJ IDEA Enterprise. خطوة بخطوة، مع الصور

المعرفة المطلوبة لفهم المقالة: لقد تعرفت بالفعل على Java Core بشكل أو بآخر وترغب في إلقاء نظرة على تقنيات JavaEE وبرمجة الويب . سيكون من المنطقي جدًا أن تقوم حاليًا بدراسة مهمة Java Collections، والتي تتناول موضوعات قريبة من المقالة. حاليًا، أستخدم IntelliJ IDEA Enterprise Edition ( ملاحظة المحرر: هذه نسخة موسعة مدفوعة الأجر من IDE؛ وعادة ما تستخدم في التطوير المهني). يعد العمل مع مشاريع الويب فيه أسهل بكثير من العمل في الإصدار المجتمعي المجاني . في Enterprise Edition ، تقوم نقرة واحدة بالماوس بإنشاء المشروع، وإسقاطه في حاوية servlet، وتشغيل الخادم، وحتى فتح صفحة ويب للمشروع في المتصفح. في النسخة المجانية من IDEA، سيتعين عليك القيام بالكثير من هذا بنفسك، أي "يدويًا". أستخدم Apache Maven لبناء المشروع وإدارة دورة حياته. لقد استخدمت فقط جزءًا صغيرًا من قدراته (إدارة الحزم/التبعية) في هذا المشروع. باعتباري خادم تطبيق/حاوية servlet، اخترت الإصدار 9.0.12 من Apache Tomcat.

هيا بنا نبدأ

أولاً، افتح IntelliJ IDEA وأنشئ مشروع Maven فارغًا . على اليسار، حدد Maven ، وتأكد من تحديد JDK للمشروع أعلاه. إذا لم يكن هناك، فحدد واحدًا من القائمة، أو انقر فوق جديد ... واختر واحدًا من الكمبيوتر. في هذه النافذة، تحتاج إلى تحديد GroupId و ArtifactId . يشير GroupId إلى المعرف الفريد للشركة التي أصدرت المشروع . الممارسة الشائعة هي استخدام اسم مجال الشركة، ولكن بترتيب عكسي. على الرغم من أنها ليست مثل المرآة. على سبيل المثال، إذا كان اسم مجال الشركة هو maven.apache.org ، فسيكون معرف المجموعة الخاص بها هو org.apache.maven . أي أننا نكتب أولاً نطاق المستوى الأعلى، ثم نضيف نقطة، ثم نطاق المستوى الثاني، وهكذا. وهذا هو النهج المقبول عموما. إذا كنت "تقوم بإعداد" المشروع بنفسك (وليس كجزء من شركة)، فإنك تضع اسم النطاق الشخصي الخاص بك هنا (أيضًا بترتيب عكسي!). إذا كان لديك واحدة، بطبيعة الحال. :) إذا لم يكن الأمر كذلك، فلا تقلق. يمكنك فعلا كتابة أي شيء هنا . في هذا المثال، سأستخدم نطاقًا وهميًا: Fatlady.info.codegym.cc . وبناء على ذلك، أقوم بإدخال cc.codergym.info.fatlady في حقل معرف المجموعة . ArtifactId هو ببساطة اسم مشروعنا. يمكنك استخدام الحروف ورموز معينة (الواصلات، على سبيل المثال) للفصل بين الكلمات. سيتم تسمية "القطعة الأثرية" لدينا بالضبط بما نكتبه هنا. في هذا المثال، سأستخدم my-super-project . لا تلمس حقل الإصدار بعد، فقط اتركه كما هو. وهذه هي نافذة IDEA القياسية عندما تقوم بإنشاء مشروع جديد. تماشيًا مع التقاليد، دعنا نسميه مشروعي الفائق . تم إنشاء المشروع! نرى أنه يحتوي الآن على البيانات الدقيقة التي أدخلناها عند إنشاء مشروع Maven : groupId و artifactId والإصدار (لم نتطرق إلى هذا الأخير).

هيكل مشروعنا

يحتوي مشروع Maven هذا على هيكل محدد. كما ترون، الجذر لديه:

• دليل .idea ، الذي يحتوي على إعدادات IDEA الخاصة بالمشروع الحالي؛
• دليل src ، حيث نقوم بإنشاء كود المصدر الخاص بنا؛
• ملف my-super-project.iml ، وهو ملف مشروع تم إنشاؤه بواسطة IDEA؛
• ملف pom.xml (ملف مشروع Maven الذي ذكرته سابقًا)، وهو مفتوح الآن. إذا ذكرت pom.xml في مكان ما، فهذا هو الملف الذي أتحدث عنه.

يوجد داخل المجلد src مجلدين فرعيين:

• رئيسي - للكود الخاص بنا؛
• اختبار — لاختبارات التعليمات البرمجية لدينا.

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

تحويله إلى مشروع ويب

لقد حان الوقت لتحويل مشروع Maven الخاص بنا إلى مشروع ويب. للقيام بذلك، انقر بزر الماوس الأيمن على اسم المشروع في هذه الشجرة وحدد إضافة دعم إطار العمل ... تفتح نافذة حيث يمكننا إضافة دعم لمختلف أطر العمل لمشروعنا. ولكننا نحتاج إلى واحد فقط: تطبيق الويب . الجواب هو الذي نختاره. تأكد من تحديد خانة الاختيار تطبيق الويب ، وأن النافذة الرئيسية تشير إلى أننا نريد إنشاء ملف web.xml تلقائيًا (أوصي بتحديد خانة الاختيار، إذا لم تكن محددة بالفعل). نرى بعد ذلك أنه تمت إضافة مجلد الويب إلى بنية مشروعنا. هذا هو جذر مشروع الويب الخاص بنا بالعنوان /. بمعنى آخر، إذا أدخلنا " المضيف المحلي " في المتصفح (أثناء تشغيل المشروع بالطبع)، فسيبحث هنا، في جذر مشروع الويب. إذا أدخلنا localhost/addUser ، فسوف يبحث عن مورد يسمى addUser في مجلد الويب . في web ، يوجد مجلد مطلوب يسمى WEB-INF ، حيث يوجد ملف web.xml ، أي المجلد الذي طلبنا من البرنامج إنشاؤه في الخطوة الأخيرة. لنفتحه. يمكنك أن ترى أنه لا يوجد به أي شيء مثير للاهتمام حتى الآن، فقط رأس. بالمناسبة، إذا لم تطلب إنشاء الملف، فسيتعين عليك إنشائه يدويًا، أي كتابة جميع الرؤوس يدويًا. أو على الأقل ابحث عن نسخة جاهزة على الإنترنت. لماذا نحتاج إلى web.xml ؟ لرسم الخرائط. هنا هو المكان الذي سنوضح فيه لـ Tomcat عنوان URL الذي يطلب التمرير إلى أي servlets. لكننا سنصل إلى ذلك لاحقًا. في الوقت الحالي، اتركه فارغًا. يحتوي مجلد الويب أيضًا على ملف Index.jsp . افتحه. هذا هو الملف الذي سيتم تنفيذه بشكل افتراضي، إذا جاز التعبير. بمعنى آخر، هذا هو بالضبط ما سنراه عندما نبدأ المشروع. في الأساس، jsp هو ملف HTML عادي ، باستثناء أنه يمكنك تنفيذ تعليمات Java البرمجية داخله.

قليلا عن المحتوى الثابت والديناميكي

المحتوى الثابت هو المحتوى الذي لا يتغير بمرور الوقت. كل ما نكتبه في ملف HTML يتم عرضه دون تغيير، تمامًا كما هو مكتوب. إذا كتبنا " مرحبا بالعالم "، فسيظهر هذا النص بمجرد فتح الصفحة، وبعد 5 دقائق، وغدًا، وبعد أسبوع، وبعد عام. لن يتغير. ولكن ماذا لو أردنا عرض التاريخ الحالي على الصفحة؟ إذا كتبنا فقط " 27 أكتوبر 2017 "، فسنرى غدًا نفس التاريخ، وبعد أسبوع، وبعد عام. ولكننا نود أن يكون التاريخ الحالي. هذا هو المكان الذي تكون فيه القدرة على تنفيذ التعليمات البرمجية مباشرة على الصفحة مفيدة. يمكننا الحصول على كائن التاريخ، وتحويله إلى التنسيق المطلوب، وعرضه على الصفحة. وبعد ذلك، في كل يوم عندما نفتح الصفحة، سيكون التاريخ دائمًا محدثًا. إذا كنا نحتاج فقط إلى محتوى ثابت، فسنحتاج فقط إلى خادم ويب عادي وملفات HTML. لا نحتاج إلى Java أو Maven أو Tomcat. ولكن إذا أردنا استخدام محتوى ديناميكي، فنحن بحاجة إلى كل هذه الأدوات. لكن في الوقت الحالي، دعنا نعود إلى ملف Index.jsp الخاص بنا . دعنا نشير إلى شيء آخر غير العنوان القياسي، على سبيل المثال، " تطبيق الويب الفائق الخاص بي! " ثم، في النص، دعنا نكتب " أنا على قيد الحياة! " نحن على وشك الاستعداد لبدء مشروعنا! لسوء الحظ، المثلث الأخضر المعتاد لبدء البرنامج غير نشط. انقر على الزر الموجود على يساره (المشار إليه على الشاشة بسهم أحمر) وحدد تحرير التكوينات ... يؤدي ذلك إلى فتح نافذة حيث تتم دعوتنا للنقر على علامة زائد خضراء لإضافة بعض التكوينات. انقر عليها (في الزاوية اليسرى العليا من النافذة). اختر خادم Tomcat > محلي . سيتم فتح نافذة بها الكثير من الخيارات، لكن الإعدادات الافتراضية تناسبنا في كل شيء تقريبًا. يمكننا أن نعطي تكويننا اسمًا جميلًا بدلاً من الاسم القياسي " بدون اسم" (في الأعلى). نحتاج أيضًا إلى التحقق من نجاح IDEA في العثور على Tomcat على نظامنا (لقد قمت بالفعل بتنزيله وتثبيته ، أليس كذلك؟). إذا لم يتم العثور عليه (وهو أمر غير محتمل)، فاضغط على السهم لأسفل واختر مكان تثبيته. أو اختر إصدارًا مختلفًا، إذا كان لديك أكثر من إصدار مثبت. لدي واحدة فقط وهي مثبتة بالفعل. ولهذا السبب يبدو كما هو على شاشتي. وفي أسفل النافذة، نرى تحذيرًا، ينبهنا إلى أنه لم تتم الإشارة إلى أي عناصر حتى الآن لنشرها على الخادم. يوجد على يمين هذا التحذير زر يقترح علينا إصلاح هذا الأمر. نضغط عليه ونرى أن IDEA كان قادرًا على العثور على كل شيء بنفسه، وقام بإنشاء كل ما كان مفقودًا بنفسه، وقام بتكوين جميع الإعدادات بنفسه. يمكننا أن نرى أنه نقلنا من علامة تبويب الخادم إلى علامة تبويب النشر ، ضمن قسم النشر عند بدء تشغيل الخادم ، ولدينا الآن قطعة أثرية سيتم نشرها. انقر فوق "تطبيق" و"موافق". ونرى أولاً أنه في الجزء السفلي من النافذة، ظهر قسم بخادم Tomcat المحلي الخاص بنا، حيث سيتم وضع القطع الأثرية الخاصة بنا. قم بطي هذا القسم بالنقر فوق الزر المقابل الموجود على الجانب الأيمن من النافذة. الآن نرى أن مثلث الإطلاق الأخضر نشط. بالنسبة لأولئك الذين يحبون التحقق مرة أخرى من كل شيء، يمكنك النقر فوق زر إعدادات المشروع (على يمين أزرار التشغيل، المشار إليها بسهم أحمر)، والانتقال إلى قسم القطع الأثرية، والتأكد من إنشاء القطعة الأثرية بالفعل . لم يكن هناك حتى قمنا بالضغط على زر الإصلاح ، ولكن الآن كل شيء على ما يرام. وهذا التكوين يناسبنا تمامًا. باختصار، الفرق بين مشروعي الفائق: الحرب ومشروعي الفائق: انفجرت الحرب هو أن مشروعي الفائق:ملف (وهو مجرد أرشيف) والإصدار الذي تم تفجيره هو ببساطة ملف war . وشخصيًا، هذا هو الخيار الذي أجده أكثر ملاءمة، لأنه يتيح لك تصحيح أخطاء التغييرات الطفيفة على الخادم بسرعة. في جوهر الأمر، القطعة الأثرية هي مشروعنا، وقد تم تجميعها للتو - وحيث تم تغيير بنية المجلد للسماح لـ Tomcat بالوصول إليه مباشرة. سيبدو شيئا من هذا القبيل: الآن كل شيء جاهز لإطلاق مشروعنا. اضغط على زر التشغيل الأخضر الثمين واستمتع بالنتيجة! :)