ตอนที่ 8 มาเขียน Application เล็กๆ ด้วย 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 เลือก Maven Project เป็นประเภท กรอกข้อมูลในช่องกลุ่มและสิ่งประดิษฐ์ คลิกถัดไป ในหน้าต่างถัดไป เราต้องเลือกส่วนประกอบ Spring Framework ที่เราจะใช้ สองคนก็เพียงพอแล้วสำหรับเรา:

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

ในหน้าต่างถัดไป เลือกชื่อโครงการและตำแหน่งที่ตั้งในระบบไฟล์: คลิกปุ่ม "เสร็จสิ้น" โครงการถูกสร้างขึ้น เราลงเอยด้วยโครงสร้างโครงการต่อไปนี้: ที่นี่เราสนใจไฟล์ 2 ไฟล์: pom.xml (deployment descriptor) สิ่งนี้ช่วยให้คุณนำเข้าไลบรารีจากเฟรมเวิร์กต่างๆ มายังโปรเจ็กต์ของเราได้อย่างรวดเร็วและง่ายดาย นอกจากนี้ยังเป็นที่ที่เรากำหนดค่าวิธีสร้างแอปพลิเคชันของเรา แอปพลิเคชันของเราสร้างขึ้นโดยใช้ 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) ซึ่งจะมีลิงค์ไปยังหน้าต้อนรับ (welcome.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กจะเป็น "สวัสดี" + ค่าของ nameตัวแปร ซึ่งเราจะตั้งค่าในโค้ด Java

ขั้นตอนที่ 3 การสร้างตัวควบคุม

ภายในแพ็คเกจ mvc_demo เราจะสร้างแพ็คเกจ contoller ซึ่งเราจะสร้างคอนโทรลเลอร์ของเรา 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 ที่ส่งไปยัง URL ที่ระบุ ชั้นเรียนของเรามีเมธอด helloWorldController ที่มีเครื่องหมาย @RequestMapping(value = "/greeting") คำอธิบายประกอบ คำอธิบายประกอบนี้บ่งชี้ว่าเมธอดนี้ประมวลผลคำขอ HTTP GET ที่ส่งตรงไปยัง /greeting URL กล่าวอีกนัยหนึ่ง เมธอดนี้จะถูกเรียกใช้หากมีคนนำทางไปยัง /greeting วิธีนี้คืนค่าสตริง ตาม Spring MVC วิธีการควบคุมควรส่งคืนชื่อของมุมมอง ถัดไป Spring จะค้นหาไฟล์ HTML ที่มีชื่อเดียวกัน ซึ่งจะส่งกลับเป็นการตอบกลับคำขอ HTTP อย่างที่เห็น, วิธีของเราใช้เวลา 2 ข้อโต้แย้ง ลองดูที่พารามิเตอร์ 1: @RequestParam(name = "name", required = false, defaultValue = "World") String name คำอธิบายประกอบ @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 คือ "สวัสดี" + ค่าของตัวแปรชื่อ ซึ่งเราจะตั้งค่าในโค้ด Java เราตั้งค่านี้โดยใช้บรรทัด model.addAttribute("name", name);

ขั้นตอนที่ 5 เรียกใช้

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

1. ผู้ใช้ส่ง "name=Amigo" ใน URL ->
2. คอนโทรลเลอร์ประมวลผลการกระทำของเรา รับชื่อตัวแปร และตั้งค่าแอตทริบิวต์ของโมเดลที่ชื่อ name เท่ากับค่าที่ได้รับ ->
3. ข้อมูลนี้มาจากแบบจำลองซึ่งลงท้ายด้วยหน้า greeting.html และแสดงต่อผู้ใช้

แค่นี้ก่อน!