JavaRush /مدونة جافا /Random-AR /إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise. خطوة بخ...
Стас Пасинков
مستوى
Киев

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

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

هيا بنا نبدأ

أولاً، لنفتح IntelliJ IDEA وننشئ مشروع Maven فارغًا.
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 2
هنا على اليسار نختار Maven، ونتأكد من الإشارة إلى JDK للمشروع في الأعلى. إذا لم يكن موجودًا، فحدد الخيار الذي تحتاجه من القائمة، أو انقر فوق جديد... وحدد مباشرة من جهاز الكمبيوتر الخاص بك. يوجد في منتصف النافذة رسم متحرك لتحميل قائمة النماذج الأولية. نحن لسنا بحاجة إليها، لذلك دون انتظار التنزيل، لا تتردد في النقر فوق "التالي" في أسفل النافذة.
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 3
في هذه النافذة تحتاج إلى تحديد GroupId و ArtifactId . يشير GroupId إلى المعرف الفريد للشركة التي تنتج المشروع. ومن الممارسات الشائعة استخدام اسم نطاق الشركة، ولكن بترتيب عكسي. ليس بمعنى المرآة، ولكن إذا كان اسم مجال الشركة، على سبيل المثال، هو maven.apache.org ، فسيكون معرف المجموعة الخاص بها هو org.apache.maven . أي أننا أولاً نكتب نطاق المستوى الأول، ونفصله بنقطة، ونكتب اسم نطاق المستوى الثاني، وهكذا. وهذا هو النهج المقبول عموما. في حالة قيامك "بقص" مشروع بمفردك، وليس كجزء من شركة، فاكتب اسم المجال الشخصي الخاص بك هنا (أيضًا بترتيب عكسي!). إذا كان لديك، بطبيعة الحال :). إذا لم يكن الأمر كذلك، فلا تنزعج. في الواقع، يمكنك كتابة أي شيء هنا .
بالنسبة لشركة تحمل اسم المجال vasya.pupkin.org، سيكون معرف المجموعة هو org.pupkin.vasya. يعد هذا الأسلوب في التعامل مع الأسماء ضروريًا لفصل المشاريع التي تحمل الاسم نفسه، ولكن تم إصدارها بواسطة شركات مختلفة.
في هذا المثال، سأستخدم اسم النطاق الوهمي Fatfaggy.info.javarush.ru . وبناءً على ذلك، قمت بإدخال ru.javarush.info.fatfaggy في حقل معرف المجموعة . ArtefactId هو ببساطة اسم مشروعنا. يمكنك استخدام الحروف وبعض الرموز (الواصلات، على سبيل المثال) للفصل بين الكلمات. سيتم تسمية "القطعة الأثرية" الخاصة بنا تمامًا كما نكتب هنا. في هذا المثال، أكتب my-super-project . نحن لا نلمس حقل الإصدار في الوقت الحالي، بل نتركه كما هو.
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 4
حسنًا، نافذة IDEA القياسية عند إنشاء مشروع جديد. دعنا نسميه مشروعي الفائق وفقًا للتقاليد .
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 5
تم إنشاء المشروع!
تم فتح ملف pom.xml أمامنا على الفور. هذا ملف بإعدادات Maven. إذا أردنا "إخبار" Maven بماذا وكيف يفعل أو من أين يمكن الحصول على شيء ما، فإننا نصف كل هذا في ملف pom.xml هذا. وهي تقع في جذر المشروع.
نرى أنه يحتوي الآن بالضبط على البيانات التي أدخلناها عند إنشاء مشروع Maven: groupId وartifactId والإصدار ( لم نتطرق إلى الأخير).

هيكل مشروعنا

يحتوي مشروع Maven هذا على هيكل معين.
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 6
كما نرى، في الجذر تكمن:
  • دليل .idea ، الذي يحتوي على إعدادات الفكرة للمشروع الحالي؛
  • دليل src الذي نقوم بإنشاء مصادرنا فيه؛
  • ملف my-super-project.iml ، وهو ملف مشروع تم إنشاؤه بواسطة IDEA؛
  • pom.xml ، وهو نفس ملف مشروع Maven الذي تحدثت عنه أعلاه، والذي فتحناه الآن. إذا ذكرت pom.xml أو "pom" في مكان ما، فسوف أقصد هذا الملف بالتحديد.
يحتوي المجلد src بدوره على مجلدين فرعيين:
  • رئيسي - للكود الخاص بنا؛
  • اختبار - لاختبارات الكود الخاص بنا.
يحتوي كل من الرئيسي والاختبار على مجلد جافا . ضع في اعتبارك أن هذه هي نفس المجلد، فقط المجلد الرئيسي مخصص لرمز المصدر، والمجلد قيد الاختبار مخصص لرمز الاختبار، على التوالي. لا نحتاج إلى مجلد الموارد على الإطلاق في الوقت الحالي، ولن نستخدمه. لكن دعه يستلقي.

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

لقد حان الوقت لتحويل مشروع Maven الخاص بنا إلى مشروع ويب. للقيام بذلك، انقر بزر الماوس الأيمن على اسم المشروع في هذه الشجرة وحدد إضافة دعم إطار العمل...
إنشاء مشروع ويب بسيط في IntelliJ Idea Enterprise.  خطوة بخطوة بالصور - 7
سيتم فتح نافذة حيث يمكننا إضافة دعم لجميع أنواع الأطر المختلفة لمشروعنا. ولكننا نحتاج إلى واحد فقط: تطبيق الويب . نحن نختاره.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 8
نتحقق من وجود علامة اختيار بجوار تطبيق الويب ، وفي الجزء الرئيسي من النافذة، نلاحظ أننا نريد إنشاء ملف web.xml لنا على الفور (أوصي بتحديد المربع إذا لم يكن موجودًا) . بعد ذلك، سنرى أن بنية مشروعنا قد تم استكمالها بمجلد الويب .
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 9
هذا هو جذر مشروع الويب الخاص بنا على / . أي أننا إذا أدخلنا عنوان المضيف المحلي في المتصفح (عند تشغيله بالطبع)، فسيتم الوصول إليه هنا بالضبط، إلى جذر مشروع الويب. إذا أدخلنا localhost/addUser ، فسيبحث مجلد الويب عن مورد يسمى addUser .
الشيء الرئيسي هو أن نفهم أن مجلد الويب هو جذر مشروعنا عندما نقوم بتحميله إلى Tomcat. الآن لدينا بنية مجلد معينة، ولكن في المشروع النهائي الذي سنقوم بتحميله، سيكون مختلفًا قليلاً، وسيكون مجلد الويب هو الجذر هناك.
يوجد في الويب مجلد مطلوب يسمى WEB-INF ، حيث يوجد ملف web.xml ، والذي طلبنا إنشاؤه في الخطوة السابقة. لنفتحه.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 10
كما ترون، لا يوجد شيء مثير للاهتمام فيه حتى الآن، فقط "القبعة". بالمناسبة، إذا لم نطلب إنشائه، فربما كان علينا إنشاؤه يدويًا، أي كتابة هذا "الرأس" بالكامل يدويًا، أو في الحالات القصوى، البحث عن نسخة جاهزة على الإنترنت . ما هو web.xml ل ؟ لرسم الخرائط. سنخبر Tomcat هنا عن طلبات URL التي سيتم إرسالها إلى أي servlets. ولكن هذا كل شيء لاحقًا، والآن سنتركه فارغًا. يوجد أيضًا ملف يسمى Index.jsp في مجلد الويب . لنفتحه.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 11
هذا هو الملف الذي سيتم تنفيذه بشكل افتراضي، إذا جاز التعبير. أي أننا عندما نطلق المشروع فهذا بالضبط ما سنراه. في جوهره، يعد JSP ملف HTML عادي، مع اختلاف أنه يمكنك تنفيذ تعليمات برمجية Java فيه.

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

المحتوى الثابت هو المحتوى الذي لا يتغير بمرور الوقت. سيتم عرض كل ما كتبناه في ملف html دون تغييرات. إذا كتبنا مرحبا بالعالم، فسيتم عرض هذا النقش بمجرد فتح الصفحة، وفي 5 دقائق، وغدًا، وفي أسبوع، وفي عام. انها لن تتغير. ولكن ماذا لو أردنا عرض التاريخ الحالي على الصفحة؟ إذا كتبنا ببساطة "27 أكتوبر 2017"، فغدًا سنرى نفس التاريخ، وبعد أسبوع، وبعد عام. لكني أود أن يظل هذا التاريخ ذا صلة. هذا هو المكان الذي تساعدنا فيه القدرة على تنفيذ بعض التعليمات البرمجية مباشرة داخل الصفحة. يمكننا الحصول على كائن التاريخ، وتحويله إلى النموذج الذي نحتاجه وعرضه على الصفحة. ثم كل يوم، عندما نفتح الصفحة، سيكون التاريخ دائمًا ذا صلة. إذا كنا بحاجة فقط إلى محتوى ثابت، فإن خادم الويب العادي وملفات html تكفي بالنسبة لنا. لا نحتاج إلى أي Java أو Maven أو Tomcat. ولكن إذا أردنا استخدام محتوى ديناميكي، فهذا هو المكان الذي سيكون فيه كل هذا مفيدًا. لكن الآن دعنا نعود إلى ملف Index.jsp الخاص بنا . دعنا نشير إلى شيء خاص بنا بدلاً من العنوان القياسي، على سبيل المثال، "تطبيق الويب الفائق الخاص بي!"، وفي النص سنكتب، على سبيل المثال، "أنا على قيد الحياة!" نحن جاهزون تقريبًا لإطلاق مشروعنا! لكن للأسف المثلث الأخضر المعتاد لإطلاق البرنامج غير نشط.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 12
دعنا نضغط على الزر الموجود على يساره (المشار إليه على الشاشة بسهم أحمر) ونختار تحرير التكوينات... ستفتح نافذة حيث يُطلب منا النقر فوق علامة الجمع الخضراء لإضافة نوع من التكوين. انقر عليه، وهو موجود في الزاوية اليسرى العليا من النافذة.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 13
حدد عنصر Tomcat Server والعنصر الفرعي المحلي. سيتم فتح نافذة تحتوي على العديد من المعلمات المختلفة، لكننا سعداء بكل شيء تقريبًا والإعداد الافتراضي.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 14
يمكننا بطريقة أو بأخرى تسمية تكويننا بشكل جيد بدلاً من الاسم القياسي (في الأعلى). من الضروري أيضًا التحقق من أن فكرة Tomcat قد تم العثور عليها بنجاح في نظامنا (لقد قمت بالفعل بتنزيلها وتثبيتها من قبل ، أليس كذلك؟). إذا لم تتمكن من العثور عليه (وهو أمر غير محتمل)، فانقر فوق السهم لأسفل وحدد مكان تثبيته، أو إصدارًا آخر إذا كان لديك العديد منها. لدي واحد وهو مثبت بالفعل، لذا يبدو كل شيء كما هو في لقطة الشاشة. وفي الجزء السفلي من النافذة، نرى أن هناك تحذيرًا بعدم وجود قطعة أثرية واحدة مخصصة للنشر على الخادم. وعلى يمين هذا النقش يوجد زر يعرض تصحيح هذا الخلل. نضغط عليه ونرى أن الفكرة نفسها وجدت كل شيء، وخلقت كل شيء بنفسها، وما كان ينقصها، وقامت بنفسها بإعداد جميع الإعدادات.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 15
نرى أنه تم نقلنا من علامة التبويب "الخادم" إلى علامة التبويب " النشر "، في قسم "النشر عند بدء تشغيل الخادم" ، لدينا بالفعل قطعة أثرية تحتاج إلى نشر، ويشار أدناه إلى أنه سيتم إنشاء هذه القطعة الأثرية قبل النشر. تقدم بطلبك، حسنًا. ونحن نرى أنه أولاً، في الجزء السفلي من النافذة، ظهر قسم بخادم Tomcat المحلي الخاص بنا، والذي سيتم وضع قطعتنا الأثرية فيه. يمكنك طي هذا القسم من خلال النقر على الزر المقابل الموجود على الجانب الأيمن من النافذة.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 16
ونرى أيضًا أن المثلث الأخضر للإطلاق نشط بالفعل. بالنسبة لأولئك الذين يريدون التحقق من كل شيء، يمكنك النقر فوق الزر الذي يحتوي على إعدادات المشروع (على يمين أزرار التشغيل، المميزة بسهم أحمر)، والانتقال إلى قسم القطع الأثرية والتأكد من إنشاء القطعة الأثرية بالفعل. لم يكن الأمر موجودًا حتى ضغطنا على زر الإصلاح ، ولكن الآن أصبح كل شيء على ما يرام. وهذا التكوين يناسبنا جيدًا. باختصار، الفرق بين my-super-project:war و my-super-project:war انفجار هو أن my-super-project:war سينشئ ملف حرب واحدًا فقط (وهو مجرد أرشيف)، والخيار مع إن الانفجار هو ببساطة حرب "مفككة" . وهذا الخيار أكثر ملاءمة بالنسبة لي شخصيًا، لأنه يتيح لي نشر التغييرات الصغيرة بسرعة على الخادم. في الواقع، القطعة الأثرية هي مشروعنا، وقد تم تجميعها بالفعل، وتم تغيير بنية المجلد فيها بحيث يمكن تحميلها مباشرة إلى Tomcat. سيبدو شيئا من هذا القبيل:
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 17
حسنا، الآن كل شيء جاهز لبدء مشروعنا. نضغط على زر البداية الأخضر المرغوب ونستمتع بالنتيجة! :)
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
تعليقات
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION