الجزء 8. كتابة تطبيق صغير في Spring-Boot

هذه المادة هي الجزء الأخير من سلسلة "مقدمة لتطوير المشاريع". المقالات السابقة:

• عن الشبكة ؛
• حول هندسة البرمجيات ;
• حول بروتوكولات HTTP/HTTPS ؛
• حول أساسيات مافن .
• حول servlets (نحن نكتب تطبيق ويب بسيط) ؛
• حول حاويات servlet .
• حول أساسيات MVC .

دعونا نلقي نظرة على أبسط مثال لتطبيق MVC باستخدام Spring-MVC كمثال. للقيام بذلك، دعونا نكتب تطبيقًا صغيرًا لـ Hello World في Spring-Boot. لكي تتمكن من تكرار كل شيء بنفسك، سأقدم لك تعليمات خطوة بخطوة. أولاً سنكتب تطبيقًا صغيرًا، ثم سنقوم بتحليله.

الخطوة 1. قم بإنشاء تطبيق Spring-boot في IntelliJ IDEA

باستخدام ملف -> جديد -> مشروع... أنشئ مشروعًا جديدًا. في النافذة التي تفتح، في القائمة الموجودة على الجانب الأيسر، حدد Spring Initializr، وحدد Project SDK، واترك خيار عنوان URL لخدمة التهيئة كخيار افتراضي. انقر فوق الزر التالي. في النافذة التالية نحتاج إلى تحديد معلمات المشروع. سيكون لدينا مشروع مافن. حدد النوع - مشروع Maven، واملأ المجموعة والقطعة الأثرية وانقر فوق "التالي". في النافذة التالية نحتاج إلى تحديد مكونات Spring Framework التي سنستخدمها. نحتاج فقط إلى اثنين:

• Spring Web هو أحد المكونات التي تسمح لنا بإنشاء تطبيقات الويب. يتضمن هذا المكون Spring MVC.
• Thymeleaf - ما يسمى بمحرك القالب. الشيء الذي سيسمح لنا بنقل البيانات من Java إلى صفحات HTML

في النافذة التالية، حدد اسم المشروع وموقعه في نظام الملفات: انقر فوق الزر "إنهاء". تم إنشاء المشروع. لدينا هيكل المشروع التالي: هنا نحن مهتمون بملفين: pom.xml - واصف النشر. الشيء الذي يسمح لك باستيراد المكتبات بسرعة وسهولة من أطر عمل مختلفة إلى مشروعنا، بالإضافة إلى الشيء الذي نقوم من خلاله بتكوين تجميع تطبيقنا. تم إنشاء تطبيقنا باستخدام Maven، وpom.xml هو ملف التكوين لنظام البناء هذا. فئة جافا - MvcDemoApplication. هذه هي الفئة الرئيسية لتطبيقنا، والتي سنطلق منها مشروع Spring-Boot الخاص بنا. للبدء، فقط قم بتشغيل الطريقة الرئيسية في هذا الفصل. إليك الكود الخاص بهذه الفئة بالإضافة إلى ملف pom.xml: MvcDemoApplication:

@SpringBootApplication
public class MvcDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(MvcDemoApplication.class, args);
    }

}

بوم.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.javarush</groupId>
    <artifactId>mvc_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>mvc_demo</name>
    <description>Spring MVC Demo</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

الخطوة 2. إنشاء صفحات الويب

سيكون طلبنا بسيطًا للغاية. سيكون لدينا صفحة رئيسية - Index.html، حيث سيكون هناك رابط لصفحة الترحيب - Greeting.html. في صفحة الترحيب سنعرض الترحيب. دعونا ننفذ القدرة على إرسال اسم ترحيب إلى صفحة Greeting.html عبر معلمات URL. لنقم بإنشاء الصفحة الرئيسية لتطبيقنا - Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main page</title>
</head>
<body>
    <p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>

لنقم الآن بإنشاء صفحة Greeting.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

هنا، من صفحة html غير نمطية، يمكنك رؤية علامة: <p th:text="'Hello, ' + ${name} + '!'" /> سمة thالعلامة pهي أداة لمحرك قالب Thymeleaf. وبفضلها pستكون قيمة الوسم هي النص "Hello" + قيمة المتغير nameالذي سنقوم بتعيينه من كود Java.

الخطوة 3: إنشاء وحدة تحكم

داخل الحزمة mvc_demo سنقوم بإنشاء حزمة وحدة التحكم، والتي سننشئ بداخلها وحدة التحكم الخاصة بنا، HelloWorldController:

@Controller
public class HelloWorldController {

   @RequestMapping(value = "/greeting")
   public String helloWorldController(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
       model.addAttribute("name", name);
       return "greeting";
   }

}

من ناحية، هناك القليل جدًا من التعليمات البرمجية، ولكن من ناحية أخرى، هناك الكثير مما يحدث. لنبدأ التحليل. يشير التعليق التوضيحيController إلى أن هذه الفئة هي وحدة تحكم. تقوم وحدات التحكم في Spring بمعالجة طلبات HTTP لعناوين محددة. يحتوي فصلنا على طريقة helloWorldController، والتي تم تمييزها بالتعليق التوضيحي - @RequestMapping(value = "/greeting"). يخبرنا هذا التعليق التوضيحي أن هذه الطريقة تعالج طلبات HTTP GET إلى عنوان /greeting. بمعنى آخر، ستعمل هذه الطريقة إذا ذهب شخص ما إلى /greeting. تقوم هذه الطريقة بإرجاع السلسلة. وفقًا لـ Spring-MVC، يجب أن تقوم طريقة التحكم بإرجاع اسم العرض. بعد ذلك، سيبحث Spring عن ملف html يحمل نفس الاسم، والذي سيتم إرجاعه كاستجابة لطلب HTTP. كما ترون، طريقتنا ترجع اسم صفحة الويب التي أنشأناها سابقًا - تحية. طريقتنا تأخذ وسيطتين. دعونا نلقي نظرة عليها: المعلمة 1: @RequestParam(name = "name"، مطلوب = false، defaultValue = "World") اسم السلسلة. ينص التعليق التوضيحيRequestParam على أن معلمة اسم السلسلة هي معلمة عنوان url. تشير أقواس التعليق التوضيحي إلى أن هذه المعلمة في عنوان url اختيارية (مطلوب = خطأ)، وإذا كانت غائبة، فستكون قيمة معلمة اسم السلسلة هي World (defaultValue = "World")، وإذا كانت موجودة، فهذه المعلمة سيتم تسمية عنوان url بالاسم (الاسم = "الاسم") قد يكون هناك الكثير من الأشياء غير الواضحة هنا. دعونا نعطي أمثلة. يوضح الجدول أدناه قيمة معلمة اسم السلسلة للخيارات المختلفة للوصول إلى عنوان /greeting (مع أو بدون معلمات في عنوان URL) المعلمة 2: المعلمة الثانية هي نموذج النموذج. هذه المعلمة هي نموذج. يتكون هذا النموذج داخليًا من سمات مختلفة. كل سمة لها اسم وقيمة. شيء من هذا القبيل أزواج القيمة الرئيسية. باستخدام هذه المعلمة، يمكننا نقل البيانات من كود Java إلى صفحات html. أو، في مصطلحات MVC، قم بنقل البيانات من النموذج إلى العرض. يبقى لتحليل السطر الأخير. الطريقة التي نمرر بها البيانات من Java إلى html أو من Model إلى View. يحتوي نص الطريقة على السطر التالي: model.addAttribute("name", name); هنا نقوم بإنشاء سمة جديدة تسمى الاسم ونخصص لها قيمة معلمة الاسم. تذكر أننا ناقشنا مؤخرًا العلامة: <p th:text="'Hello, ' + ${name} + '!'" /> قلنا أن قيمة العلامة p ستكون النص "Hello،" + قيمة متغير الاسم، الذي سنقوم بتعيينه من كود Java. قمنا بتعيين هذه القيمة باستخدام السطر model.addAttribute("name", name);

الخطوة 5. إطلاق

للإطلاق، نحتاج إلى تشغيل الطريقة الرئيسية في فئة MvcDemoApplication: في سجلات الإطلاق، سنرى أن تطبيق الويب الخاص بنا بدأ على المنفذ 8080: وهذا يعني أنه يمكننا الانتقال إلى الصفحة في المتصفح: http:// المضيف المحلي:8080 : هنا تم عرض الصفحة Index.html لنا. دعونا نتبع الرابط للترحيب: أثناء هذا الانتقال، عملت وحدة التحكم الخاصة بنا. لم نمرر أي معلمات عبر عنوان URL، وبالتالي، كما هو مذكور في التعليق التوضيحي، أخذت قيمة سمة الاسم القيمة الافتراضية World. لنحاول الآن تمرير المعلمة عبر عنوان url: كل شيء يعمل على النحو المنشود. حاول الآن تتبع مسار متغير الاسم:

1. قام المستخدم بتمرير قيمة اسم المعلمة = Amigo -> عبر url
2. قامت وحدة التحكم بمعالجة الإجراء الخاص بنا، وقبلت متغير الاسم وقمت بتعيين سمة النموذج، مع اسم الاسم والقيمة المقبولة ->
3. من النموذج، انتقلت هذه البيانات إلى العرض، إلى صفحة Greeting.html وتم عرضها للمستخدم

هذا كل شئ!