מאמר
הַתחָלָה
תתחיל ללמוד
CodeGym /בלוג Java /Random-HE /יצירת יישום אינטרנט פשוט באמצעות servlets ו-JSPs (חלק 1)
John Squirrels
רָמָה
San Francisco

יצירת יישום אינטרנט פשוט באמצעות servlets ו-JSPs (חלק 1)

פורסם בקבוצה
ידע נדרש להבנת המאמר: כבר פחות או יותר הבנתם את Java Core והייתם רוצים להסתכל על טכנולוגיות JavaEE ותכנות אינטרנט . זה יהיה הגיוני ביותר עבורך ללמוד כעת את קווסט אוספי Java , העוסק בנושאים קרובים למאמר.
יצירת יישום אינטרנט פשוט באמצעות servlets ו-JSPs (חלק 1) - 1
החומר הזה הוא ההמשך ההגיוני של המאמר שלי יצירת פרויקט האינטרנט הפשוט ביותר ב- IntelliJ Idea Enterprise . במאמר זה, הדגמתי כיצד ליצור תבנית פרויקט אינטרנט עובדת. הפעם אני אראה לך כיצד ליצור יישום אינטרנט פשוט אך אטרקטיבי לחלוטין באמצעות Java Servlet API ו- JavaServer Pages API . לאפליקציה שלנו יהיה דף בית עם שני קישורים:
  • קישור לדף להוספת משתמשים;
  • קישור לרשימת המשתמשים.
כמו קודם, אשתמש ב- IntelliJ Idea Enterprise Edition , Apache Maven (רק נחבר כמה תלות), ו- Apache Tomcat . בסופו של דבר, "נייפה" את האפליקציה שלנו באמצעות מסגרת W3.CSS . נניח שכבר יש לך פרויקט ריק שעכשיו נוסיף אליו. אם לא, עברו על המאמר הראשון והכינו אחד. זה ייקח רק כמה דקות :)

קצת על מבנה האפליקציה העתידית שלנו

דף הבית שלנו (/) יהיה דף HTML סטטי רגיל ביותר עם כותרת ושני קישורים/לחצנים:
  • הוסף משתמש חדש (מנווט אל / הוסף );
  • הצג את רשימת המשתמשים (מנווט אל / רשימה ).
Tomcat יתפוס בקשות עבור כתובות אלו וישלח אותן לאחד משני הסרבלטים שאנו עומדים לבצע (נציין את המיפוי ב- web.xml ). לאחר מכן, ה-servlets יעבדו את הבקשות, יכינו נתונים (או ישמרו נתונים, אם אנחנו מוסיפים משתמש), ויעבירו את השליטה לקבצי ה- JSP המתאימים , אשר לאחר מכן "מעבדים" את התוצאה. נאחסן את הנתונים ברשימת וניל רגילה (רשימה).

צור דף בית סטטי

אם אתה index.jsp בתיקיית האינטרנט שלך, מחק אותה. במקום זאת, צור קובץ HTML פשוט בשם index.html בתיקייה זו: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My super project!</title>
</head>
<body>
    <!-- header -->
    <div>
        <h1>Super app!<//h1>
    </div>

    <div>       <!-- content -->
        <div>    <!-- button holder -->
            <button onclick="location.href='/list'">List users<//button>
            <button onclick="location.href='/add'">Add user<//button>
        </div>
    </div>
</body>
</html>
אין כאן שום דבר מסובך. בתגית הכותרת , אנו מציינים את הכותרת של הדף שלנו. בגוף העמוד, יש לנו שני divs עיקריים : כותרת ותוכן . div התוכן כולל מחזיק לכפתורים שלנו. ושם יש לנו שני כפתורים שלוקחים אותך בלחיצה לכתובת המתאימה. אתה יכול להפעיל את הפרויקט ולראות איך הוא נראה עכשיו. אם תלחץ על הכפתורים, תקבל דפי 404 שגיאה , כי אנחנו הדפים המתאימים עדיין לא קיימים. אבל אנחנו יכולים לדעת שהכפתורים עובדים. שימו לב שזו לא הגישה האוניברסלית ביותר: אם JavaScript כבוי בדפדפן, הכפתורים האלה לא יעבדו. אבל נניח שאף אחד לא משבית את JavaScript. :) ברור שאפשר להסתדר עם קישורים פשוטים, אבל אני מעדיף כפתורים. אתה יכול לעשות את זה איך שאתה מעדיף. ואל תדאג לגבי העובדה שלדוגמאות שלי יהיו הרבה divs . נמלא אותם בסגנונות אחר כך, והכל יראה יפה יותר. :)

צור קובצי JSP כדי לעבד את התוצאה

באותה ספריית אינטרנט , צור תיקיה שבה נוסיף את קובצי ה-JSP שלנו . קראתי לזה ' צפיות ', אבל שוב אפשר לאלתר. בתיקייה זו, ניצור שני קובצי JSP:
  • add.jsp - דף להוספת משתמשים;
  • list.jsp — עמוד להצגת רשימת המשתמשים.
הקצה להם כותרות עמוד מתאימות. משהו כמו " הוסף משתמש חדש " ו"רשימת משתמשים ", ואנחנו נשאיר את זה ככה.
Java webinar

צור שני servlets

Servlets יקבלו ויעבדו את הבקשות ש- Tomcat שולח להם. בתיקיית src/main/java , צור את חבילת האפליקציה , שם נכניס את קוד המקור שלנו. גם חבילות אחרות יגיעו לשם. לכן, כדי למנוע מהחבילות הללו להיווצר אחת בתוך השנייה, ניצור מחלקה כלשהי בחבילת האפליקציה (נמחק אותה מאוחר יותר). כעת צור שלוש חבילות שונות בחבילת האפליקציה :
  • ישויות - הישויות שלנו (המחלקה המתארת ​​אובייקטים של משתמש) נכנסות לכאן;
  • מודל - לכאן הולך המודל שלנו (נדבר על זה קצת מאוחר יותר);
  • servlets - וכאן הסרבלטים שלנו הולכים.
לאחר שעשיתם זאת, תוכלו למחוק את המחלקה הזו בשלווה מחבילת האפליקציה (אם יצרתם אותה, כמובן). בחבילת servlets , צור שתי מחלקות:
  • AddServlet - מעבד בקשות שנשלחות אל / הוסף ;
  • ListServlet - מעבד בקשות שנשלחות אל / רשימה .

חיבור תלות ב-Maven

Tomcat 9. * מיישמת את המפרטים עבור Servlet 4.0 ו- JavaServer Pages 2.3 . זה מה שנאמר בשורה השנייה של הפסקה הראשונה בתיעוד הרשמי של Tomcat 9. זה אומר שאם אתה, כמוני, משתמש בגרסה זו של Tomcat , אז הקוד שתכתוב ותפעיל ישתמש בגרסאות אלה. אבל היינו רוצים לקבל את המפרטים האלה בפרויקט שלנו, כך שהקוד שלנו, שמשתמש בהם, לפחות יתחבר בהצלחה. וכדי לעשות זאת, עלינו לטעון אותם לפרויקט שלנו. זה המקום שבו מייבן בא להציל.

הכלל הכללי הוא זה: אם אתה צריך לחבר משהו לפרויקט שלך באמצעות Maven:

  • עבור אל אתר המאגר מאבן;
  • למצוא את הגרסה הנדרשת של הספרייה הנדרשת;
  • קבל את קוד התלות שצריך להדביק ב-pom.xml שלך;
  • לְהַדבִּיק! :)
בואו נתחיל. ראשית, הכן את קובץ POM . איפשהו אחרי הערך /version , אבל לפני /project , הכנס את הדברים הבאים: 
<dependencies>

</dependencies>
אנו עושים זאת כדי לציין שנפרט את התלות הנדרשות בתוך התגים הללו. כעת עבור אל mvnrepository.com . יש שדה חיפוש למעלה. כדי להתחיל, חפש ' servlet '. התוצאה הראשונה, שנעשה בה שימוש יותר משבעת אלפים פעמים, מתאימה לנו. זכור, אנו זקוקים לגרסה 4.0 (עבור Tomcat 9 ). גרסאות אחרות עשויות להתאים ליישומים ישנים יותר. זוהי גרסה עדכנית למדי, כך שאין כל כך הרבה שימושים. אבל אנחנו צריכים את זה. נפתח דף שבו אתה יכול לקבל את הקוד עבור התלות הזו עבור מגוון מנהלי חבילות, או שאתה יכול פשוט להוריד אותו. אבל מכיוון שאנו רוצים לחבר אותו באמצעות Maven, נבחר את הקוד בלשונית Maven. אנו מעתיקים ומדביקים בקטע התלות של קובץ ה-POM שלנו. אם אתה מקבל התראה ששואלת אם ברצונך לאפשר ייבוא ​​אוטומטי בפינה הימנית התחתונה של ה- IDEA , המשך והסכים לכך. אם סירבת בטעות, עבור אל " הגדרות " והפעל ייבוא ​​אוטומטי באופן ידני: הגדרות (Ctrl + Alt + S) -> בנייה, ביצוע, פריסה -> Maven -> ייבוא . זה יאפשר לך לשמור את קובץ ה-POM ואת קובצי התצורה של IDEA עבור פרויקט זה מסונכרנים. לפי אותו עיקרון, נמצא ונחבר את JavaServer Pages 2.3 (חפש "JSP"). ומכיוון שכבר התחלנו את Maven, בוא נגיד לה שקובצי המקור שלנו עוקבים אחר תחביר Java 8, ושאנחנו צריכים לקמפל אותם ל-bytecode עבור הגרסה הזו. לאחר כל השלבים האלה, 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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cc.codegym.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compile.source>1.8</maven.compile.source>
        <maven.compile.target>1.8</maven.compile.target>
    </properties>

    <dependencies>
        <!-- Servlet API 4.0 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- JavaServer Pages API 2.3 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

</project>

הפוך את הסרבטים שלנו לסרבטים אמיתיים

כרגע, צמד הסרבלטים שיצרנו הם למעשה שיעורים רגילים. אין להם שום פונקציונליות. אבל עכשיו חיברנו את ה-API של Servlet לפרויקט שלנו, ובהתאם לכך נוכל להשתמש במחלקות שלו. כדי להפוך את הסרבלטים שלנו ל"אמיתיים", כל שעלינו לעשות הוא לגרום להם לרשת את המחלקה HttpServlet .

מיפוי או סימון

עכשיו זה יהיה נחמד איכשהו לומר ל- Tomcat שבקשות עבור הכתובת / add מעובדות על ידי AddServlet שלנו , ובקשות עבור הכתובת / list מטופלות על ידי ListServlet . תהליך זה נקרא מיפוי (סימון). זה נעשה ב- web.xml תוך שימוש באותו עיקרון:
  • כדי להתחיל, תאר את ה-servlet (תן שם כלשהו וציין את הנתיב למחלקה עצמה);
  • ואז לאגד את ה-servlet הזה לכתובת ספציפית (ציין את שם ה-servlet, שזה עתה נתנו לו, וציין את הכתובת שאת הבקשות שלה יש לשלוח ל-servlet הזה).
תאר את הסרבלט: 
<servlet>
    <servlet-name>add</servlet-name>
    <servlet-class>app.servlets.AddServlet</servlet-class>
</servlet>
כעת קשר אותו לכתובת: 
<servlet-mapping>
    <servlet-name>add</servlet-name>
    <url-pattern>/add</url-pattern>
</servlet-mapping>
כפי שאתה יכול לראות, שם השרת זהה בשני המקרים. כתוצאה מכך, Tomcat יודע שאם מתקבלת בקשה ל-/add, יש לשלוח אותה ל-app.servlets.AddServlet. אנחנו עושים את אותו הדבר עם הסרבל השני. בסופו של דבר, ל-web.xml שלנו יש בערך את התוכן הבא: 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- add servlet -->
    <servlet>
        <servlet-name>add</servlet-name>
        <servlet-class>app.servlets.AddServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>add</servlet-name>
        <url-pattern>/add</url-pattern>
    </servlet-mapping>

    <!-- list servlet -->
    <servlet>
        <servlet-name>list</servlet-name>
        <servlet-class>app.servlets.ListServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>list</servlet-name>
        <url-pattern>/list</url-pattern>
    </servlet-mapping>
</web-app>
אגב, לא יצרנו סימון עבור דף הבית (/). העובדה היא שאנחנו לא צריכים את זה במקרה הזה. דף הבית שלנו הוא קובץ HTML פשוט שמציג רק שני כפתורים. אין לו תוכן דינמי, אז אנחנו לא צריכים ליצור servlet נפרד עבור בקשות מ / שלא יעשה דבר מלבד להעביר ביצוע ל- JSP כלשהו (שגם הוא היה צריך להיווצר) כדי לצייר עבורנו שני כפתורים. אנחנו לא צריכים את זה. מתאים לנו עמוד סטטי. כאשר Tomcat יקבל בקשה, הוא יבדוק אם יש servlet בודד שיכול לעבד את הבקשה עבור הכתובת הזו, ואז יראה שהכתובת הזו למעשה כבר מכילה את קובץ ה-HTML המוכן, אותו הוא יגיש. אנחנו יכולים להריץ את האפליקציה שלנו שוב (להפעיל מחדש את השרת או לפרוס אותו מחדש - מה שאתה מעדיף) ולוודא שדף הבית מעובד, שום דבר לא נשבר, והמעברים מתרחשים כשאנחנו לוחצים על הכפתורים (אם כי אנחנו שוב מקבלים שגיאה). אגב, בעוד שקודם קיבלנו שגיאה 404, עכשיו אנחנו מקבלים 405. זה אומר שהמיפוי עבד והסרבלטים נמצאו, אבל לא הייתה להם שיטה מתאימה לטפל בבקשה.

סטייה קצרה: מה קורה "מתחת למכסה המנוע"?

בטח כבר חשבתם על איך האפליקציה שלנו עובדת ב-Tomcat. מה קורה שם? ואיפה השיטה main()? ברגע שאתה עובר אל localhost:8080 בדפדפן שלך, הדפדפן שולח בקשה לכתובת זו באמצעות פרוטוקול HTTP. אני מקווה שאתה כבר מודע לכך שיש סוגים רבים ושונים של בקשות, והפופולריים ביותר הם GET ו-POST. יש לענות על כל בקשה. בקשת GET צפויה לקבל תגובה של קוד HTML מוכן לשימוש, שהוחזר לדפדפן. לאחר מכן הדפדפן מחליף את הקוד עם כל האותיות, הכפתורים והטפסים היפים. בקשת POST היא קצת יותר מעניינת, מכיוון שהיא גם נושאת קצת מידע. לדוגמה, נניח שאתה מזין אישורים בטופס הרשמה או כניסה באתר, ולחץ על "שלח". זה גורם לבקשת POST עם המידע האישי שלך להישלח לשרת. השרת מקבל מידע זה, מעבד אותו ומחזיר תגובה כלשהי (לדוגמה, דף HTML עם הפרופיל שלך). ההבדל העיקרי ביניהן הוא שבקשות GET משמשות רק לאחזור נתונים מהשרת, בעוד שבקשות POST נושאות מידע מסוים (והנתונים בשרת יכולים להשתנות). לדוגמה, כאשר אתה מעלה את התמונה שלך לשרת, היא מועברת לשם בבקשת POST והשרת מוסיף אותה למסד הנתונים, כלומר מתרחש שינוי. עכשיו בחזרה לטומקאט. כאשר הוא מקבל בקשה מלקוח, הוא מסתכל על הכתובת. הוא בודק אם יש servlet מתאים לעיבוד בקשות עבור אותה כתובת (או משאב זמין שניתן להחזיר מיד). אם הוא לא מוצא משהו להחזיר, אז הוא מגיב בשגיאת 404 במקום בדף HTML. אבל אם הוא מוצא servlet מתאים "יושב" בכתובת הזו, אז הוא מסתכל על סוג הבקשה (GET, POST או משהו אחר) ושואל את ה-servlet אם יש לו שיטה שיכולה להתמודד עם שאילתה מסוג זה. אם הסרבלט אומר שהוא לא יודע איך לטפל בסוג הזה, אז Tomcat מחזיר קוד 405. וזה בדיוק מה שקרה בפרויקט שלנו. אבל אם נמצא סרבלט מתאים, ויש לו שיטה מתאימה, אז Tomcat יוצר אובייקט סרבלט, מתחיל אותו בשרשור חדש(מה שנותן לו לפעול בעצמו), ו-Tomcat ממשיכה בעבודה משלה, מקבלת ושולחת בקשות. בנוסף, Tomcat יוצר שני אובייקטים נוספים: HttpServletRequest (שאני אכנה בקיצור "הבקשה") ו-HttpServletResponse (שאותה אכנה "התגובה"). זה מכניס את כל הנתונים שהתקבלו מבקשת הלקוח לתוך האובייקט הראשון, כך שניתן לחלץ ממנו את כל הנתונים האלה. ואחרי כל זה, הוא מעביר את שני האובייקטים האלה לשיטה המתאימה של הסרבל שהופעל על שרשור נפרד. ברגע שהסרבל מסיים את עבודתו ויש לו תגובה מוכנה להישלח ללקוח, הוא מניף דגל לעבר Tomcat, ואומר "סיימתי. הכל מוכן". Tomcat מקבל את התגובה ושולח אותה ללקוח. זה מאפשר ל-Tomcat לקבל בקשות ולשלוח תגובות, מבלי להסיח את דעתו, וכל העבודה נעשית על ידי servlets הפועלים על שרשורים נפרדים. זה אומר שכאשר אנו כותבים את קוד הservlet אנו קובעים איזו עבודה תתבצע. ואתה יכול לחשוב על השיטה main() כממוקמת בתוך Tomcat עצמה (כן, היא כתובה בג'אווה), וכשאנחנו "משיקים" את Tomcat, שיטת main() מתחילה. יצירת יישום אינטרנט פשוט באמצעות servlets ו-JSPs (חלק 1) - 2
Java university

השתמש ב-servlets כדי לתפוס שיטות GET ולשלוח תגובות פשוטות במיוחד

כרגע, לסרבלטים שלנו אין שיטות מתאימות (GET), אז Tomcat מחזיר שגיאה 405. בואו ניצור אותם! המחלקה HttpServlet, שאנו הסרבלטים שלנו יורשים, מצהירה על שיטות שונות. כדי להקצות קוד ספציפי לשיטות, אנו פשוט עוקפים אותן. במקרה זה, עלינו לעקוף את doGet()השיטה בשני הסרבלטים. 
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}
כפי שאתה יכול לראות, שיטה זו לוקחת שני ארגומנטים: req (בקשה) ו- resp (תגובה). אלו הם אותם אובייקטים ש-Tomcat יוצר ומאכלס עבורנו כאשר הוא קורא למתודה המתאימה ב-servlet. כדי להתחיל, ניצור את התגובות הפשוטות ביותר. לשם כך, ניקח את האובייקט resp ונקבל ממנו אובייקט PrintWriter. סוג זה של אובייקט משמש לחיבור תגובה. נשתמש בו כדי להוציא מחרוזת פשוטה. 
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    PrintWriter writer = resp.getWriter();
    writer.println("GET method from AddServlet");
}
נעשה משהו דומה ב- ListServlet, ואז נפעיל מחדש את השרת שלנו. כפי שאתה יכול לראות, הכל עובד! כשלוחצים על הכפתורים מקבלים דפים עם הטקסט ש"כתבנו" עם ה-PrintWriter. אבל לא נעשה שימוש בקובצי JSP שהכנו ליצירת דפים עם תגובות. זה פשוט בגלל שהם אף פעם לא מוצאים להורג. הסרבלט שלנו יוצר את התגובה בעצמו ומסיים לרוץ, מסמן ל-Tomcat שהוא מוכן להגיב ללקוח. Tomcat פשוט לוקח את התגובה ושולח אותה בחזרה ללקוח. בואו נעביר את השליטה מהסרבלטים לקבצי JSP. אנו נשנה את הקוד של השיטות שלנו באופן הבא:
  • אנו משיגים אובייקט של שולח בקשה מאובייקט הבקשה, ומעבירים לו את הכתובת של דף ה-JSP שאליו אנו רוצים להעביר את השליטה;
  • אנו משתמשים באובייקט זה כדי להעביר את השליטה לדף ה-JSP שצוין, בלי לשכוח להעביר את אובייקטי הבקשה והתגובה שקיבלנו מ-Tomcat.
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
    requestDispatcher.forward(req, resp);
}
בתג הגוף של דפי ה-JSP, אתה יכול להוסיף משהו כדי שנוכל לראות בבירור איזה עמוד מוצג. לאחר שעשית זאת, הפעל מחדש את השרת ובדוק. אנו לוחצים על הכפתורים בעמוד הראשי והעמודים נפתחים, מה שאומר שהבקשות נשלחות לסרבלטים. לאחר מכן השליטה מועברת לדפי ה-JSP, אשר כעת עוברים רינדור. זה הכל לעת עתה. בחלק הבא של מאמר זה, נעבוד על הפונקציונליות של האפליקציה שלנו.

קריאה נוספת:
הערות
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION