חלק 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. השאר את ברירת המחדל עבור האפשרות Initializr Service URL. לחץ על כפתור "הבא". בחלון הבא, עלינו לבחור את הגדרות הפרויקט. יהיה לנו פרויקט של מייבן. בחר את Maven Project כסוג. מלא את השדות קבוצה ו-Artifact לחץ על הבא. בחלון הבא, עלינו לבחור את רכיבי Spring Framework שבהם נשתמש. שניים מספיקים לנו:

• Spring Web הוא רכיב המאפשר לנו ליצור יישומי אינטרנט. רכיב זה כולל Spring MVC.
• Thymeleaf הוא מנוע התבניות שלנו. זה דבר שמאפשר לנו לשלוח נתונים מג'אווה לדפי 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);
    }

}

pom.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 המכוונות לכתובת ה-/greeting URL. במילים אחרות, שיטה זו תופעל אם מישהו מנווט אל /greeting. שיטה זו מחזירה מחרוזת. לפי Spring MVC, שיטת הבקר צריכה להחזיר את שם התצוגה. לאחר מכן, Spring יחפש קובץ HTML עם אותו שם, אותו הוא יחזיר כתגובה לבקשת HTTP. כפי שאתה יכול לראות, השיטה שלנו מחזירה את שם דף האינטרנט שיצרנו קודם לכן: ברכה. השיטה שלנו לוקחת 2 טיעונים. בואו נסתכל עליהם: פרמטר 1: @RequestParam(name = "name", required = false, defaultValue = "World") שם מחרוזת. ההערה @RequestParam מציינת שהפרמטר String name הוא פרמטר כתובת URL. אם ההערה מציינת שפרמטר כתובת אתר זה הוא אופציונלי (חובה = שקר), אז אם הוא נעדר, הערך של פרמטר שם המחרוזת יהיה "World" (defaultValue = "World"). אם הוא קיים, פרמטר כתובת האתר יהיה "שם" (שם = "שם"). יכול להיות שיש הרבה שאתה לא מבין כאן. בואו נביא כמה דוגמאות. הטבלה למטה מציגה מה יהיה הערך של פרמטר שם המחרוזת, עם אפשרויות שונות לגישה ל/greeting (עם ובלי פרמטרים של כתובת URL) פרמטר 2: הפרמטר השני הוא דגם Model. פרמטר זה הוא דגם כלשהו. מודל זה מורכב מתכונות פנימיות שונות. לכל תכונה יש שם וערך. משהו כמו צמדי מפתח-ערך. אנו יכולים להשתמש בפרמטר זה כדי לשלוח נתונים מקוד Java לדפי HTML. לחלופין, באמצעות מינוח MVC, שלח נתונים מהמודל לתצוגה. נותר רק לבחון את השורה האחרונה. כך אנו שולחים נתונים מג'אווה ל-HTML, או מהמודל לתצוגה. השיטה כוללת את השורה הבאה: model.addAttribute("name", name); כאן אנו יוצרים תכונה חדשה בשם name ומקצים לה את הערך של פרמטר השם. זכור, דיברנו לאחרונה <p th:text = "'Hello,' + ${name} + '!'" /> על הערך של תג p הוא "Hello," + הערך של משתנה השם, אותו נגדיר בקוד Java. אנו קובעים ערך זה באמצעות הקו model.addAttribute("name", name);

שלב 5. הרץ

כדי להתחיל, אנחנו צריכים להריץ את השיטה הראשית של מחלקת MvcDemoApplication: ביומנים, נראה שיישום האינטרנט שלנו התחיל ביציאה 8080: וזה אומר שבדפדפן, אנחנו יכולים לעבור לדף בכתובת http:// localhost:8080 : כאן יש לנו את הדף index.html. בואו נעקוב אחר הקישור לדף הברכה: הבקר שלנו הופעל במעבר הזה. לא העברנו שום פרמטר דרך כתובת האתר. כתוצאה מכך, תכונת השם מקבלת את ערך ברירת המחדל ("עולם") המצוין בהערה. בואו ננסה להעביר פרמטר דרך כתובת האתר: הכל עובד כמתוכנן. כעת נסה להתחקות אחר הנתיב של משתנה השם:

1. המשתמש העביר את "name=Amigo" בכתובת ה-URL ->
2. הבקר עיבד את הפעולה שלנו, קיבל את משתנה השם והגדיר תכונת מודל בשם name שווה לערך שהתקבל ->
3. נתונים אלו הגיעו לצפייה מהדגם, הגיעו לדף greeting.html והוצגו למשתמש

זהו לבינתיים!