JavaRush /בלוג Java /Random-HE /יצירת יישום אינטרנט פשוט באמצעות servlets ו-jsp (חלק 1)

רָמָה

Киев

28 February 2021
39 views
0 comments

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

רמת הידע הנדרשת להבנת המאמר: כבר פחות או יותר הבנתם את Java Core והייתם רוצים להסתכל על טכנולוגיות JavaEE ותכנות אינטרנט. זה הגיוני ביותר אם אתה לומד כעת את החיפוש של Java Collections, המכסה נושאים קרובים למאמר. יצירת יישום אינטרנט פשוט באמצעות servlets ו-jsp (חלק 1) - 1

החומר הזה הוא המשך הגיוני למאמר שלי יצירת פרויקט אינטרנט פשוט ב- IntelliJ Idea Enterprise . בו הדגמתי כיצד ליצור תבנית פרויקט אינטרנט עובדת. הפעם אני אראה לך כיצד ליצור יישום אינטרנט פשוט אך יפה באמצעות הטכנולוגיות Java Servlet API ו-JavaServer Pages API. לאפליקציה שלנו יהיה דף בית עם שני קישורים:

לדף הוספת המשתמש;
לדף תצוגת רשימת משתמשים.

אני עדיין אשתמש ב- IntelliJ Idea Enterprise Edition, Apache Maven (רק כולל כמה תלות) ו- Apache Tomcat. בסוף, "נקשט" את האפליקציה שלנו באמצעות מסגרת W3.CSS . נניח שכרגע יש לכם כבר פרויקט ריק, אותו נפתחת כאן. אם לא, עברו על המאמר הראשון והכינו אותו. זה ייקח רק כמה דקות :)

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

הדף הראשי שלנו ( / ) יהיה דף ה-html הסטטי הרגיל ביותר עם כותרת עליונה ושני קישורים/לחצנים:

הוסף משתמש חדש (יישלח אל /add );
הצג את רשימת המשתמשים (שולח אל /list ).

Tomcat יתפוס בקשות לכתובות אלו וישלח אותן לאחד משני הסרבלטים שנבצע (נתאר את המיפוי בקובץ web.xml ). וה-servlets, בתורם, יעבדו בקשות, יכינו נתונים (או ישמרו אותם אם יתווסף משתמש), ויעבירו את השליטה לקבצי ה-jsp המתאימים, שכבר "יעבדו" את התוצאה. נאחסן את הנתונים ברשימה הנפוצה ביותר (List).

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

אם יש לך 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>    <!-- buttons holder -->
            <button onclick="location.href='/list'">List users<//button>
            <button onclick="location.href='/add'">Add user<//button>
        </div>
    </div>
</body>
</html>

אין כאן שום דבר מסובך. בכותרת אנו מציינים את הכותרת של הדף שלנו. בגוף העמוד יש לנו שני divs עיקריים: header (header) ותוכן (content). בתוכן יש לנו מחזיק לכפתורים שלנו, ולמעשה שני כפתורים שבלחיצה עליהם נשלחים לכתובות המתאימות. אתה יכול להפעיל את הפרויקט ולראות איך הוא נראה עכשיו. אם תלחץ על הכפתורים, דפים עם שגיאת 404 ייפתחו כי אין לנו אותם עדיין. אבל זה מרמז שהכפתורים עובדים. הרשו לי לציין שזו לא האופציה האוניברסלית ביותר, מכיוון שאם לפתע השבתת JavaScript, הכפתורים הללו לא יועילו בדפדפן. אבל נניח שאף אחד לא השבית את JavaScript :). ברור שאפשר להשתמש בקישורים פשוטים, אבל אני מעדיף כפתורים. אתה עושה מה שאתה הכי אוהב. ואל תסתכל על זה שבדוגמאות שלי יהיו הרבה divs . ואז נמלא אותם בסגנונות, והכל ייראה יותר יפה :).

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

באותה ספריית אינטרנט , ניצור תיקיה שבה נכניס את קבצי ה-JSP שלנו . קראתי לזה השקפות, ושוב אפשר לאלתר. בתיקייה זו ניצור שני קבצי jsp:

add.jsp - דף להוספת משתמשים;
list.jsp - עמוד להצגת רשימת משתמשים.

בואו ניתן להם את כותרות הדפים המתאימות. משהו כמו "הוסף משתמש חדש" ו"רשימת משתמשים", ונשאיר את זה כך לעת עתה.

בואו ניצור שני סרבלטים

Servlets יקבלו ויעבדו בקשות ש-Tomcat יעביר אליהם. בתיקיית src/main/java ניצור חבילת אפליקציה , שתכיל את המקורות שלנו. שם יהיו לנו עוד חבילות שונות. לכן, כדי שהחבילות הללו לא ייווצרו אחת בתוך השנייה, בואו ניצור מחלקה כלשהי בחבילת האפליקציה (ואז נמחק אותה). כעת ניצור שלוש חבילות שונות בחבילת האפליקציה :

ישויות - הישויות שלנו ישכבו כאן (המחלקה עצמה, שתתאר אובייקטים של משתמש);
דגם - הדגם שלנו יהיה כאן (עוד על זה קצת מאוחר יותר);
סרבלטים - ובכן, הנה יהיו הסרבלטים שלנו.

לאחר מכן, אתה יכול להסיר בבטחה את המחלקה מחבילת האפליקציה (אם יצרת אותה, כמובן). בחבילת servlets ניצור שתי מחלקות:

AddServlet - יעבד בקשות שהתקבלו ב- /add ;
ListServlet - יעבד בקשות שהתקבלו ב- /list .

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

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

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

עבור אל אתר המאגר של Maven;
חפש שם את הספרייה שאתה צריך ואת הגרסה שאתה צריך;
אתה מקבל את קוד התלות שצריך להכניס ל-pom.xml שלך;
לְהַכנִיס! :)

אז בואו נתחיל. ראשית, בואו נכין קובץ פום . איפשהו אחרי /version אבל לפני /project , הכנס את הדברים הבאים:

<dependencies>

</dependencies>

לפיכך, ציינו שבתוך התגים הללו נפרט את התלות שאנו צריכים. כעת עבור אל mvnrepository.com , יהיה שדה חיפוש בחלק העליון. ראשית, הזן servlet לחיפוש. התוצאה הראשונה, שבה יש יותר משבעת אלפים שימושים, מתאימה לנו. אנו זוכרים שאנו זקוקים לגרסה 4.0 (עבור Tomcat 9; עבור גרסאות אחרות, יישומים ישנים יותר עשויים להתאים). זוהי גרסה עדכנית למדי, כך שאין הרבה שימושים, אבל זו הגרסה שאנחנו צריכים. יפתח דף שבו תוכלו לקבל את הקוד לתלות זו עבור מנהלי חבילות שונים ואפילו תוכלו פשוט להוריד אותו. אבל מכיוון שאנו רוצים לחבר אותו באמצעות Maven, אנו בוחרים את הקוד בלשונית Maven. אנו מעתיקים ומדביקים לקובץ ה-pom שלנו בתוך קטע התלות. אם מופיעה הודעה בפינה הימנית התחתונה של IDEA ששואלת אם ברצוננו לאפשר ייבוא אוטומטי, אנו מסכימים. אם סירבת בטעות, עבור אל "הגדרות" והפעל ייבוא אוטומטי באופן ידני: הגדרות (Ctrl + Alt + S) -> Build, Execution, Deployment -> Maven -> ייבוא זה ישמור את קובץ ה-pom וקובצי התצורה של IDEA עבור זה פרויקט מסונכרן. כעת, באמצעות אותו עיקרון, נמצא ונחבר את JavaServer Pages גרסה 2.3 (הזן jsp בחיפוש). ומכיוון שכבר השתמשנו ב-Maven, בוא נספר לו מיד שהמקורות שלנו תואמים לתחביר של Java 8, ושצריך להידור אותם לקוד בתים של אותה גרסה. אחרי כל המניפולציות האלה, 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>ru.javarush.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>1.8</maven.compile.source>
        <maven.compiler.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 יטופלו על-ידי servlet AddServlet שלנו , ולכן בקשות מ- /list מטופלות על-ידי ה- servlet ListServlet . תהליך זה נקרא מיפוי . זה נעשה בקובץ web.xml לפי העיקרון הזה:

ראשית אנו מתארים את הסרבלט (אנו נותנים שם כלשהו ומציינים את הנתיב למחלקה עצמה);
לאחר מכן אנו קושרים את הסרבלט הזה לכתובת ספציפית (אנו מציינים את שם הסרבלט שזה עתה נתנו לו ומציינים את הכתובת שממנה יש לשלוח בקשות לסרבלט זה).

בואו נתאר את הסרבלט:

<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>

כפי שאתה יכול לראות, שם ה-servlet זהה בשני המקרים. הודות לכך, 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 פשוט שמציג שני כפתורים. אין תוכן דינמי, ולכן אין טעם ליצור עבורו סרבלט נפרד, שאליו יישלחו בקשות מהכתובת / ואשר לא יעשה דבר מלבד העברת ביצוע לאיזה jsp (שגם הוא צריך להיות נוצר), שיצייר לו רק היו לנו שני כפתורים. אנחנו לא צריכים את זה; אנחנו שמחים עם משאב סטטי. כאשר Tomcat יקבל בקשה, הוא יבדוק שאין אפילו servlet אחד שיכול לעבד את הבקשה בכתובת כזו, ואז הוא יראה שבכתובת הזו יש למעשה קובץ html מוכן , שהוא ישלח בהצלחה . נוכל להריץ את האפליקציה שלנו שוב (להפעיל מחדש את השרת או לפרוס מחדש, כרצונך) ולוודא שהדף הראשי מעובד, שום דבר לא נשבר, כשאנחנו לוחצים על הכפתורים מתרחשים מעברים, אבל בינתיים יש גם שגיאה כתוב. אגב, אם לפני כן הייתה לנו שגיאה 404, עכשיו יש לנו 405. זה אומר שהמיפוי עבד, הסרבלטים נמצאו, אבל פשוט לא היו להם שיטות מתאימות לעבד את הבקשה. אם בשלב זה אתה עדיין מקבל שגיאת 404, למרות שהכל נעשה כהלכה, אולי כדאי לתקן את תצורת הפריסה ברעיון. לשם כך, עליך לעבור ל- Edit configurations (בחלק העליון ליד כפתור ההתחלה), לעבור ללשונית Deployment בצד ימין של החלון ולוודא שבהקשר של Application זה פשוט מצוין /

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

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

אנו תופסים שיטות GET עם servlets ושולחים תגובות פשוטות

כרגע, לסרבלטים שלנו אין שיטות מתאימות (GET), אז Tomcat מחזיר לנו שגיאה 405. בואו נעשה אותם! המחלקה HttpServlet , שממנה אנו יורשים את ה-servlets שלנו, מגדירה שיטות שונות. על מנת להגדיר קוד כלשהו לשיטות, אנו פשוט עוקפים אותן. במקרה זה, עלינו לעקוף את שיטת doGet() בשני הסרבלטים.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}

כפי שאתה יכול לראות, שיטה זו מקבלת שני אובייקטים: req (request) ו- resp (response). אלו הם אותם אובייקטים ש-Tomcat יצור ויאכלס עבורנו כאשר הוא יקרא למתודה המתאימה בסרבלט זה. ראשית, בואו נעשה את התשובות הפשוטות ביותר. לשם כך, קח את האובייקט resp והשיג ממנו אובייקט PrintWriter , שניתן להשתמש בו לחיבור תגובות. ובכן, באמצעותו נדפיס איזו מחרוזת פשוטה.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    PrintWriter writer = resp.getWriter();
    writer.println("Method GET from AddServlet");
}

נעשה משהו דומה בשרת ListServlet , שלאחריו נתחיל שוב את השרת שלנו. כפי שאתה יכול לראות, הכל עובד! כאשר אתה לוחץ על הכפתורים, עמודים נפתחים עם הטקסט ש"הקלטנו" עם PrintWriter . רק שה- jsp שלנו שהכנו ליצירת דפים עם תשובות לא משמשים בשום צורה. הסיבה לכך היא שהביצוע פשוט לא מגיע אליהם. השרת עצמו יוצר כעת תגובה ומסיים את עבודתו, ומאותת ל-Tomcat שיש לו תגובה מוכנה ללקוח. Tomcat פשוט לוקח את התגובה הזו ושולח אותה בחזרה ללקוח. אנו מעבירים שליטה מ-servlets ל- jsp. בואו נשנה את הקוד של השיטות שלנו כך:

אנו מקבלים מאובייקט request a request manager object, שבו אנו מעבירים את כתובת ה-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 (בתוך תג הגוף) נוכל לכתוב משהו כדי שנוכל לראות בבירור איזה עמוד מוצג. לאחר מכן, אנו מפעילים מחדש את השרת ובודקים. כפתורים בעמוד הראשי נלחצים, דפים נפתחים, מה שאומר שבקשות נשלחות ל-servlets, ולאחר מכן השליטה מועברת לדפי jsp, שכבר מעובדים. זה הכל. בחלק הבא של המאמר נעסוק בפונקציונליות של האפליקציה שלנו.

מה עוד לקרוא:

יצירת פרויקט אינטרנט פשוט ב- IntelliJ Idea Enterprise. צעד אחר צעד, עם תמונות

הצ'אט שלי

הערות

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION