أبسط برنامج تعليمي لإطار MVC الربيعي - صفحة مرحبًا بالعالم مع واجهة المستخدم (JSP)

نشرت: 2019-02-23
Spring MVC التعليمي - دروس Crunchify

توفر بنية Model-View-Controller (MVC) أبسط طريقة لتطوير تطبيقات الويب المرنة وغير المترابطة.

سننتقل في هذا البرنامج التعليمي إلى كيفية إنشاء تطبيق 1st Spring MVC الخاص بك بخطوات مفصلة للغاية.

هل لديك أي من الأسئلة أدناه؟

  • أساسيات Spring MVC 5.2.3
  • تطوير تطبيق Spring Framework MVC 5 خطوة بخطوة ..
  • جافا - Spring MVC تعليمي من البداية
  • الربيع MVC سريع تعليمي
  • الربيع MVC الإطار التعليمي
  • أول برنامج تعليمي لتطبيق Spring MVC
  • الربيع 5.x دروس MVC ، AJAX التجريبي ، jQuery Demo ، JavaScript Demo ، Tips & Tricks Spring 5 MVC

اذا انت في المكان الصحيح. سأوضح هنا Spring MVC framework البسيط لبناء تطبيقات الويب.

أول شيء أولاً - لنقم بإعداد البيئة

آخر تحديث للبرنامج التعليمي والتحقق منه: سبتمبر 2020 مع إصدارات الأداة أدناه.

أنا أستخدم الأدوات أدناه التي قد تحتاج إلى تنزيلها إذا لم تكن قد قمت بتنزيلها بالفعل.

  1. Tomcat 9.0.38 - قم بتنزيل أحدث إصدار من Apache Tomcat من هذا الرابط.
  2. تأكد من تنزيل Eclipse IDE لمطوري Java EE (2020‑09 R) - رابط التنزيل. (الرسم البياني أدناه)
  3. Spring 5.2.9.RELEASE (لا يلزم التنزيل) - سنستخدم تبعية Maven.
  4. JDK 15 - رابط التحميل.
أبسط برنامج تعليمي Spring MVC بواسطة Crunchify.com

تأكد من تنزيل أحدث مجموعة مطور Java EE :

كسوف فوتون IDE 4.8.0

الهدف الرئيسي

الهدف الرئيسي لهذا البرنامج التعليمي هو إنشاء تطبيق Spring MVC بأبسط طريقة.

قبل أن نبدأ ، دعونا نرى ما سنراه في نهاية هذا البرنامج التعليمي

هكذا ستبدو application result طلبنا. هذه نتيجة نهائية بمجرد إكمال جميع الخطوات أدناه.

ها هي النتيجة النهائية: صفحة الترحيب ==> index.jsp

صفحة CrunchifySpringMVCTutorial index.jsp

إرجاع النتيجة من فئة وحدة التحكم

رسالة واردة من المراقب المالي

لنبدأ الآن في البرنامج التعليمي

الخطوة 1

  • افتح الكسوف
  • إنشاء New Eclipse Workspace - must يتم ذلك لتجنب أي مشكلة في تكوين مساحة العمل الحالية.
قم بإنشاء مساحة عمل Eclipse جديدة - تلميحات Crunchify

الخطوة 2

  • انقر فوق File
  • انقر فوق New
  • اختر Dynamic Web Project
  • نافذة منبثقة واحدة ، أدخل اسم المشروع: CrunchifySpringMVCTutorial
  • تأكد من استخدام Target Runtime مثل Apache Tomcat 9.0
    • إذا كنت لا ترى وقت التشغيل المستهدف ، فاتبع هذه الخطوات
  • اختر التكوين كتكوين Default Configuration
قم بإنشاء مشروع الويب الديناميكي Crunchify Spring MVC

الخطوه 3

قم بتحويل المشروع إلى مشروع Maven لإضافة جميع تبعيات Spring MVC المطلوبة إلى المشروع.

خطوات:

  • انقر بزر الماوس الأيمن على المشروع
  • تهيئة
  • قم بالتحويل إلى مشروع Maven
تحويل مشروع الويب الديناميكي إلى مشروع Maven
تحويل CrunchifySpringMVCT البرنامج التعليمي إلى مشروع Maven

الخطوة 4

افتح ملف pom.xml وأضف jar dependencies أدناه إلى المشروع.

Crunchify Spring MVC pom.xml التبعيات

NOTE: هنا ملف pom.xml بي. تأكد من تحديث إصدار Java إلى 13 إذا لم تكن قد انتقلت إلى JDK 13 بعد. سنستمر في تحديث هذا البرنامج التعليمي إلى أحدث إصدار من Spring MVC.

لذلك قد يحتوي ملف pom.xml أدناه على إصدار مختلف (أحدث) من تبعيات Spring MVC عن الصورة أعلاه

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
< 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 http://maven.apache.org/xsd/maven-4.0.0.xsd" >
< modelVersion > 4.0.0 < / modelVersion >
< groupId > CrunchifySpringMVCTutorial < / groupId >
< artifactId > CrunchifySpringMVCTutorial < / artifactId >
< version > 0.0.1 - SNAPSHOT < / version >
< packaging > war < / packaging >
< build >
< sourceDirectory > src < / sourceDirectory >
< plugins >
< plugin >
< artifactId > maven - compiler - plugin < / artifactId >
< version > 3.8.0 < / version >
< configuration >
< release > 13 < / release >
< / configuration >
< / plugin >
< plugin >
< artifactId > maven - war - plugin < / artifactId >
< version > 3.2.1 < / version >
< configuration >
< warSourceDirectory > WebContent < / warSourceDirectory >
< / configuration >
< / plugin >
< / plugins >
< / build >
< dependencies >
< dependency >
< groupId > org . springframework < / groupId >
< artifactId > spring - core < / artifactId >
< version > 5.2.3.RELEASE < / version >
< / dependency >
< dependency >
< groupId > org . springframework < / groupId >
< artifactId > spring - context < / artifactId >
< version > 5.2.3.RELEASE < / version >
< / dependency >
< dependency >
< groupId > org . springframework < / groupId >
< artifactId > spring - aop < / artifactId >
< version > 5.2.3.RELEASE < / version >
< / dependency >
< dependency >
< groupId > org . springframework < / groupId >
< artifactId > spring - webmvc < / artifactId >
< version > 5.2.3.RELEASE < / version >
< / dependency >
< dependency >
< groupId > org . springframework < / groupId >
< artifactId > spring - web < / artifactId >
< version > 5.2.3.RELEASE < / version >
< / dependency >
 
< dependency >
< groupId > javax . servlet < / groupId >
< artifactId > jstl < / artifactId >
< version > 1.2 < / version >
< / dependency >
< / dependencies >
< / project >

الخطوة 5

قم بإنشاء ملف Bean تكوين الربيع الجديد: /WebContent/WEB-INF/crunchify-servlet.xml

قم بإنشاء ملف crunchify-servlet.xml - مشروع Spring MVC

crunchify-servlet.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<? xml version = "1.0" encoding = "UTF-8" ?>
< beans xmlns = "http://www.springframework.org/schema/beans"
xmlns : mvc = "http://www.springframework.org/schema/mvc"
xmlns : context = "http://www.springframework.org/schema/context"
xmlns : xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi : schemaLocation = "
        http://www.springframework.org/schema/beans    
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd" >
 
< mvc : annotation - driven / >
< context : component - scan
base - package = "com.crunchify.controller" / >
< mvc : default - servlet - handler / >
 
< bean id = "viewResolver"
class = "org.springframework.web.servlet.view.UrlBasedViewResolver" >
< property name = "viewClass"
value = "org.springframework.web.servlet.view.JstlView" / >
< property name = "prefix" value = "/WEB-INF/jsp/" / >
< property name = "suffix" value = ".jsp" / >
< / bean >
 
< / beans >

في ملف crunchify-servlet.xml أعلاه   ملف التكوين ، لقد حددنا علامة <context:component-scan> . سيسمح هذا لـ Spring بتحميل جميع المكونات من الحزمة com.crunchify.controller وجميع الحزم التابعة لها.

سيؤدي هذا إلى تحميل CrunchifyHelloWorld.class . كما قمنا بتعريف طريقة عرض viewResolver . ستعمل وحدة الفول هذه على حل العرض وإضافة سلسلة البادئة /WEB-INF/jsp/ واللاحقة .jsp إلى طريقة العرض في ModelAndView.

لاحظ أنه في فئة CrunchifyHelloWorld ، قمنا بإرجاع كائن ModelAndView مع اسم العرض مرحب به.

سيتم حل هذا إلى المسار /WEB-INF/jsp/welcome.jsp .

الخطوة 6

قم بإنشاء ملف جديد web.xml إذا لم يكن موجودًا بالفعل. قم بتعيين Spring MVC في ملف /WebContent/WEB-INF/web.xml .

NOTE: إذا كنت لا ترى ملف web.xml في " dynamic web project " ، فاتبع هذه الخطوات.

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<? xml version = "1.0" encoding = "UTF-8" ?>
< web - app xmlns : xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns = "http://xmlns.jcp.org/xml/ns/javaee" xsi : schemaLocation = "http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id = "WebApp_ID" version = "4.0" >
   < display - name > CrunchifySpringMVCTutorial < / display - name >
   < welcome - file - list >
     < welcome - file > index . html < / welcome - file >
     < welcome - file > index . htm < / welcome - file >
     < welcome - file > index . jsp < / welcome - file >
     < welcome - file > default . html < / welcome - file >
     < welcome - file > default . htm < / welcome - file >
     < welcome - file > default . jsp < / welcome - file >
   < / welcome - file - list >
  
       < servlet >
         < servlet - name > crunchify < / servlet - name >
         < servlet - class >
             org . springframework . web . servlet . DispatcherServlet
         < / servlet - class >
         < load - on - startup > 1 < / load - on - startup >
     < / servlet >
     < servlet - mapping >
         < servlet - name > crunchify < / servlet - name >
         < url - pattern > / welcome . jsp < / url - pattern >
         < url - pattern > / index . jsp < / url - pattern >
         < url - pattern > / welcome . html < / url - pattern >
         < url - pattern > * . html < / url - pattern >
     < / servlet - mapping >
  
< / web - app >

الكود أعلاه في web.xml سيعين DispatcherServlet بنمط عنوان url /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
قم بإنشاء فئة تحكم الربيع CrunchifyHelloWorld

CrunchifyHelloWorld.java

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com . crunchify . controller ;
 
import org . springframework . stereotype . Controller ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . servlet . ModelAndView ;
 
/*
* author: Crunchify.com
*
*/
 
@Controller
public class CrunchifyHelloWorld {
 
@RequestMapping ( "/welcome" )
public ModelAndView helloWorld ( ) {
 
String message = "<br><div>"
+ "<h3>********** Hello World, Spring MVC Tutorial</h3>This message is coming from CrunchifyHelloWorld.java **********</div><br><br>" ;
return new ModelAndView ( "welcome" , "message" , message ) ;
}
}

لاحظ أننا قمنا بإضافة تعليقات توضيحية إلى فئة CrunchifyHelloWorld باستخدام @Controller و @RequestMapping("/welcome") . عندما يقوم Spring بمسح الحزمة الخاصة بنا ، فسوف يتعرف على هذه الحبة على أنها وحدة تحكم لمعالجة الطلبات. يخبر التعليق التوضيحي @RequestMapping Spring أن وحدة التحكم هذه يجب أن تعالج جميع الطلبات التي تبدأ بـ / مرحبًا بها في مسار URL. يتضمن /welcome/* و /welcome.html .

تقوم طريقة helloWorld () بإرجاع كائن ModelAndView . يحاول كائن ModelAndView حل الملف الشخصي المسمى "مرحبًا" ويتم تمرير نموذج البيانات مرة أخرى إلى المتصفح حتى نتمكن من الوصول إلى البيانات داخل JSP. سيتم تحليل اسم العرض المنطقي إلى /WEB-INF/jsp/welcome.jsp . يتم تعيين الاسم المنطقي "ترحيب" الذي يتم إرجاعه في كائن ModelAndView إلى المسار /WEB-INF/jsp/welcome.jsp.

يحتوي كائن ModelAndView أيضًا على رسالة بها مفتاح "message" وقيمة تفصيلية. هذه هي البيانات التي ننقلها إلى رأينا. عادةً ما يكون هذا كائن قيمة في شكل java bean الذي سيحتوي على البيانات التي سيتم عرضها في وجهة نظرنا. نحن هنا ببساطة نمرر سلسلة.

الخطوة 8

العرض - إنشاء ملف جديد /WebContent/index.jsp .

index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< html >
< head >
< title > Spring MVC Tutorial Series by Crunchify . com < / title >
<style type ="text/css">
body {
background-image : url ( 'https://cdn.crunchify.com/bg.png' ) ;
}
</style>
< / head >
< body >
< br >
< div style = "text-align: center" >
< h2 >
Hey You . . ! ! This is your 1st Spring MCV Tutorial . . < br > < br >
< / h2 >
< h3 >
< a href = "welcome.html" > Click here to See Welcome Message . . . < / a > ( to
check Spring MVC Controller . . . @ RequestMapping ( "/welcome" ) )
< / h3 >
< / div >
< / body >
< / html >

قم بإنشاء ملف آخر /WebContent/WEB-INF/jsp/welcome.jsp .

NOTE: لا تنس إنشاء مجلد jsp ووضع welcome.jsp .jsp بداخله

أهلا وسهلا بك. jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< html >
< head >
< title > Spring MVC Tutorial by Crunchify - Hello World Spring MVC
Example < / title >
<style type ="text/css">
body {
background-image : url ( 'https://cdn.crunchify.com/bg.png' ) ;
}
</style>
< / head >
< body > $ { message }
 
< br >
< br >
< div
style = "font-family: verdana; padding: 10px; border-radius: 10px; font-size: 12px; text-align: center;" >
 
Spring MCV Tutorial by < a href = "https://crunchify.com" > Crunchify < / a > .
Click < a href = "https://crunchify.com/category/java-tutorials/"
target = "_blank" > here < / a > for all Java and < a
href = 'https://crunchify.com/category/spring-mvc/' target = '_blank' > here < / a >
for all Spring MVC , Web Development examples . < br >
< / div >
< / body >
< / html >

بعد كل شيء هكذا يجب أن تبدو مساحة العمل الخاصة بك.

أبسط هيكل مشروع تعليمي لفصل الربيع MVC - Crunchify

الخطوة 9

انقر بزر الماوس الأيمن على Project -> Run As -> Maven Build...

Maven Run-as - Maven Build في Eclipse IDE

Add Goals : clean install . انقر فوق Apply Run .

تنظيف مشروع نبع التثبيت المخضرم

يجب أن ترى success message البناء:

Spring MVC Maven Clean Install إنشاء رسالة نجاح

أين توجد جميع ملفات .jar الخاصة بي؟

سترى جميع ملفات .jar ضمن /target . لقطة شاشة.

الخطوة 10

  • إذا كنت don't see Tomcat Server في علامة تبويب Servers ، فاتبع الخطوات لإضافة Apache Tomcat إلى Eclipse.
  • انشر المشروع على Apache Tomcat
    • انقر على اليمين
    • إضافة وإزالة
    • أضف المشروع إلى الخادم (القسم الأيمن).
  • انقر فوق ابدأ.
ابدأ Apache Tomcat في Eclipse - Crunchify Tips

تأكد من أنك ترى السجلات أدناه. هذا يعني أن تطبيقك قد تم نشره بنجاح على Tomcat Web Server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Aug 04 , 2018 9 : 08 : 10 PM org . apache . tomcat . util . digester . SetPropertiesRule begin
WARNING : [ SetPropertiesRule ] { Server / Service / Engine / Host / Context } Setting property 'source' to 'org.eclipse.jst.jee.server:CrunchifySpringMVCTutorial' did not find a matching property .
INFO : Server version :          Apache Tomcat / 9.0.10
INFO : Server built :            Jun 20 2018 17 : 32 : 21 UTC
INFO : Server number :          9.0.10.0
INFO : OS Name :                Mac OS X
INFO : OS Version :              10.13.6
INFO : Architecture :            x86_64
INFO : Java Home :              / Library / Java / JavaVirtualMachines / jdk - 10.0.2.jdk / Contents / Home
INFO : JVM Version :            10.0.2 + 13
INFO : JVM Vendor :              "Oracle Corporation"
INFO : CATALINA_BASE :          / Users / appshah / Documents / jee - photon / workspace / c / . metadata / . plugins / org . eclipse . wst . server . core / tmp0
INFO : CATALINA_HOME :          / Users / appshah / Documents / jee - photon / apache - tomcat - 9.0.10
INFO : Command line argument : - Dcatalina . base =/ Users / appshah / Documents / jee - photon / workspace / c / . metadata / . plugins / org . eclipse . wst . server . core / tmp0
INFO : Command line argument : - Dcatalina . home =/ Users / appshah / Documents / jee - photon / apache - tomcat - 9.0.10
INFO : Command line argument : - Dwtp . deploy =/ Users / appshah / Documents / jee - photon / workspace / c / . metadata / . plugins / org . eclipse . wst . server . core / tmp0 / wtpwebapps
INFO : Command line argument : - Dfile . encoding = UTF - 8
INFO : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java . library . path : [ / Users / appshah / Library / Java / Extensions : / Library / Java / Extensions : / Network / Library / Java / Extensions : / System / Library / Java / Extensions : / usr / lib / java : . ]
INFO : Initializing ProtocolHandler [ "http-nio-8080" ]
INFO : Using a shared selector for servlet write / read
INFO : Initializing ProtocolHandler [ "ajp-nio-8009" ]
INFO : Using a shared selector for servlet write / read
INFO : Initialization processed in 841 ms
INFO : Starting service [ Catalina ]
INFO : Starting Servlet Engine : Apache Tomcat / 9.0.10
INFO : At least one JAR was scanned for TLDs yet contained no TLDs . Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them . Skipping unneeded JARs during scanning can improve startup time and JSP compilation time .
INFO : At least one JAR was scanned for TLDs yet contained no TLDs . Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them . Skipping unneeded JARs during scanning can improve startup time and JSP compilation time .
INFO : No Spring WebApplicationInitializer types detected on classpath
INFO : Initializing Spring FrameworkServlet 'crunchify'
INFO : FrameworkServlet 'crunchify' : initialization started
INFO : Refreshing WebApplicationContext for namespace 'crunchify-servlet' : startup date [ Sat Aug 04 21 : 08 : 13 CDT 2018 ] ; root of context hierarchy
INFO : Loading XML bean definitions from ServletContext resource [ / WEB - INF / crunchify - servlet . xml ]
INFO : Mapped "{[/welcome]}" onto public org . springframework . web . servlet . ModelAndView com . crunchify . controller . CrunchifyHelloWorld . helloWorld ( )
INFO : Looking for @ ControllerAdvice : WebApplicationContext for namespace 'crunchify-servlet' : startup date [ Sat Aug 04 21 : 08 : 13 CDT 2018 ] ; root of context hierarchy
INFO : Looking for @ ControllerAdvice : WebApplicationContext for namespace 'crunchify-servlet' : startup date [ Sat Aug 04 21 : 08 : 13 CDT 2018 ] ; root of context hierarchy
INFO : Mapped URL path [ /** ] onto handler 'org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler#0'
INFO : FrameworkServlet 'crunchify' : initialization completed in 1607 ms
INFO : Starting ProtocolHandler [ "http-nio-8080" ]
INFO : Starting ProtocolHandler [ "ajp-nio-8009" ]
INFO : Server startup in 3579 ms

الخطوة 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: تعيين الموارد".

واقع في مشكلة؟ أي مشكلة؟

فرز الخطوة 1 - هل لديك خطأ 404 بحالة HTTP؟

تأكد من وجود ملف welcome.jsp داخل مجلد jsp
أيضًا ، اتبع البرنامج التعليمي أدناه:

فرز الخطوة 2 - عنوان URL لا يعمل؟ تومكات خطأ؟

تأكد من إضافة خادم Apache Tomcat إلى Targeted Runtime . التي ربما تكون قد حددتها في Step-1 . Tomcat 7 أو 8 أي - يجب أن يعمل الخادم.

درس الربيع MVC - إعداد وقت تشغيل الهدف الكسوف

فرز الخطوة 3 - أخطاء مخضرمة؟

تأكد من تحديث جميع التبعيات المخضرمة.

تبعيات فرض التحديث - Spring MVC التعليمي

لا تتردد في إرسال بريد إلكتروني أو التعليق أدناه إذا كان لديك أي مشكلة في تشغيل البرنامج التعليمي أعلاه.