กวดวิชา Spring MVC Framework ที่ง่ายที่สุด – ตัวอย่าง Hello World พร้อม UI (JSP) Page

เผยแพร่แล้ว: 2019-02-23
กวดวิชา Spring MVC - Crunchify บทช่วยสอน

สถาปัตยกรรม Model-View-Controller (MVC) เป็นวิธีที่ง่ายที่สุดในการพัฒนาเว็บแอปพลิเคชันที่เชื่อมต่อกันอย่างอิสระและยืดหยุ่น

ในบทช่วยสอนนี้ เราจะอธิบายวิธีสร้างแอปพลิเคชัน Spring MVC ครั้งที่ 1 ของคุณด้วยขั้นตอนที่ละเอียดมาก

คุณมีคำถามด้านล่างหรือไม่?

  • พื้นฐานของ Spring MVC 5.2.3
  • การพัฒนาแอปพลิเคชัน Spring Framework MVC 5 ทีละขั้นตอน..
  • java – บทช่วยสอน Spring MVC ตั้งแต่เริ่มต้น
  • บทช่วยสอนที่รวดเร็วของ Spring MVC
  • บทช่วยสอน Spring MVC Framework
  • บทช่วยสอนการใช้งาน Spring MVC ครั้งแรก
  • บทช่วยสอน Spring 5.x MVC, การสาธิต AJAX, การสาธิต jQuery, การสาธิต JavaScript, เคล็ดลับและเทคนิค Spring 5 MVC

ถ้าอย่างนั้นคุณก็มาถูกที่แล้ว ฉันจะสาธิต Spring MVC framework อย่างง่ายสำหรับการสร้างเว็บแอปพลิเคชัน

อย่างแรกเลย – มาตั้งค่าสภาพแวดล้อมกันเถอะ

บทช่วยสอนอัปเดตและยืนยันล่าสุด: กันยายน 2020 พร้อมเวอร์ชันเครื่องมือด้านล่าง

ฉันใช้เครื่องมือด้านล่างซึ่งคุณอาจต้องดาวน์โหลดหากคุณยังไม่มี

  1. Tomcat 9.0.38 – ดาวน์โหลด Apache Tomcat ล่าสุดจากลิงค์นี้
  2. ตรวจสอบให้แน่ใจว่าคุณดาวน์โหลด Eclipse IDE สำหรับ Java EE Developers (2020‑09 R) – ลิงก์ดาวน์โหลด (แผนภาพด้านล่าง)
  3. Spring 5.2.9.RELEASE (ไม่ต้องดาวน์โหลด) – เราจะใช้การพึ่งพา Maven
  4. JDK 15 – ลิงค์ดาวน์โหลด
บทช่วยสอน Spring MVC ที่ง่ายที่สุดโดย Crunchify.com

ตรวจสอบให้แน่ใจว่าคุณดาวน์โหลด Java EE Developer Kit ล่าสุด:

Eclipse โฟตอน IDE 4.8.0

เป้าหมายหลัก

เป้าหมายหลักสำหรับบทช่วยสอนนี้เพื่อสร้าง Spring MVC Application ด้วยวิธีที่ง่ายที่สุด


ก่อนที่เราจะเริ่มต้น เรามาดูกันว่าเราจะได้เห็นอะไรในตอนท้ายของบทช่วยสอนนี้

นี่คือลักษณะที่ application result ของเราจะมีลักษณะเช่นนี้ นี่เป็นผลลัพธ์สุดท้ายเมื่อคุณทำตามขั้นตอนด้านล่างทั้งหมดแล้ว

นี่คือผลลัพธ์สุดท้าย: หน้าต้อนรับ ==> index.jsp

CrunchifySpringMVCTtutorial index.jsp หน้า

ผลลัพธ์ที่ได้มาจาก Controller Class

ข้อความมาจากผู้ควบคุม

มาเริ่มกันเลยกับบทช่วยสอน

ขั้นตอนที่ 1

  • เปิด Eclipse
  • สร้าง New Eclipse Workspace – สิ่งนี้จะ must หลีกเลี่ยงปัญหาการกำหนดค่าพื้นที่ทำงานที่มีอยู่
สร้าง Eclipse Workspace ใหม่ - Crunchify Tips

ขั้นตอนที่ 2

  • คลิกที่ File
  • คลิกที่ New
  • เลือก Dynamic Web Project
  • หน้าต่างป๊อปอัปหนึ่งหน้าต่าง ระบุชื่อโปรเจ็กต์: CrunchifySpringMVCTutorial
  • ตรวจสอบให้แน่ใจว่าคุณใช้ Target Runtime เป็น Apache Tomcat 9.0
    • หากคุณไม่เห็น Target Runtime ให้ทำตามขั้นตอนเหล่านี้
  • เลือกการกำหนดค่าเป็นการ Default Configuration
สร้าง Crunchify Spring MVC Dynamic Web Project

ขั้นตอนที่ 3

แปลง Project เป็น Maven Project เพื่อเพิ่มการพึ่งพา Spring MVC ที่จำเป็นทั้งหมดให้กับโปรเจ็กต์

ขั้นตอน:

  • คลิกขวาที่โครงการ
  • กำหนดค่า
  • แปลงเป็นโครงการ Maven
แปลง Dynamic Web Project เป็น Maven Project
แปลง CrunchifySpringMVCTutorial เป็นโปรเจ็กต์ Maven

ขั้นตอนที่ 4

เปิดไฟล์ pom.xml และเพิ่ม jar dependencies ด้านล่างให้กับโครงการ

Crunchify Spring MVC pom.xml การพึ่งพา

NOTE: นี่คือไฟล์ pom.xml ของฉัน ตรวจสอบให้แน่ใจว่าคุณได้อัปเดต Java เวอร์ชันเป็น 13 หากคุณยังไม่ได้ย้ายไปยัง JDK 13 เราจะอัปเดตบทช่วยสอนนี้เป็นเวอร์ชัน Spring MVC ล่าสุด

ดังนั้นด้านล่างไฟล์ pom.xml อาจมีการพึ่งพา Spring MVC (ล่าสุด) เวอร์ชันที่แตกต่างจากภาพด้านบน

ขั้นตอนที่ -5

สร้างไฟล์ Spring Configuration Bean ใหม่: /WebContent/WEB-INF/crunchify-servlet.xml

สร้างไฟล์ crunchify-servlet.xml - โครงการ Spring MVC

crunchify-servlet.xml

ใน crunchify-servlet.xml . ด้านบน   ไฟล์การกำหนดค่า เราได้กำหนดแท็ก <context:component-scan> ซึ่งจะทำให้ Spring สามารถโหลดส่วนประกอบทั้งหมดจากแพ็คเกจ com.crunchify.controller และแพ็คเกจย่อยทั้งหมดได้

สิ่งนี้จะโหลด CrunchifyHelloWorld.class ของเรา นอกจากนี้เรายังได้กำหนด bean viewResolver bean นี้จะแก้ไขมุมมองและเพิ่มสตริงคำนำหน้า /WEB-INF/jsp/ และส่วนต่อท้าย .jsp ให้กับมุมมองใน ModelAndView

โปรดทราบว่าในคลาส CrunchifyHelloWorld ของเรา เราได้ส่งคืนวัตถุ ModelAndView พร้อมชื่อมุมมองที่ยินดีต้อนรับ

สิ่งนี้จะได้รับการแก้ไขเป็น path /WEB-INF/jsp/welcome.jsp

ขั้นตอนที่ 6

สร้างไฟล์ใหม่ web.xml หากยังไม่มี แม็พ Spring MVC ในไฟล์ /WebContent/WEB-INF/web.xml

NOTE: หากคุณไม่เห็นไฟล์ web.xml ใน “ dynamic web project ” ให้ทำตามขั้นตอนเหล่านี้

web.xml

โค้ดด้านบนใน web.xml จะจับคู่ DispatcherServlet กับ url pattern /welcome.jsp โปรดทราบว่าเราได้กำหนด index.jsp เป็นไฟล์ต้อนรับ

สิ่งหนึ่งที่ควรทราบที่นี่คือชื่อของ servlet ในแท็ก <servlet-name> ใน web.xml เมื่อเริ่มต้น DispatcherServlet มันจะค้นหาชื่อไฟล์ [servlet-name]-servlet.xml ในโฟลเดอร์ WEB-INF ของเว็บแอปพลิเคชัน ในตัวอย่างนี้ เฟรมเวิร์กจะค้นหาไฟล์ชื่อ crunchify-servlet.xml

ขั้นตอนที่ 7

สร้างคลาสคอนโทรลเลอร์

  • คลิกขวาที่ Java Resources -> src
  • คลิก New -> Class
  • แพ็คเกจ: com.crunchify.controller
  • ชื่อไฟล์: CrunchifyHelloWorld.java
สร้าง Spring Controller Class CrunchifyHelloWorld

CrunchifyHelloWorld.java

โปรดทราบว่าเราได้ใส่คำอธิบายประกอบคลาส CrunchifyHelloWorld ด้วย @Controller และ @RequestMapping("/welcome") เมื่อ Spring สแกนแพ็คเกจของเรา มันจะรับรู้ว่า bean นี้เป็น Controller bean สำหรับการประมวลผลคำขอ คำอธิบายประกอบ @RequestMapping บอก Spring ว่าคอนโทรลเลอร์นี้ควรประมวลผลคำขอทั้งหมดที่ขึ้นต้นด้วย /welcome ในเส้นทาง URL ซึ่งรวมถึง /welcome/* และ /welcome.html

วิธี helloWorld() ส่งกลับวัตถุ ModelAndView ออบเจ็กต์ ModelAndView พยายามแก้ไขมุมมองที่ชื่อว่า "ยินดีต้อนรับ" และโมเดลข้อมูลกำลังถูกส่งกลับไปยังเบราว์เซอร์ เพื่อให้เราสามารถเข้าถึงข้อมูลภายใน JSP ได้ ชื่อมุมมองแบบลอจิคัลจะแก้ไขเป็น /WEB-INF/jsp/welcome.jsp ชื่อตรรกะ “ยินดีต้อนรับ” ซึ่งส่งคืนในวัตถุ ModelAndView ถูกแมปกับเส้นทาง /WEB-INF/jsp/welcome.jsp

วัตถุ ModelAndView ยังมีข้อความที่มีคีย์ "ข้อความ" และค่ารายละเอียด นี่คือข้อมูลที่เรากำลังส่งต่อไปยังมุมมองของเรา โดยปกตินี่จะเป็นออบเจ็กต์ค่าในรูปแบบของ java bean ซึ่งจะมีข้อมูลที่จะแสดงในมุมมองของเรา ที่นี่เราเพียงแค่ส่งสตริง

ขั้นตอนที่-8

มุมมอง – สร้างไฟล์ใหม่ /WebContent/index.jsp

index.jsp

สร้างไฟล์อื่น /WebContent/WEB-INF/jsp/welcome.jsp

NOTE: อย่าลืมสร้างโฟลเดอร์ jsp และใส่ welcome.jsp ไว้ข้างใน

ยินดีต้อนรับ.jsp

หลังจากทุกอย่างเป็นลักษณะพื้นที่ทำงานของคุณควรมีลักษณะเช่นนี้

โครงสร้างโปรเจ็กต์การสอน Spring MVC ที่ง่ายที่สุด - Crunchify

ขั้นตอนที่ 9

คลิกขวาที่ Project -> Run As -> Maven Build...

Maven Run-as - Maven Build ใน Eclipse IDE

Add Goals : clean install ใหม่ทั้งหมด คลิก Apply ไปใช้และ Run

ล้างการติดตั้งโปรเจ็กต์ maven Spring

คุณควรเห็น success message :

Spring MVC Maven Clean ติดตั้งสร้างข้อความสำเร็จ

ไฟล์ .jar ทั้งหมดของฉันอยู่ที่ไหน

คุณจะเห็นไฟล์ .jar ทั้งหมดภายใต้โฟลเดอร์ /target ภาพหน้าจอ

ขั้นตอนที่ -10

  • หากคุณ don't see Tomcat Server ในแท็บ Servers ให้ทำตามขั้นตอนเพื่อเพิ่ม Apache Tomcat ไปยัง Eclipse
  • ปรับใช้โปรเจ็กต์กับ Apache Tomcat
    • คลิกขวา
    • เพิ่มและลบ
    • เพิ่มโครงการไปยังเซิร์ฟเวอร์ (ส่วนด้านขวา)
  • คลิกที่เริ่ม
เริ่ม Apache Tomcat ใน Eclipse - Crunchify Tips

ตรวจสอบให้แน่ใจว่าคุณเห็นบันทึกด้านล่าง นั่นหมายความว่าแอปพลิเคชันของคุณปรับใช้ได้สำเร็จบน Tomcat Web Server

ขั้นตอนที่ 11 เสร็จแล้ว.

เยี่ยมชม: http://localhost:8080/CrunchifySpringMVCTutorial/ และคุณควรพร้อม

ไชโย.. ตอนนี้คุณรู้แล้ว Hello World Spring MVC 5 Example แจ้งให้เราทราบหากคุณพบข้อยกเว้นใด ๆ ขณะเรียกใช้สิ่งนี้ มีตัวอย่างอีกมากมายที่คุณสามารถหาได้ที่นี่

Do you want to include JS, CSS and images into JSP file? ทำตามบทช่วยสอนนี้: วิธีที่ดีที่สุดในการเพิ่ม/รวม JS, CSS และรูปภาพลงในไฟล์ JSP โดยใช้ 'mvc:resources mapping'


มีปัญหา? มีปัญหาอะไรไหม

Triaging Step-1 – มีข้อผิดพลาดสถานะ HTTP 404 หรือไม่

ตรวจสอบให้แน่ใจว่าไฟล์ welcome.jsp อยู่ในโฟลเดอร์ jsp
นอกจากนี้ ทำตามกวดวิชาด้านล่าง:

ทดลองขั้นตอนที่ 2 – URL ใช้งานไม่ได้? ข้อผิดพลาดของทอมแคท?

ตรวจสอบให้แน่ใจว่าคุณเพิ่ม Apache Tomcat Server ไปยัง Targeted Runtime ซึ่งคุณอาจเลือกไว้ใน Step-1 Tomcat 7 หรือ 8 ใด ๆ – เซิร์ฟเวอร์ควรใช้งานได้

บทช่วยสอน Spring MVC - การตั้งค่ารันไทม์เป้าหมายของ Eclipse

Triaging Step-3 – เกิดข้อผิดพลาด?

ตรวจสอบให้แน่ใจว่าได้อัปเดตการพึ่งพา maven ทั้งหมด

บังคับให้อัปเดตการพึ่งพา - บทช่วยสอน Spring MVC

โปรดส่งอีเมลหรือแสดงความคิดเห็นด้านล่างหากคุณมีปัญหาในการใช้งานบทช่วยสอนด้านบน