الجزء 8. لنكتب تطبيقًا صغيرًا باستخدام Spring Boot

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

• حول الشبكات
• حول هندسة البرمجيات
• حول HTTP/HTTPS
• حول أساسيات Maven
• حول 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 هو ملف التكوين لنظام البناء هذا. فئة Java هي 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.codegym/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). في صفحة الترحيب، نعرض تحية. سنستخدم معلمات URL لتمرير الاسم الذي سيتم استخدامه في التحية إلى صفحة Greeting.html. لنقم بإنشاء الصفحة الرئيسية لتطبيقنا — 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>

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

الخطوة 5. تشغيل

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

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

هذا كل شيء في الوقت الراهن!