ตอนที่ 8. การเขียนแอปพลิเคชั่นขนาดเล็กใน spring-boot

เนื้อหานี้เป็นส่วนสุดท้ายของชุด "ข้อมูลเบื้องต้นเกี่ยวกับการพัฒนาองค์กร" บทความก่อนหน้านี้:

• เกี่ยวกับเครือข่าย
• เกี่ยวกับสถาปัตยกรรมซอฟต์แวร์
• เกี่ยวกับโปรโตคอล HTTP/HTTPS ;
• เกี่ยวกับพื้นฐาน Maven ;
• เกี่ยวกับเซิร์ฟเล็ต (เรากำลังเขียนเว็บแอปพลิเคชันธรรมดา) ;
• เกี่ยวกับคอนเทนเนอร์เซิร์ฟเล็ต
• เกี่ยวกับพื้นฐาน MVC

ลองดูตัวอย่างที่ง่ายที่สุดของการนำ MVC ไปใช้โดยใช้ Spring-MVC เป็นตัวอย่าง เมื่อต้องการทำเช่นนี้ เรามาเขียนแอปพลิเคชัน Hello World ขนาดเล็กใน spring-boot เพื่อให้คุณสามารถทำซ้ำทุกอย่างได้ด้วยตัวเอง ฉันจะให้คำแนะนำทีละขั้นตอนแก่คุณ ก่อนอื่นเราจะเขียนแอปพลิเคชันขนาดเล็ก จากนั้นเราจะวิเคราะห์มัน

ขั้นตอนที่ 1: สร้างแอปพลิเคชัน spring-boot ใน IntelliJ IDEA

การใช้ไฟล์ -> ใหม่ -> โครงการ... สร้างโครงการใหม่ ในหน้าต่างที่เปิดขึ้น ในเมนูด้านซ้าย ให้เลือก Spring Initializr เลือก Project SDK และปล่อยให้ตัวเลือก Initializr Service URL เป็นค่าเริ่มต้น คลิกปุ่มถัดไป ในหน้าต่างถัดไป เราต้องเลือกพารามิเตอร์ของโครงการ เราจะมีโครงการมาเวน เลือกประเภท - โครงการ Maven กรอกกลุ่มและสิ่งประดิษฐ์ แล้วคลิกถัดไป ในหน้าต่างถัดไป เราจำเป็นต้องเลือกส่วนประกอบ Spring Framework ที่เราจะใช้ เราต้องการเพียงสอง:

• Spring Web เป็นส่วนประกอบที่จะช่วยให้เราสามารถสร้างเว็บแอปพลิเคชันได้ ส่วนประกอบนี้รวมถึง Spring MVC
• Thymeleaf - เอ็นจิ้นเทมเพลตที่เรียกว่า สิ่งที่จะทำให้เราสามารถถ่ายโอนข้อมูลจาก Java ไปยังหน้า HTML

ในหน้าต่างถัดไป ให้เลือกชื่อและตำแหน่งของโปรเจ็กต์ในระบบไฟล์: คลิกปุ่มเสร็จสิ้น โครงการได้ถูกสร้างขึ้น เรามีโครงสร้างโครงการดังต่อไปนี้: ที่นี่เราสนใจ 2 ไฟล์: 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.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จะเป็นข้อความ “สวัสดี” + ค่าของตัวแปร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 อย่างที่คุณเห็นวิธีการของเราจะส่งคืนชื่อของหน้าเว็บที่เราสร้างไว้ก่อนหน้านี้ - คำทักทาย วิธีการของเราใช้เวลา 2 ข้อโต้แย้ง พารามิเตอร์ 1: @RequestParam(name = "name", required = false, defaultValue = "World") String name คำอธิบายประกอบ @RequestParam ระบุว่าพารามิเตอร์ชื่อสตริงเป็นพารามิเตอร์ url วงเล็บคำอธิบายประกอบระบุว่าพารามิเตอร์นี้ใน url เป็นทางเลือก (ต้อง = false) หากไม่มี ค่าของพารามิเตอร์ชื่อสตริงจะเป็น World (defaultValue = "World") และหากมีอยู่ พารามิเตอร์นี้ ใน url จะเรียกว่า name (name = "name") ในนี้อาจมีหลายอย่างที่ไม่ชัดเจน ลองยกตัวอย่าง ตารางด้านล่างแสดงค่าของพารามิเตอร์ String name สำหรับตัวเลือกต่างๆ ในการเข้าถึงที่อยู่ /greeting (มีและไม่มีพารามิเตอร์ใน URL) พารามิเตอร์ 2: พารามิเตอร์ตัวที่สองคือ Model model พารามิเตอร์นี้เป็นแบบจำลอง โมเดลนี้ประกอบด้วยคุณลักษณะต่างๆ ภายใน แต่ละแอตทริบิวต์มีชื่อและค่า บางอย่างเช่นคู่คีย์-ค่า การใช้พารามิเตอร์นี้เราสามารถถ่ายโอนข้อมูลจากโค้ด Java ไปยังหน้า html หรือในคำศัพท์ MVC ให้ถ่ายโอนข้อมูลจากโมเดลไปยังมุมมอง มันยังคงแยกวิเคราะห์บรรทัดสุดท้าย วิธีที่เราส่งข้อมูลจาก Java ไปยัง html หรือจาก Model ไปยัง View เนื้อหาของวิธีการประกอบด้วยบรรทัดต่อไปนี้: model.addAttribute("name", name); ที่นี่เราสร้างแอตทริบิวต์ใหม่ที่เรียกว่าชื่อและกำหนดค่าของพารามิเตอร์ชื่อ โปรดจำไว้ว่าเมื่อเร็ว ๆ นี้เราได้พูดถึงแท็ก: <p th:text="'Hello, ' + ${name} + '!'" /> เราบอกว่าค่าของแท็ก p จะเป็นข้อความ “สวัสดี” + ค่าของตัวแปรชื่อ ซึ่งเราจะตั้งค่าจากโค้ด Java เราตั้งค่านี้โดยใช้เส้น model.addAttribute("name", name);

ขั้นตอนที่ 5 เปิดตัว

ในการเปิดตัว เราจำเป็นต้องเรียกใช้เมธอดหลักในคลาส MvcDemoApplication: ในบันทึกการเปิดตัว เราจะเห็นว่าเว็บแอปพลิเคชันของเราเริ่มต้นที่พอร์ต 8080: และนั่นหมายความว่าเราสามารถไปที่หน้าในเบราว์เซอร์: http:// localhost:8080 : ที่นี่หน้า index.html ถูกแสดงให้เราเห็น ไปตามลิงก์เพื่อทักทายกัน: ในระหว่างการเปลี่ยนแปลงนี้ ตัวควบคุมของเราทำงานได้ เราไม่ได้ส่งพารามิเตอร์ใดๆ ผ่าน URL ดังนั้น ตามที่ระบุไว้ในคำอธิบายประกอบ ค่าของแอตทริบิวต์ name จะใช้ค่าเริ่มต้น World ตอนนี้ลองส่งพารามิเตอร์ผ่าน url: ทุกอย่างทำงานได้ตามที่ตั้งใจไว้ ตอนนี้พยายามติดตามเส้นทางของตัวแปรชื่อ:

1. ผู้ใช้ส่งค่าของพารามิเตอร์ชื่อ = Amigo -> ผ่าน url
2. ตัวควบคุมประมวลผลการกระทำของเรา ยอมรับตัวแปรชื่อ และตั้งค่าแอตทริบิวต์ model พร้อมด้วยชื่อชื่อและค่าที่ยอมรับ ->
3. จากแบบจำลอง ข้อมูลนี้ไปที่มุมมอง ไปยังหน้า Greeting.html และแสดงต่อผู้ใช้

นั่นคือทั้งหมด!